<>

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

wordpress テーマ  ルクセリタス の目次ですが、デフォルトでは
見出しごとに ナンバーリングされるスタイルです。

例えば、この図のように 見出し4まで 表示したい場合などは 1.1.1. と数字で表示されます。

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

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

目次の基本設定について

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

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

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

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

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

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

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

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

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

注意

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

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

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

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

目次の カスタマイズ

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

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

  1. 目次の 外観のカスタマイズ
  2. 数字部分の 表示変更
  3.  サイドウィジェットの 目次カスタマイズ
  4. その他の カスタマイズ

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

まずは、メインの 外観のデザインと リストの 文字設定から

リストの背景を白抜きに

今回の カスタマイズでは、記事内で使用する リストの CSSと組み合わせています。

これで 目次画面を 白抜きにしています。

目次の数字部分を CSSカスタマイズ

次に、目次の数字を変更する CSSです。
見出し2には数字を 3・4には FontAwesome のアイコンを使用します。

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

目次に合いそうな FontAwesome

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

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


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

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

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

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

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

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

サイドウィジェット –  目次カスタマイズ

サイドバーに目次を設定した場合の CSSカスタマイズです。
こちらは コンテンツ内の CSS と連動していますので
.toc_number{ display: none; } と設定している前提の CSSコードになります。

サイドバーで目次を表示させる場合は、ウィジェットの設定画面で
表示させたい場所に目次の ウィジェットを設定してください。

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

その他の カスタマイズ

最後に そのほかの 詳細な カスタマイズをご紹介します。

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

開閉ボタンの非表示

開閉ボタンが不要な場合、こちらを追記します。


ルクセリタス または wordpress のバージョンによって、表示が崩れてしまうケースもあります。

指定したサイズが合わなかったり、 ほかで指定したCSSカスタマイズと重複して記述しているケースがあったり
バージョンによって 使える機能が変わってきますので、どれが原因かは特定しかねますが
今回、子テーマ luxech- 3.0.0 / 3.0.3 ・親テーマ Luxeritas 3.9.0 より以前のバージョンでもチェックしてみたところ 特に問題なく表示できましたので
もし、上手く表示されない場合はので 同じ項目のカスタマイズをチェックしてみてください。

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