皆さんこんにちは、こつぶです!
はてなブログのカスタマイズって楽しいですよね。
今回は、はてなブログの目次の上に「目次」の文字を入れる方法をご紹介します!
目次を表示する方法
はてなブログには、記事中に目次を表示させる方法があります。詳しくは、はてなブログ公式の記事を見てね。
見出しタグを使っていないと、目次に表示されないので注意。
目次の表示方法は、
記事中の目次を表示させたいところに
[:contents]
と書くだけ。
見出しの文章がリストで表示されるだけの、シンプルなデザインです。
目次という文字は入っていないので、目次の文字を入れるにはカスタマイズする必要があります。
目次の上に文字を入れる
.table-of-contents:before { content: "目次"; font-size: 20px; font-weight: bold; }
目次の上に「目次」と文字を表示させたい場合は、こんなCSSを追加すればOK。
content: "目次";
の目次の部分を変えれば、好きな文章に変えることも出来ます。
コードを追加する場所
PCとスマホで追加する場所が変わります。
レスポンシブデザインを使用している場合は『デザインCSS』に追加するだけで大丈夫です。
『管理画面』>『デザイン』
PC:『カスタマイズ 』>『デザインCSS』
スマホ:『スマートフォン』>『記事』>『記事上』
まとめ
以上が目次の上に「目次」の文字を入れる方法です。
ちょっと地味かもしれませんが、ぜひ試してみてください!