Luxeritas カスタマイズ(外観) 目次

2017/10/24Luxeritas カスタマイズ(外観)

luxeritasというテーマは付属のカスタマイズ項目だけでかなり自由にデザイン変更できます。そこでいくつかカスタマイズを進めていくうちに「カスタマイズしたところをもうちょっと変更したい、やっぱり元に戻したい」と一度カスタマイズした部分を再度カスタマイズしようとしたところ、きれいさっぱりカスタマイズ手順とどこの項目だったのか忘れてしまって探し回ったことがありました。そこでどんな項目で何ができるか把握しておくためにこのサイトで機能を一つ一つ紹介しています。書いておけば覚えたり、最悪調べることも出来るし、公開しておけば誰かしらのお役に立つことでしょうから。

自分色にサイトなりブログなりを染められるのでうれしいことだったはずのカスタマイズ項目とその機能豊富さなのですが、こうして一つずつ全て紹介していくとかなりのボリュームがあることがわかってきます。どこまでやっても終わりません。いや終わりはあるはずですけどね。こうして調べていって分かったことの一つにluxeritasはプラグインで行っている機能もデフォルトでついていたりします。こうしてカスタマイズ項目紹介の先終わりが見えずに途方に暮れ、少々更新をサボっている間に、さらにまたカスタマイズ項目が増えました。

今回はLuxeritas 2.3.0バージョンから増えた「目次」項目です。Googleはウェブマスター向けガイドラインでは「訪問者がページを利用しやすいよう手助けする」とあります。ウェブサイトにはインスタグラムみたいにグリッドデザインでほとんど画像だけで成り立つサイトもありますから「目次」が必ず全てのサイトに必要というわけでも無いでしょうが、ある程度の情報量と文章構造のあるページなら訪問者の利便性から目次があったほうが良いと一般的にされています。ですから目次プラグイン「Table of Contents Plus」などを導入するのが一般的となっています。これがLuxeritas 2.3.0以降からは「目次機能」についてはプラグイン導入しなくてもLuxeritasテーマ内デフォルトでその機能が備わっているようになったわけです。表示の速さと動作の軽さがluxeritasというテーマの良さですけれど、さらに魅力的になったというわけです。プラグイン呼び出したり、プラグインのJavascriptより高速表示が期待できるとのことです。

Luxeritas272

投稿内の見出しタグに基づいて目次を作成します。

ここでまず目次導入するかどうかの選択ができます。

自動で目次を挿入する

Luxeritas274
Hタグの見出し設定があればここにチェックすることで目次見出しが挿入されます。デザインがデフォルトですが変更もできます。さらに表示基準も設定できる仕様です。

自動で目次を挿入する
「自動で目次を挿入する」にレ点挿入して有効化した時には●と○が行の最初についています。デザイン的にはもう一つなので「スタイルを適用する」にもレ点挿入して有効化することをお勧めします。

目次が挿入されるのは最初のHタグの上に挿入されます。冒頭に目次表示させたいのならHタグの見出しを冒頭にもってくる必要があります。H3でも目次は表示されるのでしょうけどLuxeritasでは通常ページタイトルがH1タグになります。このページだと「Luxeritas カスタマイズ(外観) 目次」はH1タグになります。Hタグは飛び飛びにH1からH3とかにならない方が良いとされているので、最初のタグはタイトルと同格のH1タグか、その次のH2タグがお勧めです。

スタイルを適用する

目次のスタイルを適用する

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

AMPページにも自動で目次を挿入する
モバイル表示でAMP機能が有効にしてあれば、「AMP ページにも自動で目次を挿入する」にレ点チェックで目次挿入されます。

AMP無効にすると目次は消えるのか?

ちなみにAMP設定を外してスマホで目次が表示できるのか簡単に調べてみました。
Luxeritas目次カスタマイズ解説ページでAMP設定無効にする
LuxeritasではAMP設定されていると編集ページ右側のメニューに「AMP無効化」なる設定があります。
「このページでAMPを無効にする」とページごと無効化できます。図のようにチェックを入れます。
更新ボタン
更新ボタンをクリックしてページ限定で「AMP無効化」をサーバーに設定します。
一応AMPが有効か無効になっているのか調べてみます。GoogleがURL挿入でAMP無効か無効か調べるページを用意しているので調べてみます。

AMPテストsearchgooglecomt
AMP無効か無効か調べるページにURL挿入して「テストを実行」ボタンをクリックするだけです。

有効なAMPページではありません
「有効なAMPページではありません」とAMP無効化したページをスマホで表示させてみました。

目次をスマホで表示させる
目次は表示されました。AMP有効で設定したからかもわかりませんが、少なくともAMP有効を無効に変更したら目次がスマホで表示されなくなるということはありませんでした。もちろん調べた後はAMP有効に戻しました。

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

ここで見出しの数を設定して目次を表示、非表示の閾値を設定できます。
表示条件
表示条件(見出しの数)を2としてあります。ここで言う見出しの数とはH2タグの事です。

H2タグ2つある目次の図
H2タグが2つあるので目次が表示されます。表示条件: (見出しの数)が2の場合H2が2つあると目次が表示されるわけです。ここで2つめのH2タグを削除してH2タグ1つとH3タグ3つという文章構造で表示条件: (見出しの数)が2のままですと目次は表示されなくなります。つまり見出しの下部構造の小見出しは表示条件には影響しません。

表示するポストタイプ

投稿ページ

投稿ページに目次を表示させる設定画像
投稿ページにレ点チェック挿入することで投稿ページに目次が挿入されます。

固定ページ

固定ページに目次を表示させる設定画像
固定ページにレ点チェック挿入することで固定ページに目次が挿入されます。

目次にする見出し階層

H2-H4設定にチェックされている画像
H2、H3、H4タグを目次として表示させる設定です。

H2からH4まで目次表示設定された目次
階層ごとにインデントされて番号も付けられて表示されます。

これより下の項目はウィジェットには適用されません

これより下の項目はウィジェットには適用されません項目
luxeritasの目次はウィジェットとしても表示可能です。ウィジェットは小さなプログラムでして、Googleがサイトの表示速度をサイトの価値に組み入れてからあまり入れると重くなりがちで不必要なものは使われないのですけど、目次としてウィジェットを使えるということはウィジェットが本文のH2タグ上にに表示という表示場所からウィジェット表示位置も可能になるということです。ウィジェットとして目次を表示させるのなら、表示位置本文中だけでなくサイドバーとかにも移せるということです。

ウィジェットでは目次の表示位置の選択肢が増えます。試しにウィジェットでサイドバーに目次を設置してみます。
外観メニューからウィジェットをクリック
ダッシュボードから「外観」メニューの「ウィジェット」をクリックします。

ダッシュボードのウィジェットページから目次項目を確認
Luxeritas 2.3.0以降からウィジェットに「目次(Luxeritas オリジナル)」と新たな項目が追加されています。
「目次を挿入します」と解説もあるのでこれで目次をウィジェット表示位置に表示できるわけです。

「目次(Luxeritas オリジナル)」ウィジェットの右側にズラリと表示できる場所があります。目次をいろんなところに設置できます。

ここではお試しに「スクロール追従サイドバー」に目次を設置します。
ウィジェットページのスクロール追従サイドバー画像
右側に「スクロール追従サイドバー(H4タイプ)」があります。ただその下に「AMP用サイドバー(H4タイプ)」もあります。AMP設定されている場合はこちらにも目次ウィジェットを設定した方が良いでしょう。AMP設定されていてモバイルでも目次表示が必要な場合です。

ここでは「スクロール追従サイドバー(H4タイプ)」の設置をやっていきます。まずは「スクロール追従サイドバー(H4タイプ)」をクリックします。
ウィジェットページの「スクロール追従サイドバー(H4タイプ)」をクリックした時の画像
クリックすると枠が広がりますここに左側から表示させたいものをドラッグしてきます。ここでは目次です。

ウィジェットページで目次ウィジェットをドラッグしている画像
「目次(Luxeritas オリジナル)」ウィジェットを選択してそのままマウスで「スクロール追従サイドバー(H4タイプ)」までドラッグしてドロップします。

目次ウィジェットをドラッグしている画像
ドラッグしてタイトルは任意に変更できます。有効にして表示させるには「保存」ボタンをクリックします。

ウィジェットから目次をサイドバーに設定して表示させた画像
サイドバーに目次が表示されました。

開始状態

開いた状態

目次を開いた状態で最初から表示させる画像
Luxeritasの目次は最初から開いた状態で表示させるか、閉じた状態から閲覧者が開く選択をして表示させるのかをここで設定できます。

Luxeritasの目次の閉じるボタンの画像
開いているときは閲覧者が「閉じる」ボタンを押せば目次を閉じてかなり小さい表示にできます。

閉じた状態

開始状態で閉じた状態を選択した画像
閉じた状態で「開くボタン」だけを表示させておいて閲覧者が表示させたい場合にそれをクリックしてもらって、目次を表示させるという事もできます。

目次が閉じた状態の画像
かなり小さく目立たない表示になります。

タイトル

目次のタイトルを決めるテキストボックス画像
このサイトでは目次を「目次」として設定しています。つまり目次のタイトル名を「目次」という表示にさせているのですが、簡単に変更できます。英語サイトならTable of Contentsとかに、仏語なら○○と変えられるわけです。

表示ボタン

Luxeritas目次の表示ボタンの設定テキストボックス画像
Luxeritasの目次では目次内容の表示と非表示を切り替えられます。非表示とした場合に閲覧者側で表示を切り替えるボタンがあるわけですがそのボタンのテキストも編集できます。「表示する」になっていますが「OPEN」とかに変更できるわけです。
目次が閉じた状態で表示するボタンにマーキングを施した画像
目次を閉じた状態です。

非表示ボタン

目次の設定で非表示にするボタンのテキスト編集ボックス
目次の表示状態を非表示にしたいときの閲覧者側で変更する時のボタンテキストをここで変更できます。

目次を非表示にする「閉じる」と書かれたボタンに赤いマーキングした画像
目次が開いている状態です。「閉じる」というボタンで目次を閉じられます。非表示ボタンのテキストボックスで「close」にもできます。

目次の表示状態から非表示にするボタンをcloseと表示させた画像
非表示ボタンを「close」にするとこんな感じです。

横幅

自動

Luxeritas標準の目次を標準表示で目次の幅を示した画像
標準では目次は横幅が全体には広がっていません。

Luxeritasの目次を標準表示で横幅を自動とした場合の目次メニュー画像
標準では横幅が「自動」を選択されていて、目次の幅は設定した各目次の字幅で決まってきます。

100%

Luxeritasの目次を標準表示で横幅を100%とした場合の目次メニュー画像
目次の横幅を記事部分いっぱいに広げて表示させたい場合は100%の方にチェックします。

文字色

目次の文字色変更するために文字色カスタマイズをクリックする画像
目次の文字色を好きなようにカスタマイズできます。「文字色」メニューのカラーピッカーを開くために文字色の「色を選択」の部分をクリックします。

目次の文字色をカラーピッカーで変更する画像
カラーピッカーで白丸を選択することで目次の文字色を自由に変更できます。右側にはスライダーのある色の濃度変更ユニットもあるのでスライダーを上下に動かして色の濃度変更をできます。

背景色

目次の背景色を変更するカラーピッカーを開くためクリックする画像
背景色も同じように変更できます。「背景色」メニューのカラーピッカーを開くために背景色の「色を選択」の部分をクリックします。

目次の背景色をカラーピッカーで決定している画像
カラーピッカーで文字色を目立たせないと読めなくなるので選択には注意が必要です。

枠線色

Luxeritasで目次を枠線色を変更するためにカスタマイズクリックする画像
「枠線色」メニューのカラーピッカーを開くために背景色の「色を選択」の部分をクリックします。

Luxeritasで枠線色をカラーピッカーで赤色に変更している画像
カラーピッカーで白丸を選択することで目次の枠線色を自由に変更できます。右側にはスライダーのある色の濃度変更ユニットもあるのでスライダーを上下に動かして色の濃度変更をできます。

ボタン文字色

Luxeritasで目次の表示と非表示を切り替えるボタンの文字色を変更するカスタマイズ画像
目次の表示と最小表示に切り替えられる「表示ボタン」「非表示ボタン」についてもその文字色と背景色を変更できます。画像では「閉じる」の文字を赤く設定した画像です。

ボタン背景色

Luxeritasで目次を表示or非表示ボタン色を赤色に変更するためにカスタマイズしている画像
こちらで目次の表示or非表示を切り替えるボタンの背景色を変更できます。

ダッシュボード→Luxeritas→カスタマイズ(外観)攻略法

Luxeritas27062
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas27162
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas27262
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas27352
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas27462
ヘッダー/フッターのカスタマイズ
Luxeritas27542
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas27682
コメント欄の表示or非表示、枠線
Luxeritas27742
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas27832
メタ情報の表示or非表示と配置
Luxeritas27972
サムネイル(アイキャッチ)大きさと配置
Luxeritas28042
フォントの変更
Luxeritas28162
タイトル、記事など文字サイズの変更
Luxeritas28232
文字色の編集
Luxeritas28432
背景色と枠線色の編集
Luxeritas28372
背景とタイトルとロゴ画像挿入による編集
Luxeritas28532
パンくずリンクの配置変更と編集
Luxeritas28772
ヘッダーナビ(グローバルナビ)編集
Luxeritas28832
ヘッダー上の帯状メニュー編集
私の目次設定カスタマイズ解説ページへのリンクボタン画像[60]
Luxeritasオリジナル目次の挿入とカスタマイズ
Luxeritas28932
マウスオンアニメーション

Posted by クチコミ探し