Random Life Blog

日々のあれこれ

はてなブログで「目次」をカスタマイズ。目次に「目次」と表記する方法

スポンサーリンク

目次をカスタマイズする方法

目次をカスタマイズする方法

みなさん、こんばんは。

私のブログで使っている「テーマ」では目次に「目次」と表記されません。

何を言っているのか分からない人が多いと思いますが、とにかく目次に「目次」と表記されないのです。

今日は目次に「目次」の表記を入れるカスタマイズをしていきたいと思います。

目次とは

 目次についてはこちらの記事をご覧ください。

randamlife.hatenablog.com

目次に「目次」という表記を入れる

目次に「目次」と表記を入れる。

具体的にはスクリーンショットでみていきましょう。

 

これがカスタマイズ前

f:id:samada:20190511194148p:plain

見出しの項目だけがならんでいますね。

これがカスタマイズ後

f:id:samada:20190511194231p:plain

カスタマイズ後には「目次」という表記が入りました。

これをどうやったのかを説明します。

 

 

こちらのブログを参考にさせていただきました。

mshitech.hatenablog.com

 

流れとしては

f:id:samada:20190508201917p:plain

設定画面の左メニューの【デザイン】をクリック。

 

f:id:samada:20190508201625p:plain

パナマークの【カスタマイズ】をクリック。

 

f:id:samada:20190508201649p:plain

一番下にある【デザインCSS】の欄にコードを入力。

 

【変更を保存する】で終了です。

 

貼り付けるコードは以下↓

 

 

 /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */

 

content: "目次"; の部分は表記される文字になります。

ここを「目次」ではなくひらがなで「もくじ」や英語で「INDEX」や「Contents」という風に変更もできます。

これで目次の上部に「目次」と表記できました。

 

背景色を変える

せっかくなので背景色くらいは変えてみましょうか。

上の手順と同様にして【デザインCSS】に以下のコードを貼り付けます。

 

.entry-content .table-of-contents {
background: #f8f8f8 ; /* 目次の背景色 */
}

 background: #f8f8f8 ; の部分が色を表すコードです。

#以下の文字列によって色を変えることができます。

WEB色見本 原色大辞典 - HTMLカラーコード

以上のサイトで好きな色のコードを探してみてください。

 

コードを貼り付けて

【変更を保存する】をクリックすれば終わりです。 

 

これで背景色もつけることができました。

f:id:samada:20190511194808p:plain

 

目次のカスタマイズまとめ

私は「目次」という文字を入れたかっただけなので簡単にカスタマイズできました。

もっとカスタマイズしたい方は上記のブログを参考にカスタマイズしてみてください。

 

randamlife.hatenablog.com