チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】見出しのデザインを変えてみる|スマホ用ページにも対応

 スポンサード リンク

f:id:chipsforest:20141106005426j:plain:w250


 どうもこんばんは☆

 はてなブログの見出し(h3とか)ってデフォルトのままだと味気ないですよねぇ??


 今回はその味気ない見出しデザインを変更していきたいと思います。

デザインの変更方法

 今回はh3とh4タグのデザイン変更。(h4は文字サイズ変更のみ)


<style>

.entry-content h3{
margin-top:20px;
font-size:110%;
border-left: 10px solid #444B99;
background-color: #E6E6E6;
}

.entry-content h4{
font-size:110%;
}

/*↑PC版見出しデザイン*/


#body h3{
margin-top:20px;
font-size:102%;
border-left: 10px solid #444B99;
background-color: #E6E6E6;
}

#body h4{
font-size:102%;
}
</div>

/*↑スマホ版見出しデザイン*/


 ↑これは実際にこのブログで使用しているものです。


 PC版、スマホ版のどちらも同じデザインで良い場合は「.entry-content h○」の方だけ記述すれば両方に反映されます。

 PC版とスマホ版を別々のデザインにしたい場合は「.entry-content h○」の下に「#body h○」を記述する事でスマホ専用のデザインを変更出来ます。

 このブログの場合は文字サイズをPC版とスマホ版で変えているので両方記述してます。


 上記のソースをはてなブログ管理画面→「設定」→「詳細設定」→「headに要素を追加」の中に記述すれば完了です。


 はてな記法だとh3が「∗」、h4が「∗∗」に当たります。

 はてな記法を使っている場合は見出しを∗で書いてもデザインが反映されます。


 上記ソースの{}内を書き換えればご自分の好きなデザインに変更可能。


 ちなみに、グーグルで「見出し デザイン」とかで検索すると、オシャレな見出しデザインのソースがたくさん出てくるので、それを参考にすると良さそうです。


 最後に、現在は「.entry-content h○」と「#body h○」で反映されますが、はてなはたま~に仕様変更する時があるので、要素が変わったら書き直さなければなりません(汗。

PAGE TOP