はてなブログの目次の簡単な作成方法やカスタマイズ方法を解説！
大手ブログサイトであるはてなブログはブログを書く際に目次の設定をすることが可能です。目次の簡単な作成方法や、目次のカスタマイズ方法、コピペOKなはてなブログの目次のデザインCSSサイトの紹介などをこの記事では紹介しています。
目次
はてなブログの目次の簡単な作り方
現在ではSNSが流行し、あまりブログ形式のサービスは終了しつつあります。その中でも人気を誇るブログサービスであるはてなブログには目次を設定することが可能です。この記事でははてなブログの目次を簡単な作り方を紹介します。
記事を作成する
見出しの作り方について説明します。見出しを作るにあたって、目次を設定する必要があります。目次を設定するのに必要になるのがはてなブログの記事です。いつも書いているようにブログを書いていきましょう。その中でも目次の作り方として、目次にしたい文章は短く、わかりやすい文章にしておくことがその先の見出しを設定する時に役に立ちます。
目次に表示したい文章を見出しに設定する
はてなブログの記事を書き終えたら、目次に表示したい文章を見出しに設定します。目次に表示したい文章を見出しに設定すると
- 目次1
- 目次2
のような形でタイトルの下にリンクを貼ることができます。見出しの設定方法は、タイトルを記入する欄の下にある各種メニューの左に見出しというメニューがあります。それを利用し見出しを設定することが可能です。見出しに設定したい文章を範囲選択し、見出しを大見出し、中見出し、小見出しの3種類から設定します。
小見出しの下には標準という選択肢がありますが、見出しに設定したものを標準の文字に戻す設定になっています。
目次を表示させたい位置を設定する
目次にしたい文章を見出しに設定することができたら、次は目次を表示させたい位置を設定します。タイトルを入力する欄の下にあるメニューの中に目次というボタンがあります。そのボタンを目次を表示させたい位置で押すことによって、[:contents]というタグが出ます。その位置に目次を付けることができます。
プレビューで確認する
目次を表示させたい位置に設定をした後は、見出し設定と目次設定がきちんとできているか、プレビューで確認します。プレビューボタンをクリックすると、ブログがどういった表示をされるのかを確認することができます。プレビューでおかしい部分がないかきちんと確認しましょう。
はてなブログの目次をカスタマイズする方法
はてなブログの記事の簡単な作り方について説明しましたが、はてなブログの目次はカスタマイズすることができます。はてなブログの目次のカスタマイズ方法について説明します。
目次にタイトルを追加する
はてなブログの目次のカスタマイズの一つである、目次にタイトルを追加する方法について紹介します。まず、ブログの記事を書いたら自分のはてなIDをクリックし、デザインを選びます。デザインをクリックすると、デザイン設定の画面に飛ぶので、その中にあるカスタマイズをクリックします。
その中からデザインCSSを選択し、デザインCSSの入力部分をクリックし、タグを入力する部分を広くします。
はてなブログのタイトルに記述するためのタグは
.table-of-contents:before{
content: "この記事の目次";/*目次タイトルの名称*/
font-size: 120%;/*目次タイトルの大きさ*/
font-weight: bold;/*目次タイトルを太字にする*/
}
というタグが必要になっているので、最初のタグの間にこのタグをコピペして入れることによってタイトルを追加することができます。この記事の目次、という部分は目次やindexなど、自分の好きなタイトルに変更することもできます。
目次に番号を追加する
はてなブログの目次のカスタマイズは他にも目次に番号を追加することもできます。利用するタグは
ul.table-of-contents{
list-style-type: decimal;/*リスト先頭（大見出し）のリストマークを数字へ変更*/
}
になっています。このタグは大見出しに設定している見出しの目次に対して数字をつけるタグになっています。
目次の背景色を変更する
最後に紹介するはてなブログの目次のカスタマイズは、目次の背景色を変更するカスタマイズです。このカスタマイズに利用するタグは
ul.table-of-contents{
background: #fffab9 !important;/*背景色*/
}
というタグになっています。背景色は好みの色に変えることのできるのでカスタマイズ性がとても高い部分になります。
SNSフリーアイコン素材47選！ブログで使えるおしゃれで可愛いデザインなど紹介！はてなブログの目次におすすめのデザイン【コピペOK】
はてなブログの目次は様々なデザインへカスタマイズすることが可能です。そのため、コピペOKでデザインCSSを公開しているサイトも多数存在しています。デザインコピペOKのおすすめサイトを紹介します。
かわいいデザイン
まず紹介するのは、はてなブログの目次をかわいいデザインにするデザインCSSを紹介しているサイトです。ガーリーでかわいいデザインが揃っているサイトになっています。
シンプルなデザイン
次に紹介するのは、はてなブログの目次をシンプルにデザインするデザインCSSを紹介しているサイトです。目次が目立ちすぎるのもいやだけれど、少し装飾を慈姑得たい時などに使えるサイトです。シンプルにかわいいデザインを紹介しているサイトや、ナチュラルにシンプルなデザインを紹介しているサイトがあります。
マステメモ風デザイン
最後に紹介するはてなブログの目次のデザインは流行にもなっているマスキングテープでメモを止めたように目次をカスタマイズするデザインを公開しているサイトです。マステメモ風のデザインはシンプルでかわいらしく、今どきの雰囲気があふれるデザインになっています。
はてなブログの目次を作成してみよう
はてなブログは様々なデザインのカスタマイズが可能です。そのため、コピペOKのデザインを公開しているサイトも多く、デザインCSSなどは知識が必要になりますが、その知識がない方でもコピペOKのサイトを参考にすることで楽しくカスタマイズできることが可能です。この記事を参考にはてなブログの目次を作成してみてください。
