はてなブログ無料版でできること⑦ 見出しのカスタマイズ
はてなブログ無料版でできることリサーチ第７弾です。
今回は、見出しのカスタマイズです。
見出しとは？
見出しとは、まさにこの上に「見出しとは？」で表示されている部分です。
はてなブログの「見たまま」編集だと、左上の方に「大見出し」「中見出し」「小見出し」と簡単に切り替えができるようになっていますよね。
ちなみに私が使用しているテーマ「SOHO」だと、
最初の設定は
大見出し
中見出し
小見出し
という感じです。
それら全て、カスタマイズ可能です。
まずは、「大見出し」のカスタマイズ方法をご紹介します。
実際のコード
これと同じように、吹き出しのデザインにしたい場合です。
今回も、「デザイン」→「カスタマイズ」→「デザインCSS」に次のコードを入力するだけです。
.entry-content h3 {
font-weight: bold;
font-size: 20px;
position: relative;
padding: .5em .75em;
background-color: #dbd0e6;
border-radius: 6px;
border-bottom: none;
}
.entry-content h3:before {
content: '';
position: absolute;
top: 100%;
left: 20px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #dbd0e6;
}
色は自由に変更可能です。
赤色の部分を好きな色に変更します。
「大見出し」以外はどうやって変更する？
次は、「中見出し」や「小見出し」の変更方法です。
先ほどのコードの紫色の部分に注目してほしいのですが、「h3」となっています。
これが見出しのコードで、
- 大見出し：h3
- 中見出し：h4
- 小見出し：h5
という対応関係になっていますので、好きなデザインのカスタマイズをコピペしつつ、最初の一行の「.entry-content h3」この部分だけ変更すれば問題なしです！
できたでしょうか？
