Elementorのブログ投稿に目次を追加する方法

ロングフォームのブログコンテンツを作成することはSEOにとって素晴らしいことですが、投稿を感じさせることもできます。あなたがどこにいるか、どれだけ残っているかを知らずに大規模な記事をスクロールすることは、読者にとってイライラする可能性があります。そこで、目次（TOC）が役立ちます。

目次（TOC）は地図のように動作し、読者が必要なものを迅速に見つけ、セクションにジャンプし、コンテンツ構造のより良い感覚を得るのを助けます。さらに、検索結果でリッチなスニペットを有効にすることで、SEOを高めることができます。

Elementorを使用してサイトやブログの投稿を設計する場合、特にPowerPackアドオンプラグインを使用する場合、目次を追加するのは非常に簡単です。

このガイドでは、HTMLコードやCSSを追加せずに、Elementorのブログ投稿に目次を追加する方法を紹介します。

目次を追加する理由

ハウツーに飛び込む前に、TOCがブログの投稿に賢明な追加である理由についてすぐに話しましょう。

• ユーザーエクスペリエンスの向上：読者は、興味のあるセクションに即座にジャンプできます。
• SEOのブースト：検索エンジンは、多くの場合、SiteLinksとしてTOCリンクを表示することが多く、クリックスルーレートを改善できます。
• より長いエンゲージメントを奨励する：ユーザーがナビゲーションを制御できるようにすることで、ページに長く保持します。
• 直帰率を下げる：訪問者は、簡単にスキミングできるとき、長いコンテンツに圧倒されるとは感じません。

次に、Elementorに完全に機能したスタイリッシュなTOCを追加する方法について説明しましょう。

Elementorのブログ投稿に目次を追加する方法

ステップ1：ElementorのPowerPackアドオンをインストールします

先に進む前に、WebサイトのElementor用のPowerPackアドオンをインストールしてアクティブ化したことを確認してください。詳細については、PowerPack Addons Proをインストールしてアクティブ化する方法に関するガイドをご覧ください。

ステップ2：目次ウィジェットを有効にします

プラグインがアクティブになったら、TOCウィジェットが実際に有効になっていることを確認することをお勧めします。

これを行うには、WordPressダッシュボードのElementor >> PowerPack >>要素に移動します。そこから、「目次」ウィジェットを探し、その隣のトグルがオンになっていることを確認してください（青）。

これで、Elementorで使用する準備ができました。

ステップ3：Elementorで単一の投稿テンプレートを作成します

すべてのブログ投稿で一貫して目次を適用するには、単一の投稿テンプレート内に追加することをお勧めします。

方法は次のとおりです。

• テンプレートに移動>>新しい追加。
• ドロップダウンメニューから、単一の投稿を選択します。
• テンプレートに「ブログレイアウト」や「投稿テンプレート」などの名前を付け、[テンプレートの作成]をクリックします。

Elementorは、空白のキャンバスから始めたいか、事前に構築されたレイアウトを使用するかどうかを尋ねます。

ステップ4：事前に設計された投稿テンプレートを使用する（オプション）

レイアウトをゼロから構築したくない場合は、Elementorを既製のテンプレートを簡単に挿入できます。事前に設計されたオプションのいずれかを選択します。通常、投稿タイトル、特集画像、著者ボックス、ポストコンテンツなどの必須要素が含まれます。

ブログのデザインに合わせて、これらを後で変更することができます。

ステップ5：目次ウィジェットをテンプレートに追加します

次に、目次ウィジェットを追加する必要があります。

Elementorパネルでは、 「目次」を検索します。ウィジェットが表示されたら（コーナーのPPアイコンを探します）、レイアウトにドラッグしてドロップします。

目次（TOC）を配置する一般的なスポットは、投稿タイトルまたは特集画像のすぐ下にありますが、コンテンツにとって意味のある場所に配置できます。

ウィジェットを追加すると、投稿からすべての見出し（H2やH3など）を自動的に検出して表示します。

ステップ6：コンテンツ設定をカスタマイズします

ページにウィジェットを使用すると、投稿コンテンツのすべての見出しのリストが表示されます。それでは、目次をパーソナライズしましょう。

[コンテンツ]タブには、いくつかの設定があります。

目次（TOC）のタイトルを「クイックナビゲーション」や「このページ上」などに変更できます。 SEOとアクセシビリティについて考えている場合は、タイトルのHTMLタグを調整して、階層にどのように適合するかに応じて、H2またはH3として設定することもできます。

次に、特定の見出しレベルを含める、または除外する設定があります。たとえば、H2SとH3Sのみを表示し、H4以下をスキップする必要があります。また、リストスタイルを選択したり、構造化されたステップバイステップの感触を求めて数字を使用したり、より最小限の外観にしたりすることができます。

ステップ7：追加機能を探索します（オプションですが便利）

PowerPack Table of Contentsウィジェットには、ユーザビリティとデザインの両方を強化するのに役立つ機能が詰め込まれています。

目次（TOC）を折りたたむことができます。これは、モバイルユーザーやレイアウトを清潔に保つのに最適です。展開/崩壊するアイコンを追加し、モバイル、タブレット、デスクトップ、またはすべてのデバイスでウィジェットがいつ崩壊するかを指定します。

階層ビューオプションもあります。これは、親の見出しの下にサブヘディングをインデントすることにより、H2、H3S、およびH4Sの関係を示しています。詳細な投稿がある場合は、目次（TOC）を作成すると、より整理され、スキャンが簡単になります。

より長い投稿の場合、スクロールで粘着性のTOCを有効にすることは非常に役立ちます。ユーザーがスクロールするときにTOCを表示して、いつでもセクション間でジャンプできるようにします。ユーザーが投稿の先頭にすばやく戻るために、ウィジェット内の上部ボタンにスクロールを追加することもできます。

サイトにスティッキーヘッダーがある場合は、ユーザーがTOCリンクをクリックしたときに見出しが隠されないように、スクロールオフセTを調整することを検討してください。

ステップ8：サイトに合わせてTOCをスタイルします

機能がセットアップされたので、ウィジェットが素晴らしく見えることを確認しましょう。 [スタイル]タブには、カスタマイズオプションの完全なスイートがあります。

• ボックススタイリング： TOCの背景色、ボーダータイプ、境界半径を調整し、ボックスシャドウを追加して目立つこともできます。きれいなレイアウトに行く場合は、微妙な境界線と軽い背景が美しく機能します。
• ヘッダースタイリング： TOCタイトルをカスタマイズしたいですか？テキストのアライメントを設定し、パディングを変更し、色、タイポグラフィ、アイコンを調整できます。セパレーターラインを追加して、幅と色をカスタマイズすることもできます。
• リストスタイリング：これは、セクションのリンクの実際のTOCアイテムをカスタマイズする場所です。パディングを調整し、テキストと見出しのタイポグラフィを変更し、サブヘディングのインデントを選択し、マーカースタイル（弾丸の色やサイズなど）をパーソナライズします。

これらのスタイリングオプションを使用すると、TOCがドロップされたものではなく、Webサイトの自然な拡張機能のように感じることができます。

ステップ9：条件を公開および設定します

すべてがあなたが望むように見えるようになったら、先に進んで公開します。その後、Elementorはこのテンプレートを表示する場所を尋ねます。

条件「>>すべての投稿を含める」を選択して、テンプレート（およびその中のTOC）がサイトのすべてのブログ投稿に適用されるようにします。

[Save＆Clos E]をクリックすると、完了です！

PowerPack Table of Contentsウィジェットの重要なハイライト

PowerPack Table of Contentsウィジェットには、読書体験を向上させるだけでなく、Webサイトで目次と機能を完全に制御できる便利な機能が詰め込まれています。

テーブルタイトルを簡単にカスタマイズします

あなたの投稿のトーンや目的に適しているように、目次のテーブルのタイトルをパーソナライズすることができます。 「クイックナビゲーション」、「コンテンツ」、または「セクションへのジャンプ」という名前を付けたい場合でも、PowerPack TOCウィジェットを使用すると、数回クリックして更新できます。

見出しを含めるか除外します

このウィジェットの傑出した機能の1つは、見出しレベルの管理に関して柔軟性を与えることです。 TOCに表示する見出しタグ（H1、H2、H3など）を選択できます。さらに良いことに、組み込みのCSSセレクター機能を使用して、テーブルから特定のセクションまたは見出しを特に除外するか、除外することができ、表示されるものを完全に制御できます。

お好みのリストスタイルを選択してください

クリーンでミニマリストのリストにコンテンツを提示するか、より構造化された番号付きの形式を作成したいですか？オプションがあります。ウィジェットを使用すると、デザインの好みに応じて、リストスタイルを「なし」、「弾丸」、または「数字」に設定できます。

長い見出し？問題ない

見出しが長くなる傾向がある場合は、心配しないでください。ワードラップオプションを有効にして、テキストがきちんと壊れていることを確認でき、目次（TOC）は清潔で整合したままです。

デバイスの種類に基づいてTOCを崩壊させます

デバイスの種類（モバイル、タブレット、またはデスクトップ）に応じて、デフォルトで目次をデフォルトで崩壊させることを選択できます。これは、小さな画面で物事を整頓するのに役立ちます。さらに、階層ビューを有効にして、ネストされた見出し（H2の下のH3など）を明確にインデントおよび構造化できるようにします。

長い投稿の粘着性のテーブル

長い形式のコンテンツの場合、ユーザーとスクロールする目次（TOC）を持つことはゲームチェンジャーです。 Sticky TOC機能により、サイトの訪問者がページを下にスクロールすると、コンテンツリストが表示されたままになります。これにより、上部にスクロールすることなく、いつでもセクション間でジャンプしやすくなります。

ブログ投稿で目次を使用するためのベストプラクティス

TOCを最大限に活用するには、これらのヒントを念頭に置いてください。

• 適切な見出し構造を使用します：メインセクションのH2Sから始めて、必要に応じてH3SとH4Sが続きます。読者と目次（TOC）自体を混乱させる可能性があるため、H2からH4に移動するなどのレベルをスキップしないでください。
• 見出しを明確かつ簡潔に保ちます。読者はこれらを使用して投稿をナビゲートすることを忘れないでください。目次（TOC）を短くして折りたたみやすいままにします。特にモバイルユーザーにとって、崩壊を可能にすると、レイアウトを清潔に保つことができます。
• すべてのデバイスでプレビュー：目次（TOC）が正しく表示され、デスクトップ、タブレット、携帯電話で適切に機能することを確認します。

よくある質問

質問。モバイルデバイスに目次（TOC）を隠すことはできますか？

Ans。はい、「崩壊」設定を使用して、モバイルまたはタブレットでデフォルトでTOCを最小化することができます。

質問。投稿に新しいセクションを追加すると、自動アップデートしますか？

Ans。はい！ウィジェットは、コンテンツから見出しのタグを動的にプルするため、自動的に更新されます。

質問。このウィジェットをブログ投稿外に使用できますか？

Ans。絶対に。任意のElementorレイアウトページ、カスタム投稿タイプ、または製品の説明に追加することもできます。

ラッピング！

目次は単なる設計機能ではありません。読者の体験を向上させ、SEOを後押しし、コンテンツをより魅力的にすることができるユーザビリティのアップグレードです。

ElementorおよびPowerPackアドオンを使用すると、目次（TOC）を追加およびカスタマイズするのは驚くほど簡単です。 1つのコードを書くことなく、それがどのように見えるか、振る舞うかを完全に制御できます。

ElementorのPowerPackアドオンでさらに多くのことができます。 Elementorページをカスタマイズするために使用できる70を超えるクリエイティブウィジェットがあります。 ElementorのPowerPackアドオンの詳細については、こちらをご覧ください。