ルクセリタスの目次の設定とコピペで出来るカスタマイズ

8月 3, 2019

ルクセリタスにはテーマの中に目次機能が付いています。

でも、デフォルトはちょっと地味なので、これまでプラグイン「Table of Contents Plus(TOC+)」を使っていました。

地味じゃなくて、カスタマイズしやすいように、あえてシンプルにしてあるんですけどね
うさぎ


ところがTOC+は長年更新されていないため、やっぱりルクセリタスの目次を使わせていただくことにしました。

おじさん
4年前!

今回は、ルクセリタスの目次の設定方法とカスタマイズについて紹介します。

ルクセリタスの目次の設定

ルクセリタスの目次は、外観 > カスタマイズ > 目次の順にクリックして設定します。

目次の設定項目

当サイトの目次の設定は、次の画像のようになっています。

おじさん
設定を考えるのが面倒な方は、同じように設定してください

よく分からない方もいると思うので、一つずつ設定項目を説明していきます。

自動で目次を挿入する

ルクセリタスの目次を使うという意味です。チェックを入れてください。


スタイルを適用する

目次のデザインをカスタマイズするときはチェックを入れてください。


AMP ページにも自動で目次を挿入する

AMPページを作っている方は、チェックを入れてください。


表示条件: (見出しの数)

見出しの数がいくつ以上で目次を表示するか決めます。特にこだわりがなければ「1」でOKです。


表示するポストタイプ

投稿ページはチェック、固定ページはお好みでチェックしてください。


目次にする見出し階層

一般的には見出しh2とh3の目次が多いです。


ジャンプ先の位置 (高さ)

グローバルナビゲーションをページ上部で固定する設定にしていると、目次から記事にジャンプした時に見出しが隠れてしまいます。

実際のページを見ながら調整してみてください。
開始状態

ページを開いた時、目次を表示か非表示のどちらにしておくか選択します。


タイトル・表示/非表示ボタン

目次のタイトルや表示/非表示ボタンの文言を変更できます。
横幅

自動は見出しの文字数に合わせて横幅を自動で変動してくれます。

100%は横幅いっぱいに広がります。
色のカスタマイズ

文字や背景色などをお好きな色に変更できます。

枠線の太さを変えたり見出しの前の数字を変えたりするには、次のCSS(スタイルシート)の変更を参考にしてみてください。


全てのカスタマイズが完了したら、忘れずにページ上部の「公開」ボタンをクリックしてください。

おじさん
クリックし忘れると全てが水の泡に

目次をCSSで自由にカスタマイズ

ここからは、CSSを使ってカスタマイズする方法を紹介します。

公開するのは当サイトの目次のコードなので、色やアイコンなどを変更して使ってください。

コードをコピペする場所

コードは、外観 > テーマエディター > 「Luxeritas Child」に貼り付けてください。

おじさん
いわゆる子テーマですね

最初に入っているコードは消さず、その下にコピペして「ファイルを更新」ボタンをクリックすればOKです。

当サイトの目次のコード

コードを貼り付けると、当サイトと同じ目次が出来上がります。

ただ、記事執筆時の目次であり、今後変更するかも知れません。

おじさん
本当はタイトル「目次」を中央にしたかったんですが、僕の知識ではできませんでした
実力不足!
うさぎ
おじさん
やり方の分かる方は教えて下さい

CSS

/*----------------ルクセリタス目次----------------------*/
div#toc_container {
display: block !important;	
border: 1px solid #394e7c; /*枠線の幅と色*/
border-radius: 8px; /*枠線の角の丸み*/
margin: 10px auto; /*枠線外側上下の余白・左右中央*/
padding: 10px; /*枠線内側の余白*/
font-size:20px; /*タイトルのフォントサイズ*/
}
#toc_container .toc_title {
margin-left:2em /*タイトル左側余白*/
}
#toc_container .toc_title:before{
color:  #394e7c;/* アイコンの色 */
font-family:"Font Awesome 5 Free";
content:"\f02d";/*アイコンのコード*/
font-weight: 900;
padding-right: 7px;
font-size:110%; /* アイコンの大きさ */
}
#toc_container > .toc_list {
list-style: none;
margin-bottom: 0 !important;
padding-left: 20px;/*h2左側余白 */		
}
.toc_list ul {
list-style: none;
padding-left: 30px;/* h3左側の余白 */
}
.toc_list li{
font-size: 20px;/*h2フォントサイズ */
padding: 5px 0;/*h3とh2上の余白 */
}
.toc_list li > a{
border-bottom: 1px dotted #394e7c;/*h2の下線サイズと色*/
}
.toc_list li li {
font-size: 16px;/*h3フォントサイズ */
padding: 2px 0;/*h3上下余白 */
}
#toc_container .toc_list li a:hover{
color: #718CC6;/*マウスオーバー時の文字色 */
text-decoration: none;
font-size: 105%;/*マウスオーバー時のフォントサイズ */
font-weight:bold;/*マウスオーバー時に太字 */
}
.toc_list .toc_number {
display: none;
}
.toc_list li > a:before {/*h2のアイコン*/
color: #718CC6;/* アイコンの色 */
font-family:"Font Awesome 5 Free";
content:"\f0da";
font-weight: 900;
font-size: 100%;/* アイコンの大きさ */
padding-right: 5px;
}
	 
.toc_list li li >a:before {/*h3のアイコン*/
color: #718CC6;/* アイコンの色 */
font-family:"Font Awesome 5 Free";
content:"\f0da";
font-weight: 900;
font-size: 70%;/* アイコンの大きさ */
padding-right: 3px;
}
「/* アイコン */」などの説明書きは「/*  */」この記号と一緒に削除しても大丈夫です
うさぎ

マウスオーバーの動きがうっとうしいときは、#toc_container .toc_list li a:hover…の行を全部削除してください。

サイドバーの目次

目次はサイドバーに設置することもできます。

外観 > ウィジェットの順にクリックします。

「#3目次(Luxeritasオリジナル)」の項目をドラッグ&ドロップするだけで、サイドバーに目次を設置できます。

サイドバーの目次の縦スクロール

目次の見出しが多いと、サイドバーの縦幅で収まりきらないときがあります。

次のコードを入れておくと、目次が長くても縦スクロールできるようになります。

div.toc_widget {
max-height: 300px;
overflow-y: auto;
}
300pxの数字を変更して縦幅を調整してください
うさぎ

まとめ

今回はルクセリタスの目次について紹介しました。

さらにカスタマイズして、オリジナルの目次にしてみてください!

おじさん
思い通りにカスタマイズできると楽しくなります

ルクセリタス関連記事一覧