目次デザインをカスタマイズしてみる｜ルクセリタス
Webページに目次を入れるという設定は外観カスタマイズから簡単に設定できます。
目次には h2からどの階層までを目次に使用するか自由に設定できるのですが
このすべての階層で数字を使って表示されるよう設定されています。
例えば 目次にする階層を h4まで指定する場合、1.1.1.1 となってしまうのです。
このh3以降の階層には数字はいらないんじゃないかな？
ということで h3 以降の階層を記号やアイコンで表示するのと合わせて
目次のデザインを カスタマイズしてみます。
目次をCSSカスタマイズ
目次のカスタマイズで注意して頂きたいのは
外観カスタマイズの目次項目での指定と重複させないということです。
外観カスタマイズでの基本的な目次設定はこちら
外観カスタマイズから基本的な目次の設定｜ルクセリタス
バージョンによってCSSが正常に表示されない場合がありますが
2022年現在、こちらのバージョンでCSSカスタマイズの有効性を確認しました。
Wordpress バージョン 5.9.3 Luxeritas バージョン: 3.16.0
サイドバーで目次を表示させる方法についてはこちらでまとめています。
サイドバーで目次を表示させる方法とカスタマイズ｜ルクセリタス
コンテンツ内の目次 – 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 |
/*目次デザイン*/ /* Table of Contents */ #toc_container, .toc_widget{ max-width:
100%; font-size:
14px; } /*目次の枠とタイトル*/ #toc_container{ display:
table; margin-bottom:
10px; padding:
10px; font-weight:bold; color:
#fff; background:#a4d5bd; } /*目次の文字色*/ #toc_container a{ color:
#333; }
/*見出し３ - Font */
.toc_list li li a{ font-size:14px; font-weight:normal; }
/*見出し４ - Font */
.toc_list li li li a { font-size:13px; }
/*リストの行間*/
.toc_list li {
line-height:1;
padding-top:
15px; } |
目次の数字部分を CSSカスタマイズ
次に、目次の数字部分とリストの背景を白に変更していきます。
見出し２には数字を ３・４には FontAwesome のアイコンを使用します。
|
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 |
/*目次の番号表示変更*/ .toc_number{display:
none; } /*見出し２の設定*/ #toc_container > .toc_list { counter-reset:
my-counter; list-style:
none; margin-bottom:
0
!important; padding:
0
35px
10px
35px; background:
#fff;
/*リストを白抜きに*/ } /*見出し２に数字*/ #toc_container > .toc_list > li:before { content:
counter(my-counter); counter-increment:
my-counter; color:
#57697f; display:
block; float:
left; margin-left:
-30px; text-align:
center; width:
30px; } /*見出し3 4 の設定*/ .toc_list li li:before { font-family:
FontAwesome; content:
"\f105"; color:
#a4d5bd; font-weight:900; margin-right:5px; } /*見出し３ ４ - 位置調整*/
.toc_list li li {
margin-left:-30px;
line-height:
1; }
.toc_list li li li {
margin-left:-10px;
padding-top:
15px; line-height:
1; } |
リストマークに使用する FontAwesome アイコン
目次だけでなく、リストマークや 見出しのアイコンなど様々な場面で使える FontAwesome アイコン
Font Awesomeのサイトから好みのアイコンを探してみてください！
無料で使えるFont Awesome アイコンの基本的な使いかた｜WordPress
カスタマイズできない場合の Check Point !!
アイコンやリストの表示でカスタマイズCSSが間違っているなどをチェックします。
FontAwesome のアイコンが表示できない
コードを記述したけれど Font Awesome のアイコンが表示できない。という場合があります。
① FontAwesome の表記のしかた
font-family: FontAwesome の部分で “FontAwesome" や “Font Awesome 5 Free” などと表記するケースがあります。
FontAwesome で 正しく表記されない場合は これらの表記で試してみてください。
② ルクセリタスでの アイコンフォントの設定です。
ルクセリタスのカスタマイズ画面で FontAwesome の設定画面があります。
こちらの バージョンがあってない場合がありますので 設定を変えてみてください。
使用できるアイコンのバージョンはFont Awesomeのアイコン検索画面で確認することができます。
③ FontAwesome のプラグインをインストールしていない場合、アイコンを使用できないというケースがあります。
FontAwesomeプラグインを検索してみてください！
Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) ｜無料で使えるアイコンの登録と設定【 WordPress 】
他のリスト表示に影響が出てしまう！？
このリストのカスタマイズによってほかのリストに影響が出てしまうケースがあります。
リストのカスタマイズで使用するコードを変更することで改善されます。
番号なしリスト – ul 要素 -の CSSカスタマイズ注意点