シンプリシティ２おすすめカスタマイズ⑥「目次をカスタム」

酒屋ブロガーカズユキです

今回も

Simplicity（シンプリシティ）２

カスタマイズについて

引き続き書いていこうと思います。

前回までの予告編として、CSSコードを使っての

カスタマイズがメインだとお伝えしています。

「ダッシュボード」より

「外観」⇒「テーマの編集」へ進むと

「スタイルシート」の画面が表示されます。

要はここに、どんどん、気に入ったコードを

コピペして貼り付けていくという作業だけなので

誰でも簡単に出来ますのでご安心を。

では早速、貼り付けていってみましょう。

1 シンプリシティ2＊目次のおすすめカスタマイズ
2 シンプリシティ2おすすめカスタマイズ「目次」まとめ
- 2.1 お問い合わせ＆メルマガ

シンプリシティ2＊目次のおすすめカスタマイズ

では今回は「目次」をおしゃれに

変更してみたいと思います。

＜完成イメージ＞

「Table of Contents Plus」

まず必要になってくるのが

「Table of Contents Plus」

という、WordPressプラグインです。

WordPressのダッシュボード画面から

「プラグイン」→「新規追加」と進んで、

「Table of Contents Plus」を検索します。

インストール出来ましたら「有効化」して完了です。

Table of Contents Plus の設定

続けて「Table of Contents Plus」の設定をします。

ダッシュボード画面から「設定」→「TOC+」で

設定画面に移って下さい。

ほとんどデフォルトで大丈夫かも知れませんが、

上記の「表示条件」で、見出しが幾つ以上あれば

目次が生成されるかを決めれますので、

お好みの数字に変えても良いかと思います。

※個人的に、よく聞くのは２か３と思ってます。

また、デフォルトでは、その下の「post」に

チェックが入っているかと思います。

「post」とは投稿した記事のことで、

投稿した記事に目次が生成されるという意味です。

因みにその下の「page」が固定ページの事なので

必要であれば、チェック入れておいても大丈夫です。

他のチェックは外したままで大丈夫かと思います。

見出しの設定

では次に「上級者向け」の項目を設定します。

「TOC＋」設定画面の下部にボタンがあるので、

クリックして開いて下さい。

開きましたら次の項目にチェックを入れます。

「CSSファイルを除外」は必ずチェックします。

スタイルシートを使って

「Table of Contents Plus」を

カスタマイズする場合、

ここのチェックが外れたままだと

目次が崩れて表示されてしまいます。

次の「見出しレベル」は、

目次に表示させたい見出しの種類を選ぶ項目です。

表示される数があまり多くてもややこしいので、

通常はh2、h3にチェックの場合が多いです。

コードを貼り付ける

あとは下記コードをスタイルシートに

貼り付ければ、カスタマイズ完了です。

/* TOC もくじのカスタマイズ */
#toc_container{
margin-top:25px;
margin-bottom:35px;
border-radius: 4px;
font-size: 16px; /* 文字の大きさ */
padding-right: 16px;
padding-left: 16px;
background-color: #FFFBF4; /* 背景色 */
border: 2px solid #F89174; /* 外枠の設定 */
}

#toc_container .toc_title{
font-size: 18px; /* タイトルの文字の大きさ */
font-weight:bold;
color: #F89174; /* タイトルの文字色 */
text-align: left;
}

/* タイトル前のアイコン　FontAwesomeの設定 */
#toc_container .toc_title:before{
content: “\f046”; /* FontAwesomeのコード */
font-family: FontAwesome;
padding-right: 6px;
font-size:18px; /* アイコンの大きさ */
color: #F89174;
}

#toc_container .toc_toggle a{
color: #F89174;
}

#toc_container ul{
counter-reset:number;
list-style:none;
}

#toc_container ul li{
line-height: 1.25em;
margin-bottom: 0.9em;
margin-top:10px;
}

#toc_container ul li:before{
counter-increment: number;
content: counter(number);
font-weight: bold;
color: #555555;
padding-right:12px;
margin-left:-25px;
}

#toc_container ul li a{
font-weight: bold;
color: #555555;
text-decoration:none;
}
#toc_container ul li a:hover{
text-decoration:underline
}

#toc_container ul ul{
margin-top: 0.5em;
}

#toc_container ul ul li{
line-height: 1.25em;
margin-bottom: 0.5em;
font-size:14px;
margin-left:-50px;
}

#toc_container ul ul li:before{
content: “\f0da”;
font-family: FontAwesome;
padding-right: 6px;
margin-left:0px;
color: #CCC;
margin-left:-10px;
}

#toc_container ul ul li a{
color: #3D3D3D;
font-weight: normal;
padding-right:6px;
text-decoration:none
}

#toc_container ul ul li a:hover{
text-decoration:underline
}