WordPressページ内目次をElementorで作成する！
ページ内目次の重要性
たぶんすごく重要です。
- ユーザーフレンドリーである
- 長いページでは非常にナビゲートがラク
- 記事の構造を把握しやすい
- SEO対策になる
Elementorで作るページ内目次
いつものようにこのウィジェットを編集エリアへドラッグ＆ドロップすることで目次エリアを設置することができます。
その他の機能
A :INCLUDEとEXCLUDEはタブとして機能します。INCLUDEが選ばれているときは目次として表示したい見出しレベルを、EXCLUDEが選ばれているときは非表示にしたい領域を指定することができます。
B :キャプチャ画面はINCLUDEのときの表示です。見出しレベルを削除したいときはH1~ボタンの上にマウスポインタを持っていくと☓アイコンが表示されるので、その☓アイコンをクリックします。追加したい場合は右の＋ボタンをクリックして見出しレベルを選択して追加します。
C :目次内の見出しの先頭に表記するマークを指定します。マークはFontAwsomeから選ぶことも、任意のグラフィックを指定することも可能です。
Elementorのスタイル設定
Elementorのウィジェットには必ず
コンテンツ・スタイル・高度な設定の３つの大きな設定要素が用意されています。上記で説明した設定内容はコンテンツというセクションで設定する内容で、スタイルでは主にデザインを指定することができます。
Table of Contentsウィジェットのスタイルでは以下のような内容を設定することが可能です。
スタイルの設定は大きくBox（枠）、Header（目次のタイトル）、一覧の３つのセクションに分かれています。Elementorのインターフェイスはこのように日本語化が途上なものが非常に多いです。いっそ英語のままのほうがわかりやすいこともあって、このヘンは早く改善してもらえると日本でも大きく躍進できるんではないかと思います。
Box（枠）
目次部分は線に囲まれています。その線の太さや色、角丸具合、囲まれた部分の背景色、影の指定などを行えます。唯一翻訳されていないLoader Colorは、ページが読み込まれたときに目次を生成する間に表示される円状のプログレスアイコンの色の指定です。
Header（目次のタイトル）
目次エリアの一番上のタイトル部分のデザイン指定を行えます。Icon Colorは目次のアコーディオン機能で使う矢印アイコンの色のことで、Separator Widthはタイトル部分と目次一覧部分を分けている線の太さのことです。
一覧
-
WordPressページ内目次をElementorで作成する！の関連リンク
