【WordPresss】Luxeritasの目次デザインをカスタマイズ&デザインサンプル9パターン

2021年5月16日

Luxeritas目次カスタマイズ

当方が使用している無料で高性能なWordPressテーマ、Luxeritasの目次をカスタマイズする方法を紹介していきます。

デフォルトではかなりシンプルなデザインなのですが、子テーマのCSSを編集することで、サイトに合わせた好きなデザインにすることが可能です。

目次は最初に見る人も多い箇所なので、見やすい目次はユーザーにとっての利便性も上がります。

Luxeritasに関する記事はこちら

[WordPress] 無料でこのクオリティ?! 超高性能で驚くおすすめテーマ「Luxeritas(ルクセリタス )」

完成イメージ

CSSでデザインを変更しました

このサイトの雰囲気に合わせて、かわいい感じになりました。

ちょっとかわいすぎでは…？と思った方も、色を変えていただくことでかなり雰囲気は変わるので、例えばこんな感じに使っていただけます。

雰囲気がだいぶ変わりました

参考：カスタマイズ前のイメージ

カスタマイズ前
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の目次カスタマイズ方法でした。

今後もデザインのバリエーションが増えたら追加していきます。

最後におまけですが、クリスマスもだんだん近くなってきたので、よろしければこちらの記事も読んでみてください。

カナダのサンタさんに手紙を書こう！宛先や送り方も解説

スポンサーリンク

Luxeritas,カスタマイズ

Posted by Yuhostyles