<>

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

WordPress

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

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

バージョン情報

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

注意

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

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

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

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

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

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

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

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

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

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

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

次に、目次の数字部分とリストの背景を白に変更していきます。


見出し2には数字を 3・4には FontAwesome のアイコンを使用します。

開閉ボタンの非表示

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

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

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

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

チェックサークル  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 と連動していますので
.toc_number{ display: none; } と設定している前提の CSSコードになります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

背景色/枠線色

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

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

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

カラム操作

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

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

その他の カスタマイズ

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

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

番号なしのリスト

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


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

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

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