前回は、見出しの付け方について解説しました。今回は前回作成した見出しを目次にする方法について解説していきます。
目次には、見た目が記事らしくするだけでなく、読者の利便性を高め、アクセスアップをする効果もあります。ちょっと難しいところもありますが、頑張って目次をつけてみましょう。
記事に目次を追加しよう
目次の追加はとても簡単。
最初の見出しの１行前に[:contents]という文字を入力するだけです。以下の画像のように文字を追加すると、自動で見出しをまとめて目次を作ってくれます。
プレビューを行うと、画像のように見出しをまとめた画像が作られていることが確認できます。
目次をカスタマイズしよう
上記の手順で目次の作成は完了ですが、このままでは見た目がイマイチなので、見た目を整えるための設定を行いましょう。
この設定は一度するだけで、ずっと見た目を整えてくれるので、ぜひ設定するようにしてください。
設定を行うにはまず、管理画面の［デザイン］をクリックします。
するとデザイン画面に変わるので、スパナのアイコンをクリックしましょう。
表示されたメニューの一番下に「デザインcss」というメニューがあるので、そちらをクリックします。
cssというのはブログのデザインを指定するための言語です。この言語で書かれた文章をコードと呼びます。
cssを入力できる画面が開くので、以下のコードをコピーしましょう。
.table-of-contents:before{
content: “目次”;
font-size: 150%;
}
/* 目次 */
.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0f0f0;/*背景色はここから変更*/
}
コピーしたコードを、cssの入力画面に貼り付けます。
コードを貼り付けたら［変更を保存する］ボタンをクリックします。
変更を保存したあとで記事を見ると、目次の見た目が変わっていることがわかるでしょう。
目次は他にも、最初は非表示にしておくなどのカスタマイズが可能なので、興味がありましたら、こちらのブログを参考にカスタマイズしてみてください。
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム
目次をつける意味
目次は見出しをまとめて作られるので、読者に早い段階で、記事のだいたいの内容を伝えることができます。利便性があがるということですね。また、見出しにキーワードを含めていた場合、記事中のキーワードが増えるので、アクセスアップにも繋がります。
今回は、cssなどちょっと難しいところが出てきましたが、ぜひ挑戦して目次をつけてみてくださいね！
次回は、まとめやあとがきの付け方について解説します。