スポンサーリンク

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

2019年3月16日

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

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

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

スポンサーリンク

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

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

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

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についてはこちらの記事を参考にしてください。

目次を中央寄せ

/*目次を中央に寄せる*/
#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(大見出し)の文字の大きさ*/
}

最後に

以前プラグイン『Table of Contents Plus』をご紹介したときにも書きましたが、目次を記事に設置すると読んでくれるユーザーの知りたい情報が見つけやすくなります。

書いた側からすれば最初から読んでもらいたいものですけどね(^^;)
私自身もよく目次をみてはてなブックマークやPocketなどに保存してあとからじっくり読んだりします。
なので記事に目次を設置するのはユーザーのためになります。

ですが、ユーザーの中には目次を嫌がる人もいます。
目次をユーザーが自由に表示/非表示にできるようにしておく方がいいと思います。

Luxeritasではプラグインを使わずに記事に目次を設置できます。
設定も簡単ですのでぜひ使ってみてください。

なお、プラグイン『Table of Contents Plus』も簡単に目次を記事に設置できるプラグインですので、Luxeritas以外のテーマをお使いの方は利用してみてください。

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。