追記
[開く（閉じる）]を使用しているサイトでは、閉じた際に巨大アイコンがはみ出てしまうため、コードを一部修正しました。 カスタマイズは自己責任で！
ワードプレステーマ
子テーマ
この記事では
目次のデザインをカスタマイズした方法を説明。
CUSTOM POINT
ちょうどいい感じで行送りになるようにしました。余白調整も行いました。右下のアイコンはお好きなものに変更できます。目次のプラグインTOC+の設定はこちらを参考にしてください。
【SANGOを自分でカスタマイズ】「もくじ」にオリジナル感を出してみる
こんな感じで変更
Before
After
このサイトの環境
テーマ
子テーマ
プラグイン
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
見たい場所へジャンプ
カスタマイズの準備
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加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; }} |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
まとめ
手順をザクッと説明
変更手順
- 目次（TOC）の設定
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
可愛くて見やすい目次ができたよ！
右下のアイコン、、、、ええやん