目次デザインをカスタマイズしてみる｜ルクセリタス

Webページに目次を入れるという設定は外観カスタマイズから簡単に設定できます。

目次には h2からどの階層までを目次に使用するか自由に設定できるのですが
このすべての階層で数字を使って表示されるよう設定されています。

例えば目次にする階層を h4まで指定する場合、1.1.1.1 となってしまうのです。

このh3以降の階層には数字はいらないんじゃないかな？
ということで h3 以降の階層を記号やアイコンで表示するのと合わせて
目次のデザインをカスタマイズしてみます。

Contents - 目次 -

1. 目次をCSSカスタマイズ
- 1.1. コンテンツ内の目次 – CSSカスタマイズ
- 1.2. 目次の数字部分を CSSカスタマイズ
2. リストマークに使用する FontAwesome アイコン
3. カスタマイズできない場合の Check Point　!!
- 3.1. FontAwesome のアイコンが表示できない
- 3.2. 他のリスト表示に影響が出てしまう！？

目次をCSSカスタマイズ

目次のカスタマイズで注意して頂きたいのは
外観カスタマイズの目次項目での指定と重複させないということです。

外観カスタマイズでの基本的な目次設定はこちら
外観カスタマイズから基本的な目次の設定｜ルクセリタス

バージョンによってCSSが正常に表示されない場合がありますが
2022年現在、こちらのバージョンでCSSカスタマイズの有効性を確認しました。

WordPress バージョン 5.7.6 Luxeritas バージョン: 3.9.0
Wordpress バージョン 5.9.3 Luxeritas バージョン: 3.16.0

サイドバーで目次を表示させる方法についてはこちらでまとめています。
サイドバーで目次を表示させる方法とカスタマイズ｜ルクセリタス

コンテンツ内の目次 – CSSカスタマイズ

まずは、メインの外観デザインとリストの文字設定をカスタマイズしていきます。

/*目次デザイン*/
/* 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;
  }

/*目次デザイン*/

/* 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 のアイコンを使用します。

/*目次の番号表示変更*/
.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;
}

/*目次の番号表示変更*/

.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カスタマイズ注意点

2022-09-05外観 & CSSカスタマイズCSS&HTML,desing,Luxeritas

Posted by 45