どうも。
やまこうです。
みなさんのブログを拝見していると、目次があってわかりやすいですよね。
かっこいいですよね。
自分も取り入れてみたいと思いました。
標準の目次の作成
調べてみると、はてなブログには標準で目次を作成する機能がありました。
記事中に [:contents] と記載すれば、その場所に目次を作成してくれます。
便利ですね。
ただ、すごくシンプルです。
すごく。
いえ、文句を言っているわけではありません。
標準の目次をカスタマイズ
標準の目次はシンプルイズベストな感じでしたので、下記のサイトを参考にカスタマイズをしました。
というより、そのまま取り入れさせて頂きました。
コードの記載場所
管理画面→デザイン→カスタマイズ→{}デザインCSS
ここに、記載されているCSSをコピペすれば大丈夫です。
目次に目次って記載する
目次だから目次って分かるように記載する方法。
これで、目次だって一目瞭然ですね。
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold;
}
目次に番号を表示する
目次に番号を表示できるようにする方法。
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
目次部分を背景色で分かりやすく方法
目次の部分を背景色で分かりやすくする。
これで、他の部分との区別がわかりやすくなります。
.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0f0f0;/*背景色はここから変更*/
}
最後に
目次が入るだけで、大分それっぽくなりますね。
CSSを勉強したら、色々なことが出来るようになりそうですが。
しばらく？は、皆さんのブログを参考にさせて頂きたいと思います。
それでは。
