育児と投資と節約と

いつの間にやら3児の父親になってました。気づいたことや思ったことなどを書いていきたいと思います。

はてなブログの目次をカスタマイズしました

どうも。

やまこうです。

 

みなさんのブログを拝見していると、目次があってわかりやすいですよね。

かっこいいですよね。

自分も取り入れてみたいと思いました。

 

 

 

標準の目次の作成

調べてみると、はてなブログには標準で目次を作成する機能がありました。

staff.hatenablog.com

記事中に [:contents] と記載すれば、その場所に目次を作成してくれます。

便利ですね。

ただ、すごくシンプルです。

すごく。

いえ、文句を言っているわけではありません。

 

標準の目次をカスタマイズ

標準の目次はシンプルイズベストな感じでしたので、下記のサイトを参考にカスタマイズをしました。

というより、そのまま取り入れさせて頂きました。

powerbombkun.hatenablog.jp

コードの記載場所

管理画面→デザイン→カスタマイズ→{}デザイン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を勉強したら、色々なことが出来るようになりそうですが。

しばらく?は、皆さんのブログを参考にさせて頂きたいと思います。

それでは。