>> サイト内には広告が含まれます。プライバシーポリシーはこちら　→
PR

ルクセリタス機能の目次デザインをカスタマイズ３パターン

ルクセリタス・カスタマイズ
この記事は約10分で読めます。
     

無料テーマ「ルクセリタス」には目次自動生成機能があります。

プラグインを使った目次同様、見出しタグを拾い出して自動で作って挿入してくれるのでとても便利です。

この目次のデザインをカスタマイズします。

 


 

バージョンと初期デザインについて

当サイトで使用中のバージョンは以下です。（記事作成時）

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.7

ダウンロードはこちら

ルクセリタスに用意されている「デザイン選択」からのデザイン変更はせずにデフォルトからカスタマイズしています。

 

デザインの変更

BEFORE

シンプルなデザインです。

3481_03

※スタイル適用ありにし、色などは外観カスタマイズで変更しています。

 

AFTER

アイコンフォントを使ったバージョン

パターンA

 

パターンB

 

アイコンフォントを使わないバージョン

パターンC

3481_04

 

※すべてスタイル適用ありのままです。表示・非表示の文字や色はカスタマイザーから行って下さい。

 

パターンAとBはアイコンフォントを使用します。

注意点

Font Awesomeのフリーフォントを使っています。

ルクセリタスでは、フォントをダウンロードしたりサーバーへアップロードしなくても　すぐに使えます。設定方法がわからない場合は　こちら（Font Awesome利用方法：ルクセリタスをお使いの方へ）を参考にして下さい。

Font Awesome

 

共通事項

それぞれのパターンで記載しているCSSをスタイルシートに追記します。

 

style.cssを編集

「Luxeritas」→「子テーマの編集」を選択します。

 

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「style.cssタブ」）

Luxelitasスタイルシート編集画面

 

パターンA

コード

コードを表示 
/*目次デザイン*/
/*目次の外枠*/
div#toc_container {
border: 1px solid #ccc; /*線の幅と色*/
border-radius: 8px; /*枠線　角の丸み*/
margin-left: auto;
margin-right: auto;
padding: 10px;
}
/*目次リストの設定*/
.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: 1px 0;
}
.toc_list .toc_number {
display: none;
}
/*見出し２の設定*/
#toc_container > .toc_list {
counter-reset: my-counter;
list-style: none;
margin-bottom: 0 !important;
padding: 0 0 0 30px;
}
/*数字を入れ、背景色を指定し角を丸めて丸囲みにする*/
#toc_container > .toc_list > li:before {
background-color: #b67070;
border-radius: 50%;
content: counter(my-counter);/*連番を進める*/
counter-increment: my-counter;
color: #fff;
display: block;
float: left;
line-height: 22px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 22px;
}
/*見出し３の設定*/
/*アイコンフォントを入れる*/
.toc_list li .toc_list li:before {
color: #271d16;
content: ‘f061’; /*矢印フォント*/
font-family: “Font Awesome 5 Free”;
margin-left: -20px;
margin-right: 15px;
font-weight: 900;
}
/*見出し４の設定*/
/*アイコンフォントを入れる*/
.toc_list li .toc_list li .toc_list li:before {
color: #271d16;
content: ‘f101’; /*矢印フォント*/
font-family: “Font Awesome 5 Free”;
margin-left: 5px;
margin-right: 15px;
font-weight: 900;
}

 

ウィジェットでの目次をご利用になる場合にも適用されますが、H２タグについては以下も追記して下さい。

コードを表示 
.toc_widget > .toc_list { /* 見出し2 */
counter-reset: my-counter;
list-style: none;
margin-bottom: 0 !important;
padding: 0 0 0 30px;
}
.toc_widget > .toc_list > li:before { /* 見出し2 */
background-color: #fb8a8a;
border-radius: 50%;
content: counter(my-counter);/*連番を進める*/
counter-increment: my-counter;
color: #fff;
display: block;
float: left;
line-height: 22px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 22px;
}

 

パターンB

 

コード

コードを表示 
div#toc_container {
border: 1px solid #5d5855;
border-radius: 8px;		/*枠線　角の丸み*/
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.toc_title{background-color:#5d5855;font-size:16px;color:#fff; font-weight:bold;padding: 10px 20px;border-radius: 25%;}
.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: 1px 0;
}
.toc_list .toc_number {
display: none;
}
#toc_container > .toc_list > li:before { /* 見出し2 */
font-family: "Font Awesome 5 Free";
content: "f35a";
font-weight: 900;
color: #5d5855;
margin-left: -10px;
}
.toc_list li .toc_list li:before {	/* 見出し3 */
font-family: "Font Awesome 5 Free";
content: "f105";
color: #5d5855;
font-weight: 900;
margin-left: -5px;
}
.toc_list li .toc_list li .toc_list li:before {	/* 見出し4 */
font-family: "Font Awesome 5 Free";
content: "f101";
color: #5d5855;
font-weight: 900;
margin-left: 0px;
}
.toc_list li .toc_list li .toc_list li .toc_list li:before {	/* 見出し5 */
color: #271d16;
content: '-';
font-weight: bold;
margin-left: 5px;
}

 

パターンC

3481_04

 

コード

コードを表示 
/************************/
/*目次デザイン*/
/************************/
div#toc_container {
border: 1px solid #ccc;
border-radius: 8px; /*枠線　角の丸み*/
padding: 10px;
}
.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: 1px 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: #fb8a8a;
border-radius: 50%;
content: counter(my-counter);/*連番を進める*/
counter-increment: my-counter;
color: #fff;
display: block;
float: left;
line-height: 22px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 22px;
}
.toc_list li .toc_list li:before { /* 見出し3 */
color: #271d16;
content: '-';
font-weight: bold;
margin-left: -20px;
margin-right: 15px;
}

.toc_list li .toc_list li .toc_list li:before { /* 見出し4 */
color: #271d16;
content: '-';
font-weight: bold;
margin-left: 3px;
margin-right: 15px;
}
.toc_list li .toc_list li .toc_list li .toc_list li:before { /* 見出し5 */
color: #271d16;
content: '-';
font-weight: bold;
margin-left: 5px;
margin-right: 15px;
}

 

色やアイコンを変える

 

色やアイコンフォントを変更してご利用下さい。

アイコンフォントを変更する場合は以下からどうぞ。
Font Awesome

 

色の変更は以下もご覧ください。

SNS等地下鉄JRセーフ色名 赤桃青紫黄橙緑茶黒

 

 

目次ウィジェットのカスタマイズは以下をご覧ください。

ルクセリタスの目次ウィジェットにタイトルが出ないのでカスタマイズ
ルクセリタスには目次を自動生成し、記事に挿入する機能がありますが、サイドバーなど好きなウィジェットエリアに目次を表示できるオリジナルウィジェットもあります。 当サイトでいうと、ルクセリタスの設定項目一覧の記事などは、「目次」そのものが重要な...
ayaito.net

 

ルクセリタスのその他カスタマイズは以下もご覧ください。

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ！高速・高機能無料テーマ
高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。 カスタマイズ済みの当サイトオリジナルデザインファイルは以下をご覧ください。 ルクセリタスについて 今のところテーマはこの一択と決め...
ayaito.net

コメント

タイトルとURLをコピーしました