DreamerDreamのブログ

夢想家の夢です。〜揚げたてのモヤっとしたものをラフレシアと共に〜

はてなブログの見出しスタイルをスマホ向けに設定した

PC向けのデザインcssを少しだけ弄っていましたが、これまでスマホには反映されていませんでした。

「ま、いっか」とも思っていたのですが重い腰を上げることにしました。

f:id:DreamerDream:20190709144532p:plain

 

中身は見出しのh3とh4の設定だけですが、これをスマホにも設定したい!

f:id:DreamerDream:20190709144543p:plain

 

で、スマホにもと思うとこのレスポンシブデザインに対応したテーマじゃないとおかしくなるそうで、実際に試したところ変になっちゃったので解除。

f:id:DreamerDream:20190709144612p:plain

 

調べるとスマホ向けのHTMLを編集すると出来るそうなんだけど・・・Proじゃなきゃ弄らせてくれないそうです。orz...ですよねー

f:id:DreamerDream:20190709144621p:plain

 

 

で、解決方法なのですが、

スマホの設定から「PCと同じHTMLを表示する」にチェックを入れます。

f:id:DreamerDream:20190709144629p:plain

f:id:DreamerDream:20190709144645p:plain

 

で、PC用デザインの「記事」を開いて

f:id:DreamerDream:20190709144653p:plain

 

 

「記事上」の項目を弄ります。

f:id:DreamerDream:20190709144706p:plain

 

「記事上」のHTMLに直接スタイルシートを追記するのです!

f:id:DreamerDream:20190709144603p:plain

 

内容はPC向けと全く同じcssで、スタイルの宣言をするだけです。(スマホ用にカスタムしてもいいけど)

<style type="text/css">
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}

.entry-content h4 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h4::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #2d70a4;
z-index: 2;
content: '';
}
</style>

 

で、保存してスマホから確認すると!

f:id:DreamerDream:20190709144727p:plain

わーい!

できてるー!

 

ということで、Proじゃなくてもスマホ向けデザインは弄れるんです!

https://cdn.profile-image.st-hatena.com/users/DreamerDream/profile.png私、(PONさん (@o_n_pon) | Twitter)を応援してくださるお優しいかたは15円から投げ銭可能ですので↓よりカンパをお願いしますm(_ _)m

kampa.me