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

ルクセリタスのウィジェット機能に「目次」があります。

ページトップに目次を表示させますがページ下にスクロールしていった場合に
サイドバーに目次があると見たい項目にすぐ移動することができるので
ユーザーにとってはあると便利な機能ですよね。

特に追従スクロールのウィジェットに設定するのがおススメです。
【ウィジェット機能】スクロール追従サイドバーを活用｜WordPress【ルクセリタス】

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

Contents - 目次 -

1. ウィジェット機能で目次を挿入する
2. 目次デザインをカスタマイズ
- 2.1. 画像がずれて表示される！
- 2.2. サイドバーのカスタマイズ項目
3. リストカスタマイズの注意点

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

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

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

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

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

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

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

#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カスタマイズと重複して記述することで表示が崩れてしまうケースが考えられます。

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

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

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

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

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

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

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

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

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

/*サイドバー目次の背景色修正*/
#side ul.toc_list{
background:#f0e68c;
}

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

#side ul.toc_list{

background:#f0e68c;

}

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

記事内に表示するリストに関してはこちらを参考にお願いします。
番号なしリスト – ul 要素 -の CSSカスタマイズ注意点

2022-11-05外観 & CSSカスタマイズCSS&HTML,desing,Luxeritas,ウィジェット

Posted by 45