追記
[開く（閉じる）]を使用しているサイトでは、閉じた際に巨大アイコンがはみ出てしまうため、コードを一部修正しました。 カスタマイズは自己責任でやろう！
「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら
この記事では 目次のデザインをカスタマイズした方法を説明。
CUSTOM POINT
ちょうどいい感じで行送りになるようにしました。余白調整も行いました。右下のアイコンはお好きなものに変更できます。目次のプラグインTOC+の設定はこちらを参考にしてください。
【SANGOを自分でカスタマイズ】「もくじ」にオリジナル感を出してみるこんな感じで変更
Before
After
このサイトの環境
テーマ 
子テーマ 
プラグイン 
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
ジャンプマップ
カスタマイズの準備
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
はじめてカスタマイズをする方におすすめなのは追加CSSです。
カスタマイズコードの追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /*-------------------------------------- 目次 変更 --------------------------------------*/ #toc_container {/*目次全体*/ margin: 0 0 2em 0;/*外側の余白設定*/ padding: 0;/*内側の余白を0に*/ border-color: #4242428a!important;/*枠線の色*/ border: solid 2px;/*枠線の種類と幅*/ border-top: none;/*上線削除*/ border-radius: 3px;/*角をちょっとだけ丸く*/ background: #4242420d;/*背景色*/ box-shadow: none;/*影を削除*/ } div#toc_container .toc_list:after {/*右下のアイコン*/ content: "\f212";/*アイコンの書類*/ position: absolute;/*自由に羽ばたけるように*/ font-family: FontAwesome; bottom: -20px;/*下方向の位置調整*/ right: 5%;/*右方向の位置調整*/ font-size: 5em;/*アイコンの大きさ*/ opacity: 0.1;/*透明度*/ } #toc_container .toc_title {/*目次のタイトル*/ display: block;/*段落に*/ margin: 0;/*外側の余白を削除*/ padding: 0;/*内側の余白を削除*/ font-size: 18px;/*文字の大きさ*/ line-height: 42px;/*行の高さ*/ font-weight: bold;/*太文字*/ background: #4242428a;/*背景色*/ text-align: center;/*中央揃え*/ color: white!important;/*文字の色*/ } #toc_container .toc_title:before {/*タイトル前のアイコン*/ display: none;/*消し消し*/ } #toc_container .toc_list {/*目次のコンテンツ*/ margin: 0;/*外側の余白削除*/ color: #424242de;/*文字の色*/ padding: 1em 6% 1em 10%;/*内側の余白調整*/ position: relative;/*基準に設定*/ } #toc_container .toc_list li a {/*アンカーリンクの設定*/ color: #424242b3;/*文字色*/ display: block;/*横いっぱいまでリンクにする*/ } #toc_container .toc_list li a:hover {/*マウスホバーしたとき*/ text-decoration: none;/*下線を表示しない*/ opacity: .5;/*うっすら透明に*/ } #toc_container ul {/*箇条書き*/ list-style-type: decimal;/*番号に変更*/ color: #424242b3!important;/*文字の色*/ } @media only screen and (min-width: 481px){/*PC表示*/ #toc_container { padding: 0;/*内側の余白を削除*/ }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /*-------------------------------------- 目次 変更 --------------------------------------*/ #toc_container { margin: 0 0 2em 0; padding: 0; border-color: #4242428a!important; border: solid 2px; border-top: none; border-radius: 3px; background: #4242420d; box-shadow: none; } div#toc_container .toc_list:after { content: "\f212"; position: absolute; font-family: FontAwesome; bottom: -20px; right: 5%; font-size: 5em; opacity: 0.1; } #toc_container .toc_title { display: block; margin: 0; padding: 0; font-size: 18px; line-height: 42px; font-weight: bold; background: #4242428a; text-align: center; color: white!important; } #toc_container .toc_title:before { display: none; } #toc_container .toc_list { margin: 0; color: #424242de; padding: 1em 6% 1em 10%; position: relative; } #toc_container .toc_list li a { color: #424242b3; display: block; } #toc_container .toc_list li a:hover { text-decoration: none; opacity: .5; } #toc_container ul { list-style-type: decimal; color: #424242b3!important; } @media only screen and (min-width: 481px){ #toc_container { padding: 0; }} |
確認の手順
- カスタマイズコードを保存
- カスタマイズしたページを開く
- cntrl+F5を押す
いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。
まとめ
手順をザクッと説明
変更手順
- 目次（TOC）の設定
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
可愛くて見やすい目次ができたよ！
右下のアイコン、、、、ええやん
コメント( ˶ˆ꒳ˆ˵ )