はてなブログの見出しは
１．大見出し
２．中見出し
３．小見出し
の３つですね。
テンプレートだと文字が大きくなるだけなので、カスタマイズしていきたいと思います。
まず大見出しから。
参考にした記事はこちら。
最初にもともとのデザインをリセットするコードを貼ります。
.entry-content h3 { border: none; background: none; }
次に使ってみたいデザインのコードを、デザインCSSの一番下に貼り付けてみました。
.entry { position: relative; z-index: 1; } .entry-content h3 { position: relative; margin: 1.5em 0em; border: 1px solid #333; padding: 0.5em; } .entry-content h3::before { content: ""; position: absolute; top: 4px; left: 4px; width: 100%; height: 100%; background-color: #ffddcc; z-index: -1; }
最初はグローバルメニューを設置するためのながーいコードの下に貼り付けてみたんですが、反映されない・・・
下じゃだめなのか？ということで、最初からあるコードのすぐ下に貼り付けてみたら、
できました！
大見出し
次に中見出し用。
.entry-content h4{ background: #fef4f4; border-top: 5px double #e3adc1; border-bottom: 5px double #e3adc1; padding: 0.5em; }
中見出し
次に小見出し用。
.entry-content h5 { border-left: 4px solid #333; background-color: #e7e7eb; padding: 0.5em; }
小見出し
中見出しと小見出しって、大きさは同じに見えますね。
デザインはシンプルなものにしてみました。
