はてなブログの目次の簡単な作成方法やカスタマイズ方法を解説！

現在ではSNSが流行し、あまりブログ形式のサービスは終了しつつあります。その中でも人気を誇るブログサービスであるはてなブログには目次を設定することが可能です。この記事でははてなブログの目次を簡単な作り方を紹介します。

見出しの作り方について説明します。見出しを作るにあたって、目次を設定する必要があります。目次を設定するのに必要になるのがはてなブログの記事です。いつも書いているようにブログを書いていきましょう。その中でも目次の作り方として、目次にしたい文章は短く、わかりやすい文章にしておくことがその先の見出しを設定する時に役に立ちます。

はてなブログの記事を書き終えたら、目次に表示したい文章を見出しに設定します。目次に表示したい文章を見出しに設定すると

• 目次1
• 目次2

目次にしたい文章を見出しに設定することができたら、次は目次を表示させたい位置を設定します。タイトルを入力する欄の下にあるメニューの中に目次というボタンがあります。そのボタンを目次を表示させたい位置で押すことによって、[:contents]というタグが出ます。その位置に目次を付けることができます。

目次を表示させたい位置に設定をした後は、見出し設定と目次設定がきちんとできているか、プレビューで確認します。プレビューボタンをクリックすると、ブログがどういった表示をされるのかを確認することができます。プレビューでおかしい部分がないかきちんと確認しましょう。

はてなブログの記事の簡単な作り方について説明しましたが、はてなブログの目次はカスタマイズすることができます。はてなブログの目次のカスタマイズ方法について説明します。

はてなブログの目次のカスタマイズの一つである、目次にタイトルを追加する方法について紹介します。まず、ブログの記事を書いたら自分のはてなIDをクリックし、デザインを選びます。デザインをクリックすると、デザイン設定の画面に飛ぶので、その中にあるカスタマイズをクリックします。

その中からデザインCSSを選択し、デザインCSSの入力部分をクリックし、タグを入力する部分を広くします。

はてなブログのタイトルに記述するためのタグは


.table-of-contents:before{
    content: "この記事の目次";/*目次タイトルの名称*/
    font-size: 120%;/*目次タイトルの大きさ*/
    font-weight: bold;/*目次タイトルを太字にする*/
}


というタグが必要になっているので、最初のタグの間にこのタグをコピペして入れることによってタイトルを追加することができます。この記事の目次、という部分は目次やindexなど、自分の好きなタイトルに変更することもできます。

はてなブログの目次のカスタマイズは他にも目次に番号を追加することもできます。利用するタグは

ul.table-of-contents{
    list-style-type: decimal;/*リスト先頭（大見出し）のリストマークを数字へ変更*/
}

になっています。このタグは大見出しに設定している見出しの目次に対して数字をつけるタグになっています。