【Luxeritas】目次を自動で記事に挿入する方法

2019年3月16日2020年1月11日Luxeritas

2019年10月8日
「目次を非表示にする方法」を追記しました。

WordPressテーマ『Luxeritas(ルクセリタス)』にはプラグインを使わなくても自動で記事に目次を挿入してくれる機能があります。

今回は「Luxeritasで目次を自動で記事に挿入する方法」について書いていきます。

Contents

1. 目次を生成してくれるプラグイン
2. 自動で目次を挿入する設定
- 2.1. サンプル
3. 目次を非表示にしたいとき
- 3.1. 目次を非表示にする方法
4. カスタマイズ
- 4.1. Table of Contents PlusのCSSが反映される！？
- 4.2. ちょこっとカスタマイズ
5. 最後に

目次を生成してくれるプラグイン

WordPressで記事に目次を設置できるプラグインといえば『Table of Contents Plus』です。

【WordPress】自動で目次を生成してくれるプラグイン Table of Contents Plus

記事を書いていると『目次』を設置したいと思うことありませんか！？でも記事ごとに毎回自分でソース ...

https://kirari-yums.net/post-2343/

当ブログでも以前紹介しました。

Luxeritasではこの『Table of Contents Plus』プラグインを使わなくても記事に自動で目次を挿入することができます。

自動で目次を挿入する設定

では目次を挿入する方法を紹介します。

場所［Luxeritas］［カスタマイズ(外観)］［目次］

拡大

※見やすくするため設定項目を横に並べています。クリックすると画像が拡大します。

自動で挿入

「自動で目次を挿入する」にチェックを入れてください。

表示条件(見出しの数)

例えば「3」と設定した場合、記事に見出しが3個以上なら目次が自動で挿入されます。

見出しがいくつあれば目次を作るのか、数を入力してください。

表示するポストタイプ

投稿ページに目次を入れる場合には「投稿ページ」にチェック。固定ページに目次を入れる場合には「固定ページ」にチェックを入れてください。

目次にする見出し階層

目次に入れる見出しを選択してください。

「H2-Hl3」で設定した場合、「Hl2」と「H3」で指定した見出しが目次に入り、階層表示されます。
また「表示条件(見出しの数)」で「3」にすると「H2」「H3」の見出しが3個以上あれば自動で目次が挿入されます。

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

目次の見出しをクリックしたときににジャンプする位置です。

ヘッダーナビ(グローバルナビ)を固定にしているとき

ヘッダーナビ(グローバルナビ)を『固定』にしている場合、ヘッダーナビに隠れているときはこの「ジャンプ先の位置(高さ)」を調整してください。

デフォルトでは値は「0」になっているので「0」より上の値を入力して調整してください。

拡大

開閉状態

モバイルのアコーディオンメニューで「開いた状態」にするか、閉じた状態にするかを選択してください。

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

目次に表示するタイトルとその横に表示する表示／非表示ボタンに表示する文字を入力してください。

その他

あとは「目次の横幅」「文字色」「背景色」「枠線のいろ」「表示／非表示ボタンの文字色と背景色」を設定してください。

きらり

設定したら上の［公開］ボタンをクリックしてくださいね。
これで記事に『条件が合えば』目次が挿入されます。

サンプル

枠線の設定をしていないので非常にシンプルですが、こんな感じの目次が記事に挿入されます。

目次が挿入されるのは記事の最初の見出しのすぐ上に挿入されます。

目次を非表示にしたいとき

設定を行えばあとは記事を書くだけで自動で目次が挿入されます。

ですが、中には「この記事には目次はいらないなぁ」と思うこともあると思います。そういうときは目次を非表示にすることができます。

目次を非表示にする方法

記事編集画面の右横(または下)に『目次の非表示』という項目がありますのでチェックを入れれば非表示にできます。

「目次の非表示」という項目が表示されていない場合は右上にある『表示オプション』の中から「目次の非表示」」にチェックを入れると項目が表示されます。

カスタマイズ

目次のカスタマイズについてご紹介します。

Table of Contents PlusのCSSが反映される！？

Luxeritasの目次はプラグイン『Table of Contents Plus』のカスタマイズで設定したCSSが反映されます。

私も以前はプラグイン『Table of Contents Plus』を使っていましたが、Luxeritasの目次機能に切り替えても『Table of Contents Plus』で行ったカスタマイズ(CSS)がそのまま使えたのでそのまま使っています。

なのでLuxeritasの目次をカスタマイズする場合はプラグイン『Table of Contents Plus』のカスタマイズを参考にするといいと思います。

ちょこっとカスタマイズ

私はあまりカスタマイズしていませんが、簡単なカスタマイズをご紹介します。

タイトルの前にアイコンをつける

/*目次タイトル前にアイコンをつける*/
#toc_container .toc_title:before{
	display:inline-block;
	width:40px;    /*アイコンを表示する領域(横幅)*/
	height:40px;   /*アイコンを表示する領域(縦幅*/)
	line-height:40px;
	text-align:center;
	border-radius:50%;    /*表示領域を丸く*/
	background:#a61919;    /*背景色*/
    font-family:"Font Awesome 5 Free";
    content:"f15c";    /*アイコンのコード*/
    font-weight:400;    /*アイコン Regular：400、Solid：900*/
    font-size:20px;   /* アイコンの大きさ */
    color: #ffffff;    /*アイコンの色*/
	margin-right:10px;    /*アイコン右の余白*/
}

※6行目と7行目はアイコンを真ん中に表示させるためのものです。
6行目のline-heightは4行目のアイコンを表示する領域(縦幅)と同じにしてください。

※アイコンはFontAwesomeを使用しています。FontAwesomeについてはこちらの記事を参考にしてください。

Webアイコン(FontAwesome)を使ってみよう！

この記事ではFont Awesome5となっていますが、新バージョン6でも同じように使えます。 >FontAwesome ...

https://kirari-yums.net/post-3228/

目次を中央寄せ

/*目次を中央に寄せる*/
#toc_container {
    margin-left: auto;
    margin-right: auto;
}

H2(大見出し)の文字を大きくする

/*H2(大見出し)の文字を大きくする*/
#toc_container .toc_list > li > a {
     border-bottom: 1px solid #a61919;   /*H2(大見出し)の下線*/
     font-size: 110%;                    /*H2(大見出し)の文字の大きさ*/
}