凡人エンジニアの前向きスローライフ

南国ビーチでビールを飲みながらゆっくり過ごしたい凡人エンジニアが、気ままに書いているブログです

【2017年最新】はてなブログに目次を表示する方法

 

ブログ記事の目次は何のため?

ブログ記事が長い場合、読者が知りたい内容がその記事に書かれているのか?

ということを冒頭で知るための役割を果たします。

SEO的な意味ありも少しはありますが、あくまで読者の利便性を向上させるためのものです。

目次を表示するには

はてなブログで目次を表示する手順を紹介します。

まずは通常通りに、見出しを使用してブログ記事を書きます。

 

目次の配置したい場所で「目次」アイコンをクリックします。

とりあえず、完成です。

目次の見た目を変更する

このままでもいいのですが、素朴過ぎるので、見た目を少し調整する方法を紹介します。

[ダッシュボード] => [デザイン]=>[カスタマイズ]=>[デザインCSS]をクリックします。

背景色を変更する

以下のコードをデザインCSSの入力エリアにコピペして追記保存します。

.table-of-contents{
    background: #f0f0f0;
}

table-of-contentsは目次表示部分を指していて、その背景色を(background)を灰色(#f0f0f0)にしてね!

という意味になります。

連番を振る

以下のコードをデザインCSSの入力エリアにコピペして追記保存します。

.table-of-contents ul{
    list-style-type: decimal;
}

table-of-contentsのそれぞれのか項目(ul)の表示の仕方(list-style-type)は数字(decimal)にしてね!
という意味になります。

まとめ

はてなブログに目次を表示する方法をご紹介しました。

簡単に表示することができますが、文章が短い場合など、目次が帰って読者の邪魔となることもありますので、記事の全体バランスを考えて使用しましょう。