CSSで目次をカスタマイズしてみる – WordPress【 Luxeritas 】ルクセリタス

WordPress

分かりやすいといえばとても分かりやすいのですが、
個人的にもっとシンプルにしてみたいと思ったので、ちょっとカスタマイズしてみたいと思います。

また、初心者の方向けに基本的な目次の設定方法から分かりやすく解説していきます。

バージョン情報

バージョンによってCSSが正常に表示されない場合があります。

2022年現在、こちらのバージョンでCSSカスタマイズの有効性を確認しました。

WordPress バージョン 5.7.6 Luxeritas バージョン: 3.9.0

WordPress バージョン 5.9.3 Luxeritas バージョン: 3.16.0

contents - 目次 -

1. 外観カスタマイズから設定できる目次
- 1.1. 記事ごとの目次の表示設定
2. コンテンツ内の目次カスタマイズ
3. サイドバーの目次カスタマイズ
- 3.1. 画像がずれて表示される！
- 3.2. サイドバーのカスタマイズ
4. その他のカスタマイズ
- 4.1. リンクのカスタマイズ – 色とアンダーラインを消す
- 4.2. 番号なしのリスト

外観カスタマイズから設定できる目次

投稿記事に目次を表示させるかどうか　または　表示させる際の設定を外観カスタマイズから行います。
外観カスタマイズで設定できる項目はこちら

➊ 開閉設定開始時に開いた状態にするか、手動で開いていただくか設定

❷ 目次のタイトルと開・閉のボタンの名前を設定

❸ 文字幅に合わせて目次枠を変動（自動）か、固定の設定

➍ ➎ で設定した見出し２の数を満たした場合、目次が自動で挿入される設定

➎ 記事内の見出し２の数で目次の表示を設定

➏ 固定ページで目次を表示したくない場合など、目次を設定できます。

➐ 目次に表示させる見出しの階層を設定

そのほか、目次の開始状態・タイトル名の設定・カラー設定などがあります。

注意

CSSでカスタマイズをしていく場合、カラー設定は
重複する項目ですのでどちらか一方に記述するようにします。

記事ごとの目次の表示設定

投稿作成画面に目次の非表示というボックスがあります。
例えば、H２タイトル３タイトルから目次の設定をしていたとしても記事によって非表示にすることができます。

これを使えることで、基本設定の ➎ ➏ ➐ の設定の基準も変わってきますね。

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

今回はコンテンツ内の目次とサイドウィジェットに表示する目次を
こんなイメージの目次にカスタマイズしていきます。

主に4つの項目が CSSカスタマイズのポイントになります。

目次の外観デザイン
数字部分の表示変更
サイドウィジェットの目次カスタマイズ
その他のカスタマイズ

コンテンツ内の目次 – 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;

}

目次の数字部分を 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_toggle {

display: none;

}

リストマークに合いそうな FontAwesome

応用で見出し２に FontAwesome を使うこともできます。

参考までに、目次に FontAwesome のアイコンをいくつかあげてみました。

チェックサークル f056
ディアスポラ f791
ハート f004
シェブロン-サークル-右 f138
スクエア f0c8
スター f005
ストップサークル f28d
バンドキャンプ f2d5

FontAwesome がうまく表示されない場合の Check Point　!!

１．FontAwesome の表記のしかた
font-family: FontAwesome の部分で“FontAwesome"や “Font Awesome 5 Free” などと表記するケースがあります。

FontAwesome で正しく表記されない場合は別の表記で試してみてください。

2. ルクセリタスでのアイコンフォントの設定

ルクセリタスのカスタマイズ画面で FontAwesome の設定画面があります。
こちらのバージョンがあってない場合がありますので、設定を変えてみてください。

３．FontAwesome のプラグインをインストールしていない方
プラグインから FontAwesomeを検索しインストールすると使用できるようになります。

サイドバーの目次カスタマイズ

サイドバーで目次を表示させる場合は、外観→ ウィジェットからサイドバーに目次を追加します。

左がデフォルトの状態です。

こちらはコンテンツ内の CSS と連動していますので
.toc_number{ display: none; } と設定している前提の CSSコードになります。

/* サイドバー・ウィジェットの目次*/

/*目次 - 背景と余白*/

#side .toc_widget > .toc_list {

counter-reset: my-counter;

list-style: none;

margin-bottom: 0 !important;

padding: 0 10px 10px 30px;

background:#f0e68c;

padding:1px 10px;

}

/*目次の文字色*/

.toc_list a{color: #696;

}

/* 見出し２に数字を指定 */

#side .toc_widget >.toc_list > li:before {

content: counter(my-counter);

counter-increment: my-counter;

display: block;

float: left;

text-align: center;

width: 30px;

color:#696;

}

/*サイドバー目次 -見出し２- 文字設定*/

#side .toc_list li {

font-size: 1em;

font-weight: bold;

}

#side .toc_list li li {

margin-left:10px;

line-height: 1.5;

}

/*サイドバー目次 - 見出し３４ */

#side ul.toc_list li li:before {

color:#000;

content:'・';

}

#side ul.toc_list li li li:before {

color: #696;

content: '■';

font-size:0.8em;

margin-left:1.5em;

}

ここでは見出し３４のマークをアイコンではなく記号を使用しました。
記号は +　-　＊など、" " で囲むことで表記させることができます。

画像がずれて表示される！

WordPressとルクセリタスのバージョンによって画像が崩れる場合があります。

今回、３パターンで試してみましたが画像が崩れてしまったのは ② のパターンでした。

① WordPress バージョン 5.7.6 Luxeritas バージョン: 3.9.0

② WordPress バージョン 5.7.6 Luxeritas バージョン: 3.16.0

③ WordPress バージョン 5.9.3 Luxeritas バージョン: 3.16.0

この改善方法としては以下のコードを削除することで正常に表示することができました。

削除するコードは３つです。

display: block;
float: left;
text-align: center;

今回使用したルクセリタスのバージョンも最新ではないので他のバージョンでの不具合までは分かりませんが、
リスト・余白などほかで指定したCSSカスタマイズと重複して記述することで表示が崩れてしまうケースが考えられます。

上手く表示されない場合は同じ項目のカスタマイズをチェックしてみてください。

サイドバーのカスタマイズ

サイドバーのカスタマイズは外観カスタマイズのいくつかの項目に分かれています。

背景色/枠線色

サイドバーの背景色を指定します。

コンテンツ領域とサイドバー

コンテンツ（サイドバー）に枠線で囲む・角に丸みを付けるなどしていできます。

カラム操作

サイドバーのコンテンツを分離・結合して表示するのはカラム操作から指定できます。

これで先ほどのサイドバーでの目次が完成しました！

その他のカスタマイズ

最後にそのほかの関連するカスタマイズをご紹介します。

リンクのカスタマイズ – 色とアンダーラインを消す

/*リンク色とアンダーライン*/ /*コンテンツ内*/

#toc_container a:hover {

color:#6969;

text-decoration:none;

}

/*サイドウィジェット*/

#side .widget a:hover {

color:#6969;

text-decoration:none;

}

番号なしのリスト

記事内に表示する 番号なしのリスト ul を使ったCSSをカスタマイズする際に
目次で使用するCSSと連動してしまうため、スタイルが崩れてしまいます。

リストに背景を付けただけのイメージですが、先ほど背景色に白を使ったため
このように別の色で表示させるためには追加でCSSを指定します。

/*番号なしリストの背景色設定*/

.post ul{

background:#f1f1;

}

/*目次の背景色修正*/

.toc_list ul {

background:#fff;

}

/*サイドバー目次の背景色修正*/

#side ul.toc_list{

background:#f0e68c;

}

番号なしのリストではほかに文字に関する指定はできますが inline-block の指定をするとまた目次の画面が崩れてしまいますのでご注意ください。

以上、WordPress【 Luxeritas 】ルクセリタス – 目次のカスタマイズでした。

2022-04-14外観 & CSSカスタマイズdesing,Font Awesome,Luxeritas

Posted by 45

外観カスタマイズ から設定できる目次