小粒ログ

小粒なネタを提供する雑記ブログです。

目次の上に「目次」の文字を入れる方法|はてなブログ カスタマイズ

皆さんこんにちは、こつぶです!
はてなブログのカスタマイズって楽しいですよね。

今回は、はてなブログの目次の上に「目次」の文字を入れる方法をご紹介します!

目次を表示する方法

staff.hatenablog.com

はてなブログには、記事中に目次を表示させる方法があります。詳しくは、はてなブログ公式の記事を見てね。

見出しタグを使っていないと、目次に表示されないので注意。

目次の表示方法は、
記事中の目次を表示させたいところに

[:contents]

と書くだけ。

見出しの文章がリストで表示されるだけの、シンプルなデザインです。

目次という文字は入っていないので、目次の文字を入れるにはカスタマイズする必要があります。

目次の上に文字を入れる

.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}

目次の上に「目次」と文字を表示させたい場合は、こんなCSSを追加すればOK。

content: "目次";の目次の部分を変えれば、好きな文章に変えることも出来ます。

コードを追加する場所

PCとスマホで追加する場所が変わります。

レスポンシブデザインを使用している場合は『デザインCSS』に追加するだけで大丈夫です。

『管理画面』>『デザイン』

PC:『カスタマイズ 』>『デザインCSS』
スマホ:『スマートフォン』>『記事』>『記事上』

まとめ

以上が目次の上に「目次」の文字を入れる方法です。

ちょっと地味かもしれませんが、ぜひ試してみてください!