Luxeritas(ルクセリタス)で毎日の記事に目次を入れてみよう!【目次 編】

2018年10月9日ブログ管理Luxeritas, Luxeritasカスタマイズ, ブログ管理, 初心者, 目次

目次の設定

トリ師匠
トリ師匠
最近はちゃんとブログの更新してるんか?
ぐず夫
ぐず夫
してるで。
はじけるほど億劫やけどな。
トリ師匠
トリ師匠
(…暇なのに?)
今日は記事の投稿ん時に表示される目次について設定するかの。そんじゃ用意しよか。

ということで、今回はLuxeritasのカスタマイズ機能を使って投稿ページの目次を設定をしてみたいと思います。

目次 機能

目次選択

トリ師匠
トリ師匠
最近じゃとほとんどのサイトに付いとるで知っとるかもしれんが、ページの頭に表示される目次を設定する機能じゃ。最初っから見たいとこを見れるでユーザーさんにとっちゃ便利なもんじゃの。ほな早速「目次」を選択してみよか。

 

① 自動で目次を挿入する

投稿ページ内に目次の挿入を設定する機能。なお非チェックの場合、以下の設定は反映されません

【目次あり】

目次あり

【目次なし】

目次なし
目次部分を飛ばし、見出しが表示されます

 

② スタイルを適用する

個別のスタイルの適用を選択します。

【スタイルを適用しない場合の表示】

スタイルなし

トリ師匠
トリ師匠
見た目はスタイルシートを使ったり、下の項目でも一部変更できるで。これらを適用しない場合はチェックを外せばええ。普通はチェックでええと思うで!

 

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

AMPのページにも目次を挿入します。

ぐず夫
ぐず夫
「AMP」てなんやの?
トリ師匠
トリ師匠
Googleさんらが共同で開発したモバイル端末でページを高速に表示するためのもんじゃ。ウチは使てへんのでチェック不要じゃ。
ぐず夫
ぐず夫
ほへ~。
トリ師匠
トリ師匠
Luxeritasは基本機能でAMPを有効にすることもできるんじゃが、ぐず夫のブログは基本的にPCのお客さんが多いはずじゃで有効にしてへん。そもそもワシ、AMPあんまり好きちゃうし。
ぐず夫
ぐず夫
…なんやよう分からんけど、そもそもどーゆーこっちゃ。
トリ師匠
トリ師匠
AMP使ってないなら必要ないし、使ってるならチェックを入れるのがええやろな。AMPページにまで目次入れてくれるて、ホンマに至れり尽くせりやで。

 

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

いくつ以上見出しがある場合に目次を表示させるかを設定します。

トリ師匠
トリ師匠
例えば3に設定すると、見出しが3つ以上ある場合にだけ目次が表示されるの。ぐず夫の場合は1つでも見出しがあれば目次が表示されるようになってるわ。

 

⑤ 表示するポストタイプ

表示する対象ページ(投稿・固定)を設定します。

● 投稿ページ
投稿ページに目次を表示します。

● 固定ページ
固定ページに目次を表示します。

トリ師匠
トリ師匠
ぐず夫の場合は投稿ページだけ有効で、固定ページには使ってないで!

 

⑥ 目次にする見出し階層

目次に表示する見出しの階層(h2~6)を設定します。(※以下、表示例)

  • h2のみ
    h2のみ
  • h2~h3
    h2からh3
  • h2~h4
    h2からh4
  • h2~h5
    h2からh5
  • h2~h6
    h2からh6

 

⑦ 開始状態

ページを開いた時の目次の状態を設定します。

  • OPNE状態
    OPEN状態
  • CLOSE状態
    CLOSE状態

 

⑧ 目次の見た目

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

目次に表示させるタイトル、表示/非表示ボタンの文言を設定します。

【 例:タイトル(目次やん)、表示(表示させるやん)、非表示(非表示にするやん)に設定時 】

  • OPEN状態
  • CLOSE状態

 

● 横幅
目次の横幅を設定します。(例:100%に設定した場合…)

横幅100%

 

● 文字色
● 背景色
● 枠線色
● ボタン 文字色
● ボタン 背景色

目次の表示に伴う全体の文字色、背景色、目次の枠線色、表示/非表示ボタンの文字色、背景色をそれぞれ設定します。(※以下、表示例)

  • 全体文字色(色)
    目次文字色
  • 背景色(色)
    目次背景色
  • 枠線色(色)
    目次枠線色
  • 表示/非表示文字色(色)
    目次ボタン文字色
  • ボタン背景色(色)
    目次ボタン背景色

目次の設定を終えて…

ぐず夫
ぐず夫
確かに目次はあると便利やの。ワシそこしか見ぃへんし
トリ師匠
トリ師匠
確かにパッと見てどこに見たい項目があるか分かりやすいで、ユーザーさんには便利じゃな。あとはお前が中身をキチッと書くだけじゃ。
ぐず夫
ぐず夫
わ、分かってるわ。ちゃんと書くがな…

以上で目次編のカスタマイズを終了します。

ではまた次回をお楽しみに!