はてなブログの目次の簡単なカスタマイズ方法

ここでは、目次のカスタマイズ方法を説明します。

目次って簡単に変えられるのだろうか？専門知識ないけど・・・。

そういった疑問にお答えしていきます。

目次を変えられた方が良い理由

デフォルトの目次では、見出し全てを目次の対象としてしまうため、場合によっては目次が細かくなりすぎ、画面のかなりの幅をとるだけでなく、余計に見づらくなってしまうことがあります。

目次の本来の目的は、記事中の内容を簡潔に読者に伝えることですよね？
また、好きなように変えたい差別化したいなどの理由もあるかと思います。

では具体的にアクションについて説明します。

はてなブログの目次の簡単なカスタマイズ方法

目次のカスタマイズは簡単です。

見た目を変えるだけなら、ググればすぐに見つけられます。

ここでは「見た目＋目次に表示したい見出しを選ぶ」を紹介します。

専門知識は不要です

カスタマイズや自分でコード貼り付け（HTMLとかCSS）と聞くと、脊髄反射的に無理って思う方もいるかもしれませんが、ご安心ください。

知識がなくても大丈夫です。

なぜなら私も知識がほとんどないのに、調べて色々と試したらできたからです。
しかしながら、こんなシンプルな見た目にも関わらず、たぶん１０時間くらい使ってます・・・。

私と同じ時間を使わなくて済むように、紹介していきたいと思います。

（注意事項）
※貼り付け後、失敗した！と思ったら丸ごと消せば、元に戻せます。

具体的にやること

以下のコードを、
【ダッシュボード　＞　デザイン　＞　カスタマイズ（スパナのアイコン）　＞　デザインCSS】
に、コピペするだけです。
元々なんか書いてあると思うので、それは消さずに改行して追記する形でOKです。
ちょっと縦長で見づらい&コピペしにくいかもしれませんが、すいません。

/*はてな目次のデザイン*/
ul.table-of-contents {
border: 1px solid #222;
padding: 1.2em 1em 1em 2em;
margin: 0.5em 0 2em 0;
position: relative;
background-color: #fff;
border-radius: 3px;
font-size: 1.2em;
}
ul.table-of-contents:before {
content: "目次";
display: inline-block;
position: absolute;
top: -0.6em;
left: 0.5em;
background: #000;
padding: 0 0.5em;
font-weight: 700;
color: #fff;
}
.table-of-contents ul{
display: none;/*??階層以降を消す*/
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: none;/*表示一時的に消す*/
}
ul.table-of-contents li:before {
content: "▼"; /*記号に変更*/
color: #000000;
padding-right: 0.5em;
font-size: 80%;
vertical-align: text-top;
}
.table-of-contents a{
color:#0000ff;
}
.table-of-contents a:link {
color:#0000ff;
}
.table-of-contents a:visited {
color:#0000ff;
}
.table-of-contents a:hover {
color: #000080 ;
}

上記をコピペしたら、【変更を保存する】で完了です。

完了後、実際にブログを見てもらったら、目次の表示が変わっていると思います。

カスタマイズ箇所の説明

コピペしただけでは、私と同じものになってしまい非常にシンプルかと思いますので、コードの変更箇所やその内容について説明します。

上記の吹き出し見てもらえれば、おおむねわかって頂けると思います。
一部補足します。

各項目の色の指定について

色指定の「#fff」などは、「#ffffff」とも記述できます。
より細かい色を指定する場合は、６桁必要です。
同じ文字の場合は、３桁でも６桁でも同じ色です。

色はこちら　⇒　WEB色見本 原色大辞典 - HTMLカラーコード
色々な色が載っていてわかりやすいです。

目次に表示する見出し数の調整について

「ul」の数は見出しの階層の深さです。
私の場合は「ul」１つなので、大見出しのみ表示されます。
例えば、「ul ul ul　{　」と記述すれば、小見出しまで、目次に表示されます。
試してみてください。

但し、ここを変えた場合、全記事がそのように変わるので、そこは気を付ける必要があります。
記事によって目次を変えたい場合には向いていないので、あらかじめ目次の階層は決めておいた方が楽かもです。

記事によって目次の階層を変えるCSSというのは、すいませんがわかりません。

別の方法としては、表示される階層をあらかじめ指定しておきその上で、記事執筆の際に、見出しの大きさを調整するというやり方もあると思います。

まとめ

いかがでしたでしょうか。うまく目次のカスタマイズできましたか？

私は目次の調整や、見出しの記号、更新日の表示カスタマイズなどで、トータル１０時間は使ったような気がします。

上記の目次調整だけでしたら、あっという間かと思いますので、気になった方は是非試してみてください。

見出しの記号等々については、また別の機会に記事にしたいと思います。