はてなブログ人気テーマデザイン（カプチーノ）の目次と見出しをカスタマイズしてみた！
テーマデザイン「カプチーノ」の目次と見出しを変更してみました。
変更する場合はリセットCCSが必要です！
下の写真は以前使用していた目次です。カフェのボード風のお洒落なデザインでしたが記事の内容によっては黒系のデザインなので少し変更したい時があり今回思い切って変更してみました！
目次と見出しを変更するにはリセットCCSの設定が必要！
目次と見出しのカスタマイズをする時は、今の目次と見出しの設定をリセットする必要があります。これをせずに変更すると前のデザインと重なったり上手くCCSが反映されませんでした。
何回も試しましたが上手く行かず、調べると各種設定のリセットCCSがある事がわかりました。
参考にしたサイトはフジグチさんのサイトです。
①目次のリセットCCSをデザインCCSにコピペする。
上の記事の中に各種設定のリセットCCSがありますので、このCCSをデザインにコピペしてください。目次リセットCCSを貼り付ける場所はデザインCCS に初めに設定されているコードのすぐ下に貼り付ける事が重要です。
②見出しのリセットCCSをデザインCCSにコピペする。
見出しも変更についても上の記事にある各種設定リセットのCCSを貼り付けてからでないと干渉して上手く反映されませんでした。
見出しリセットの種類
h2見出しリセット･･･Cappuccino
h3見出しリセット･･･Cappuccino
h4見出しリセット･･･Cappuccino
見出しまとめてリセット･･･Cappuccino
はてなブログの大見出しはh3、中見出しはh4、小見出しはh5となっています。
変更したい見出しコードは同じなので各種CCS内にあるh4などを読み替えて変更してください。
貼り付けたリセットCCSコードはh3、h4、h5で、場所は目次のリセットのすぐ下に貼り付けました。
目次のデザインを変更しましょう！
色々目次のカスタマイズのサイトがありますが、こちらもフジグチさんのサイトから選択しました。
デザインは7種類くらい有りましたが現在表示されている目次を選びました。
記事の中に変更したい目次CCSがあるのでコピペしてデザインCCSに貼り付けてください。 貼り付ける場所は目次のリセットCCSの後ろにコピペしても良いですが一番最後でも反映します。
見出しのデザインを変更しましょう！
今回参考にしたサイトはこちらです。他にも色々有りましたが変更した時の余白やサイズ感が丁度いい具合で選んでみました。
今使っている大見出しのCCS
大見出しを変更する場合は下記のコードをコピペしてください。
青字のコードは線（目次の色に合わせてみました）、グレーのコードが背景なのでお好みの色に変更してください。
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f5f5f5;
border-left: 8px solid #72b0ed;
border-bottom: 2px solid #72b0ed;
}
padding: 4px 10px;
color: #111;
background-color: #f5f5f5;
border-left: 8px solid #72b0ed;
border-bottom: 2px solid #72b0ed;
}
今使っている中見出しのCCS
中見出しを変更する場合は下記コードをコピペしてください。
青字は線の上下のコードです。これも目次の色に変更しました。
.entry-content h4 {
position: relative;
padding: 1em 0;
}
h4::before,
h4::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
} h4::before {
top: 10px;
border-top: 2px solid #72b0ed;
border-bottom: 1px solid #72b0ed;
}
h4::after {
bottom: 10px;
border-top: 1px solid #72b0ed;
border-bottom: 2px solid #72b0ed;
}
position: relative;
padding: 1em 0;
}
h4::before,
h4::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
} h4::before {
top: 10px;
border-top: 2px solid #72b0ed;
border-bottom: 1px solid #72b0ed;
}
h4::after {
bottom: 10px;
border-top: 1px solid #72b0ed;
border-bottom: 2px solid #72b0ed;
}
今使っている小見出しのCCS
.entry-content h5 {
padding: .25em 0 .25em .75em;
border-left: 6px double #72b0ed;
}
padding: .25em 0 .25em .75em;
border-left: 6px double #72b0ed;
}
色を変えたい場合は下記のサイトで色見本コードを確認願います。
www.colordic.org
最後に
目次を変更するだけでイメージがガラッと変わりましたね。
初めは設定に苦労しましたが、リセットCCSをしてからは順調に進みました。皆さんも目次や見出しをカスタマイズする時はリセットCCSを忘れすに！参考になれば幸いです。
