すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

はてなブログの目次のデザインをCSSで変更する方法

f:id:Suzushin:20170429140030j:plain

こんばんは、すずしんです。

はてなブログでは、目次を記事に表示することができるのですが…。
デフォルトのデザインだと、目次が何というか味気ないですね。

そこで、CSSを使って目次のデザインを変更してみることにしました。
もし、このデザインが気に入って頂ければ、ぜひコピペして利用してみてください。

目次の表示方法

記事に目次を表示するには、記事の表示したい場所に[:contents]と書きます。
表示したい場所の行頭に記述してくださいね。
文字や空白を入れてはいけませんので注意してください。
プレビューを見てみると、正しく書いてあれば目次が挿入されているはずです。

f:id:Suzushin:20170510174447j:plain

目次のデザインの変更方法

目次がどのようなタグ構成になっているかを、ソースコードを見て確認してみました。
すると、例えば以下のようになっていることが分かりました。

<ul class="table-of-contents">
    <li><a href="#開閉式ボックスとは">開閉式ボックスとは?</a></li>
    <li><a href="#アニメーション付き開閉式ボックスのサンプルプログラム">アニメーション付き開閉式ボックスのサンプルプログラム</a></li>
    <li><a href="#サンプルプログラムの実行例">サンプルプログラムの実行例</a></li>
    <li><a href="#ひとこと">ひとこと</a></li>
</ul>

なるほど。
table-of-contentsというクラスが付加されているulタグと、liタグで構成されているようですね。
この例では無いですが…。
中見出しや小見出しがある場合には、ulタグがさらに含まれるのだと思います。

ということは…。
このtable-of-contentsを目安にしながらCSSを適用してやれば、目次のデザインが変更できそうだという事が分かります。

「目次」の表記の追加

ところで、このデフォルトの目次。
「目次」という表記がありませんよね?
これってあった方が良いと思いませんか?

そこで、後述するCSSでは…。
この「目次」という表示がされるようにしたいと思います。

そのやり方というのは、分かってしまえば実は簡単なのです。
table-of-contentsのbefore疑似要素を参照して、そのcontentプロパティに「目次」と指定してやるだけです。

.table-of-contents:before {
  content: "目次";
}

目次のデザインのサンプル例

それでは、実際に目次のデザインをしていきたいと思います。
ここでは、目次を立体的に見せてみることにします。

以下のCSSのソースコードをコピーしてください。
そして、ダッシュボードから「デザイン」→「カスタマイズ」と進んでいきます。
「CSSデザイン」と書かれたテキストエリアの部分に、コピーしたコードを貼り付けてください。

.table-of-contents:before {
  content: "目次";
  font-size: 150%;
  font-weight: bold;
}
.table-of-contents {
  box-shadow: 5px 5px 10px;
  border: 1px solid #999999;
  background: #f0f0f0;
}

もしシンプルに影は要らないという場合には、box-shadowの記述を削除してください。

ちなみに、このデザイン例は白背景のテーマを使っている場合のデザインです。
黒背景のテーマを使っている場合には、このCSSをそのまま使うと目立ちすぎますので…。
適宜、backgroundプロパティやborderプロパティなどを調整してください。

ひとこと

記事の目次のデザインを変更するには…。
table-of-contentsクラスを参照して、CSSを適用すれば良いという事が分かりました。

今回の記事では、立体的な目次のデザイン例を紹介しましたが…。
デフォルトの目次のデザインと比べれば、いくらかはスタイリッシュになったのではないでしょうか?
気に入ってもらえたら嬉しいです。