★ 今日はこんな記事も読まれています ★

Luxeritas の目次のつかい方＆カスタマイズ

2017年12月4日Luxeritas

ある程度長い記事には必須の目次。目次があれば閲覧者が欲しい情報にたどり着きやすいばかりでなく、サイトリンクが発生してSEO上も有利になります。

Luxeritasには自動で目次を生成して挿入してくれる高機能な「目次挿入機能」が搭載されています。

使い方は非常に簡単で、外観カスタマイザーの【目次】設定の「自動で目次を挿入する」にチェックを入れるだけ。もちろん外観を含む設定も充実しています。

Luxeritas の目次機能には次の特徴があります。

  • 目次の挿入される位置は最初に現れたH2の上
  • 広告をH2の上に設定した場合、広告は目次の上に表示される
  • 表示非表示切り替えはCSSで行っている
  • 投稿ページにだけ、固定ページにだけ挿入ができる
  • AMPにも出力可能
  • 追尾ウィジェットにも対応
  • 見出しの数を表示条件で指定できる（H2の数）
  • 目次に含める見出しの階層もh2だけからh6まで対応
  • Table of Contents Plusに近いためToC+を使っていた人はスタイルを流用しやすい
  • スタイルを外すことができるのでカスタマイズもしやすい

外観カスタマイザー設定

外観カスタマイザーでは次のことが行えます。

基本設定自動で目次を挿入する、自動で目次を挿入する、スタイルを適用する
AMP設定AMP ページにも自動で目次を挿入する
表示条件見出しの数の指定（H2の個数）
表示するポストタイプ投稿(post)と固定ページ別々に設定可能
目次にする見出し階層H2のみからH2～H6までを選べる
開始状態デフォルトで開いた状態か閉じた状態か
表示ラベル設定タイトル、表示ボタン、非表示ボタンのラベルを入力
横幅自動か100%か
色指定文字色、背景色、枠線色、ボタン 文字色、ボタン 背景色

デフォルトのスタイルを外して自分でカスタマイズした場合、AMPへの出力にもスタイルの設定が必要になります。

カスタマイズ（本文）

本文中の目次とサイドバーの目次を個別に設定したい場合は、本文は.post ～、サイドバーは#side ～のように親要素を指定します。開閉をオンにしていると共通要素は少なく、#side ulのしばりもあるので影響を受けにくいと思いますが、一応分けたほうがいいかも。

記事中の番号はLIに疑似要素でつけたものではなく、HTMLで直接出力されているので、疑似要素を使ってのli::beforeをいじる作業が不要です。ULとLIのスタイルだけ考えればよい親切設計です。

アイテム番号は<span class="toc_number toc_depth_1″>番号</span>となっているので、丸をつけたりといった装飾をしたい場合は.toc_number{display:none;}なりで消して、自分で番号をふる事ができます。

目次枠div id: #toc_container
目次タイトルspan class: .toc_title
チェックボックスをトグルにinput id: #toc_toggle
ラベルをトグルで切り替えspan class: .toc_toggle
::beforeで表示非表示キャプションを切り替え
#toc_toggle:checked + .toc_toggle::before
 content: “非表示"
.toc_toggle::beforeの中身content: “表示";
cursor: pointer;
color: rgb(51, 51, 51);
margin-left: 10px;
border-width: 1px;
border-style: solid;
border-color: rgb(221, 221, 221);
border-image: initial;
background: 0px 0px;
padding: 2px 5px;
ULclass: .toc_list
#toc_toggle:checked+.toc_toggle+.toc_listwidth: auto;
height: auto;
margin-top: 20px;
transition: all .3s;
LI特になし
項目番号span class: .toc_numberと .toc_depth_1
番号全般と深さ別々で指定可能っぽい

.toc_toggle:で疑似クラスと::beforeの疑似要素を使っているので、そこだけが面倒です。

#toc_toggle:checked + .toc_toggle::before ではみなれない + が出てきています。これは隣接セレクタといって、直後にある要素のみに適用されるセレクタです。

セレクタについてはこちらが分かりやすいです。

意外と知らないCSSセレクタ20個のおさらい

デザインセンスがないから悲しい結果

いろいろやってはみたけど、デザインセンスがないのでデフォルト以上の見栄えにはなりませんでした。

なにがしかの参考になればということで公表です。

#toc_container{border:none;}
.toc_title{display:none;}
.toc_list{list-style-type:none;}
.toc_toggle::before{border:none;font-family:FontAwesome;content: "\f0da 目次表示";}
#toc_toggle:checked + .toc_toggle::before{border:none;font-family:FontAwesome;content: "\f0d7 目次非表示";}
#toc_toggle:checked+.toc_toggle+.toc_list{margin-top:5px;margin-bottom:10px;}

カスタマイズ（サイドバー追尾ウィジェット）

追尾ウィジェットはスクロールしてサイドバーが見えなくなっても追いかけてくるウィジェットです。ウィジェットに開閉機能がないので調整しやすく、一般の#side ウィジェットとおなじ感覚で扱えます。

見出しはH4なので、その点にだけ気を付ければ難しいことはないです。ULは入れ子になっているので、paddingなどは.toc_widgetで設定。

h4タイトルまで含めたボックスdiv class: .thk_toc_widget
タイトルh4 .side-title
 ulの入れ物DIVdiv: .toc_widget
 UL.toc_list
 番号.toc_number .toc_depth_1

 

開閉にしているとめんどう。開きっぱなしなら簡単

構造は非常に簡単なので、番号にこだわりがあれば番号を消して自分でふりなおすこともできるし、めんどうなら大きさをかえるだけといったこともできます。
開閉オプションをオフにして、ページデザインの一部にしてしまうとカスタマイズしやすいかも。

外観カスタマイザーからも一通りの事ができますが、#sideだけいじって本文はそのまま使うほうが楽かなｗ

Luxeritas