Luxeritasカスタマイズ-目次
luxeritasというテーマは付属のカスタマイズ項目だけでかなり自由にデザイン変更できます。そこでいくつかカスタマイズを進めていくうちに「カスタマイズしたところをもうちょっと変更したい、やっぱり元に戻したい」と一度カスタマイズした部分を再度カスタマイズしようとしたところ、きれいさっぱりカスタマイズ手順とどこの項目だったのか忘れてしまって探し回ったことがありました。そこでどんな項目で何ができるか把握しておくためにこのサイトで機能を一つ一つ紹介しています。書いておけば覚えたり、最悪調べることも出来るし、公開しておけば誰かしらのお役に立つことでしょうから。
自分色にサイトなりブログなりを染められるのでうれしいことだったはずのカスタマイズ項目とその機能豊富さなのですが、こうして一つずつ全て紹介していくとかなりのボリュームがあることがわかってきます。どこまでやっても終わりません。いや終わりはあるはずですけどね。こうして調べていって分かったことの一つにluxeritasはプラグインで行っている機能もデフォルトでついていたりします。こうしてカスタマイズ項目紹介の先終わりが見えずに途方に暮れ、少々更新をサボっている間に、さらにまたカスタマイズ項目が増えました。
今回はLuxeritas 2.3.0バージョンから増えた「目次」項目です。Googleはウェブマスター向けガイドラインでは「訪問者がページを利用しやすいよう手助けする」とあります。ウェブサイトにはインスタグラムみたいにグリッドデザインでほとんど画像だけで成り立つサイトもありますから「目次」が必ず全てのサイトに必要というわけでも無いでしょうが、ある程度の情報量と文章構造のあるページなら訪問者の利便性から目次があったほうが良いと一般的にされています。ですから目次プラグイン「Table of Contents Plus」などを導入するのが一般的となっています。これがLuxeritas 2.3.0以降からは「目次機能」についてはプラグイン導入しなくてもLuxeritasテーマ内デフォルトでその機能が備わっているようになったわけです。表示の速さと動作の軽さがluxeritasというテーマの良さですけれど、さらに魅力的になったというわけです。プラグイン呼び出したり、プラグインのJavascriptより高速表示が期待できるとのことです。
スポンサーリンク
投稿内の見出しタグに基づいて目次を作成します。
ここでまず目次導入するかどうかの選択ができます。
自動で目次を挿入する
Hタグの見出し設定があればここにチェックすることで目次見出しが挿入されます。デザインがデフォルトですが変更もできます。さらに表示基準も設定できる仕様です。
「自動で目次を挿入する」にレ点挿入して有効化した時には●と○が行の最初についています。デザイン的にはもう一つなので「スタイルを適用する」にもレ点挿入して有効化することをお勧めします。
目次が挿入されるのは最初のHタグの上に挿入されます。冒頭に目次表示させたいのならHタグの見出しを冒頭にもってくる必要があります。H3でも目次は表示されるのでしょうけどLuxeritasでは通常ページタイトルがH1タグになります。このページだと「Luxeritas カスタマイズ(外観) 目次」はH1タグになります。Hタグは飛び飛びにH1からH3とかにならない方が良いとされているので、最初のタグはタイトルと同格のH1タグか、その次のH2タグがお勧めです。
スタイルを適用する
AMP ページにも自動で目次を挿入する
モバイル表示でAMP機能が有効にしてあれば、「AMP ページにも自動で目次を挿入する」にレ点チェックで目次挿入されます。
AMP無効にすると目次は消えるのか？
ちなみにAMP設定を外してスマホで目次が表示できるのか簡単に調べてみました。
LuxeritasではAMP設定されていると編集ページ右側のメニューに「AMP無効化」なる設定があります。
「このページでAMPを無効にする」とページごと無効化できます。図のようにチェックを入れます。
更新ボタンをクリックしてページ限定で「AMP無効化」をサーバーに設定します。
一応AMPが有効か無効になっているのか調べてみます。GoogleがURL挿入でAMP無効か無効か調べるページを用意しているので調べてみます。
↓
AMP無効か無効か調べるページにURL挿入して「テストを実行」ボタンをクリックするだけです。
↓
「有効なAMPページではありません」とAMP無効化したページをスマホで表示させてみました。
↓
目次は表示されました。AMP有効で設定したからかもわかりませんが、少なくともAMP有効を無効に変更したら目次がスマホで表示されなくなるということはありませんでした。もちろん調べた後はAMP有効に戻しました。
表示条件: (見出しの数)
ここで見出しの数を設定して目次を表示、非表示の閾値を設定できます。
表示条件(見出しの数)を2としてあります。ここで言う見出しの数とはH2タグの事です。
H2タグが2つあるので目次が表示されます。表示条件: (見出しの数)が2の場合H2が2つあると目次が表示されるわけです。ここで2つめのH2タグを削除してH2タグ1つとH3タグ3つという文章構造で表示条件: (見出しの数)が2のままですと目次は表示されなくなります。つまり見出しの下部構造の小見出しは表示条件には影響しません。
表示するポストタイプ
投稿ページ
投稿ページにレ点チェック挿入することで投稿ページに目次が挿入されます。
固定ページ
固定ページにレ点チェック挿入することで固定ページに目次が挿入されます。
目次にする見出し階層
H2、H3、H4タグを目次として表示させる設定です。
↓
階層ごとにインデントされて番号も付けられて表示されます。
これより下の項目はウィジェットには適用されません
luxeritasの目次はウィジェットとしても表示可能です。ウィジェットは小さなプログラムでして、Googleがサイトの表示速度をサイトの価値に組み入れてからあまり入れると重くなりがちで不必要なものは使われないのですけど、目次としてウィジェットを使えるということはウィジェットが本文のH2タグ上にに表示という表示場所からウィジェット表示位置も可能になるということです。ウィジェットとして目次を表示させるのなら、表示位置本文中だけでなくサイドバーとかにも移せるということです。
ウィジェットでは目次の表示位置の選択肢が増えます。試しにウィジェットでサイドバーに目次を設置してみます。
ダッシュボードから「外観」メニューの「ウィジェット」をクリックします。
↓
Luxeritas 2.3.0以降からウィジェットに「目次(Luxeritas オリジナル)」と新たな項目が追加されています。
「目次を挿入します」と解説もあるのでこれで目次をウィジェット表示位置に表示できるわけです。
↓
「目次(Luxeritas オリジナル)」ウィジェットの右側にズラリと表示できる場所があります。目次をいろんなところに設置できます。
ここではお試しに「スクロール追従サイドバー」に目次を設置します。
右側に「スクロール追従サイドバー(H4タイプ)」があります。ただその下に「AMP用サイドバー(H4タイプ)」もあります。AMP設定されている場合はこちらにも目次ウィジェットを設定した方が良いでしょう。AMP設定されていてモバイルでも目次表示が必要な場合です。
↓
ここでは「スクロール追従サイドバー(H4タイプ)」の設置をやっていきます。まずは「スクロール追従サイドバー(H4タイプ)」をクリックします。
クリックすると枠が広がりますここに左側から表示させたいものをドラッグしてきます。ここでは目次です。
↓
「目次(Luxeritas オリジナル)」ウィジェットを選択してそのままマウスで「スクロール追従サイドバー(H4タイプ)」までドラッグしてドロップします。
↓
ドラッグしてタイトルは任意に変更できます。有効にして表示させるには「保存」ボタンをクリックします。
↓
サイドバーに目次が表示されました。
開始状態
開いた状態
Luxeritasの目次は最初から開いた状態で表示させるか、閉じた状態から閲覧者が開く選択をして表示させるのかをここで設定できます。
開いているときは閲覧者が「閉じる」ボタンを押せば目次を閉じてかなり小さい表示にできます。
閉じた状態
閉じた状態で「開くボタン」だけを表示させておいて閲覧者が表示させたい場合にそれをクリックしてもらって、目次を表示させるという事もできます。
かなり小さく目立たない表示になります。
タイトル
このサイトでは目次を「目次」として設定しています。つまり目次のタイトル名を「目次」という表示にさせているのですが、簡単に変更できます。英語サイトならTable of Contentsとかに、仏語なら○○と変えられるわけです。
表示ボタン
Luxeritasの目次では目次内容の表示と非表示を切り替えられます。非表示とした場合に閲覧者側で表示を切り替えるボタンがあるわけですがそのボタンのテキストも編集できます。「表示する」になっていますが「OPEN」とかに変更できるわけです。
目次を閉じた状態です。
非表示ボタン
目次の表示状態を非表示にしたいときの閲覧者側で変更する時のボタンテキストをここで変更できます。
目次が開いている状態です。「閉じる」というボタンで目次を閉じられます。非表示ボタンのテキストボックスで「close」にもできます。
非表示ボタンを「close」にするとこんな感じです。
横幅
自動
標準では目次は横幅が全体には広がっていません。
標準では横幅が「自動」を選択されていて、目次の幅は設定した各目次の字幅で決まってきます。
100%
目次の横幅を記事部分いっぱいに広げて表示させたい場合は100%の方にチェックします。
文字色
目次の文字色を好きなようにカスタマイズできます。「文字色」メニューのカラーピッカーを開くために文字色の「色を選択」の部分をクリックします。
カラーピッカーで白丸を選択することで目次の文字色を自由に変更できます。右側にはスライダーのある色の濃度変更ユニットもあるのでスライダーを上下に動かして色の濃度変更をできます。
背景色
背景色も同じように変更できます。「背景色」メニューのカラーピッカーを開くために背景色の「色を選択」の部分をクリックします。
カラーピッカーで文字色を目立たせないと読めなくなるので選択には注意が必要です。
枠線色
「枠線色」メニューのカラーピッカーを開くために背景色の「色を選択」の部分をクリックします。
カラーピッカーで白丸を選択することで目次の枠線色を自由に変更できます。右側にはスライダーのある色の濃度変更ユニットもあるのでスライダーを上下に動かして色の濃度変更をできます。
ボタン文字色
目次の表示と最小表示に切り替えられる「表示ボタン」「非表示ボタン」についてもその文字色と背景色を変更できます。画像では「閉じる」の文字を赤く設定した画像です。
ボタン背景色
こちらで目次の表示or非表示を切り替えるボタンの背景色を変更できます。