【WordPresss】Luxeritasの目次デザインをカスタマイズ&デザインサンプル9パターン
当方が使用している無料で高性能なWordPressテーマ、Luxeritasの目次をカスタマイズする方法を紹介していきます。
デフォルトではかなりシンプルなデザインなのですが、子テーマのCSSを編集することで、サイトに合わせた好きなデザインにすることが可能です。
目次は最初に見る人も多い箇所なので、見やすい目次はユーザーにとっての利便性も上がります。
Luxeritasに関する記事はこちら
[WordPress] 無料でこのクオリティ?! 超高性能で驚くおすすめテーマ「Luxeritas(ルクセリタス )」
完成イメージ
このサイトの雰囲気に合わせて、かわいい感じになりました。
ちょっとかわいすぎでは…？と思った方も、色を変えていただくことでかなり雰囲気は変わるので、例えばこんな感じに使っていただけます。
参考：カスタマイズ前のイメージ
カスタマイズ前のデザインはこんな感じです。
カスタマイザーから色は変更できるのですが、これをよりサイトのイメージに合うようにしていきます。
カスタマイズ手順
子テーマのCSSにカスタマイズ用のCSSをペーストするだけです。
子テーマのCSSは、WordPressの管理画面→「Luxeritas」→「子テーマの編集」で編集できます。
カスタマイズ用CSS
私が使っているのと同じデザインです。
別パターンのデザインも、下に紹介しています。
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #ffb1d8; /* 枠線 */
border-radius: 3px;
}
.toc_title{ /* タイトル */
color: #ffb1d8; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
}
.toc_title:before{ /* タイトル前のアイコン */
font-family: "Font Awesome 5 Free";
content: "\f15b";
margin-right: 5px;
margin-left: 5px;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li, .toc_list li li, .toc_list li li li {
font-size: 14px;
padding: 5px 0;
}
.toc_list .toc_number {
display: none;
}
#toc_container > .toc_list { /* 見出し2 */
counter-reset: my-counter;
list-style: none;
margin-bottom: 0 !important;
padding: 0 0 0 30px;
}
#toc_container > .toc_list > li:before { /* 見出し2 */
background-color: #ffb1d8;/* 丸の色 */
border-radius: 50%;
content: counter(my-counter);/*連番を進める*/
counter-increment: my-counter;
color: #fff;/* 文字色 */
display: block;
float: left;
line-height: 1.8em;
margin-left: -30px;
text-align: center;
height: 1.8em;
width: 1.8em;
}
その他のデザインサンプル
色違いパターン
同じデザインでも、例えばこのような色の組み合わせならぐっと雰囲気が変わります。
あくまでイメージですが、バズ部さんやマナブさんのブログっぽい色味にしてみました（実物には目次はありません）。
/* 目次 */
div#toc_container{
background: #f9f9fb; /* 背景色 */
border: 1px solid #6a859c; /* 枠線 */
}
.toc_title{ /* タイトル */
color: #005aff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
}
.toc_title:before{ /* タイトル前のアイコン */
font-family: "Font Awesome 5 Free";
content: "\f15b";
margin-right: 5px;
margin-left: 5px;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li, .toc_list li li, .toc_list li li li {
font-size: 14px;
padding: 5px 0;
}
.toc_list .toc_number {
display: none;
}
#toc_container > .toc_list { /* 見出し2 */
counter-reset: my-counter;
list-style: none;
margin-bottom: 0 !important;
padding: 0 0 0 30px;
}
#toc_container > .toc_list > li:before { /* 見出し2 */
background-color: #668ad8;/* 丸の色 */
border-radius: 50%;
content: counter(my-counter);/*連番を進める*/
counter-increment: my-counter;
color: #fff;/* 文字色 */
display: block;
float: left;
line-height: 1.8em;
margin-left: -30px;
text-align: center;
height: 1.8em;
width: 1.8em;
}
色違いパターン2
ほっこりかわいいブラウン系。
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #72483f; /* 枠線 */
border-radius: 3px;
}
.toc_title{ /* タイトル */
color: #72483f; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
}
.toc_title:before{ /* タイトル前のアイコン */
font-family: "Font Awesome 5 Free";
content: "\f15b";
margin-right: 5px;
margin-left: 5px;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li, .toc_list li li, .toc_list li li li {
font-size: 14px;
padding: 5px 0;
}
.toc_list .toc_number {
display: none;
}
#toc_container > .toc_list { /* 見出し2 */
counter-reset: my-counter;
list-style: none;
margin-bottom: 0 !important;
padding: 0 0 0 30px;
}
#toc_container > .toc_list > li:before { /* 見出し2 */
background-color: #d5a692;/* 丸の色 */
border-radius: 50%;
content: counter(my-counter);/*連番を進める*/
counter-increment: my-counter;
color: #fff;/* 文字色 */
display: block;
float: left;
line-height: 1.8em;
margin-left: -30px;
text-align: center;
height: 1.8em;
width: 1.8em;
}
シンプルで落ち着いた感じに
シンプルで落ち着いたデザインで、どんなジャンルのブログにも使っていただけると思います。
色を変えればポップな感じにもできそうです。
/* 目次 */
div#toc_container{
background: #fff; /* 背景色 */
border: 2px solid #8491c3; /* 枠線 */
border-radius: 3px;
}
.toc_title {
background-color: #8491c3;
padding: 3px;
color: #fff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
border-radius: 3px;
}
.toc_title:before{ /* タイトル前のアイコン */
font-family: "Font Awesome 5 Free";
content: "\f15b";
margin-right: 5px;
margin-left: 5px;
}
.toc_list li {
padding: 3px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px #57697f; /* 点線 */
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #8491c3;
}
.toc_list li:last-of-type {
border-bottom: none;
}
/* show/hideボタンを非表示に */
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}色違いパターン
くすみカラーがおしゃれ。
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #989597; /* 枠線 */
border-radius: 3px;
}
.toc_title {
background-color: #989597;
padding: 3px;
color: #fff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
border-radius: 3px;
}
.toc_title:before{ /* タイトル前のアイコン */
font-family: "Font Awesome 5 Free";
content: "\f15b";
margin-right: 5px;
margin-left: 5px;
}
.toc_list li {
padding: 3px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px #57697f; /* 点線 */
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #a2b5bf;/* アイコンの色 */
}
.toc_list li:last-of-type {
border-bottom: none;
}
/* show/hideボタンを非表示に */
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}
色違いパターン2
ポップな感じ。
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #f796b8; /* 枠線 */
border-radius: 3px;
}
.toc_title {
background-color: #f796b8;
padding: 3px;
color: #fff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
border-radius: 3px;
}
.toc_title:before{ /* タイトル前のアイコン */
font-family: "Font Awesome 5 Free";
content: "\f15b";
margin-right: 5px;
margin-left: 5px;
}
.toc_list li {
padding: 3px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px #57697f; /* 点線 */
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #82c2e4;/* アイコンの色 */
}
.toc_list li:last-of-type {
border-bottom: none;
}
/* show/hideボタンを非表示に */
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}
ちなみに、このデザインのように目次の「show/hide」のボタンを非表示にしたい時は以下のコードでできます。
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}ポップな感じ
SANGOやJIN風にありそう（ないんだけれども）な感じのデザインにしました。
トップのボーダーを太くしたのと、丸い矢印アイコンがポイントです。
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #ffb36b; /* 枠線 */
border-radius: 3px;
border-top: 10px solid #ffb36b;
}
.toc_title{ /* タイトル */
color: #fff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
background: #ffb36b;
padding: 7px 10px;
border-radius: 5px;
}
.toc_title:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #ffb36b;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li {
padding: 2px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #ffb36b;
}
.toc_list li:last-of-type {
border-bottom: none;
}
.toc_list .toc_number {
display: none;
}
/* show/hideボタンを非表示に */
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}
色違いバージョン
アースカラー風
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #72796c; /* 枠線 */
border-radius: 3px;
border-top: 10px solid #72796c;
}
.toc_title{ /* タイトル */
color: #fff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
background: #98af97;
padding: 7px 10px;
border-radius: 5px;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li {
padding: 2px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #ddc998;
}
.toc_list li:last-of-type {
border-bottom: none;
}
.toc_list .toc_number {
display: none;
}
/* show/hideボタンを非表示に */
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}
色違いバージョン2
/* 目次 */
div#toc_container{
background: #fffef6; /* 背景色 */
border: 2px solid #c5df9c; /* 枠線 */
border-radius: 3px;
border-top: 10px solid #c5df9c;
}
.toc_title{ /* タイトル */
color: #fff; /* 文字色 */
font-size: 1.8em; /* 大きさ */
font-family: WebLTGothicFont; /* フォント */
background: #ffb36b;
padding: 7px 10px;
border-radius: 5px;
}
.toc_list ul {
list-style: none;
padding-left: 5px;
}
.toc_list li {
padding: 2px;
list-style: none;
position: relative;
}
.toc_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
list-style-type: none!important;
}
.toc_list li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #e7e743;
}
.toc_list li:last-of-type {
border-bottom: none;
}
.toc_list .toc_number {
display: none;
}
/* show/hideボタンを非表示に */
.toc_toggle {
display: none;
}
.toc_number{
display: none;
}
まとめ：Luxeritasの目次デザインはCSSで変更できる！
以上！
Luxeritasの目次カスタマイズ方法でした。
今後もデザインのバリエーションが増えたら追加していきます。
最後におまけですが、クリスマスもだんだん近くなってきたので、よろしければこちらの記事も読んでみてください。