<>

サイドバーで目次を表示させる方法とカスタマイズ|ルクセリタス

目次のウィジェットを使ってサイドバーに簡単に目次を表示させることができますが
この目次をCSSでカスタマイズし、サイトのイメージに合うようにしてみます。

ウィジェット機能で目次を挿入する

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

利用するウィジェットから ”目次” を選択し どの場所に設置するかを選択します。

目次デザインをカスタマイズ

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

こちらは コンテンツ内の 目次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

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

削除するのは [display: block;][ float: left; ][ text-align: center;] の3箇所です。

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

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

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

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

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

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

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

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

リストカスタマイズの注意点

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

サイドバーの目次に関してはこちらのコードで修正できると思いますので試してみてください。

記事内に表示するリストに関してはこちらを参考にお願いします。

番号なしリスト – ul 要素 -の CSSカスタマイズ注意点