Diviレイアウトブロックを使用してブログ投稿のクリック可能な目次を作成する方法

クリック可能な目次をブログ投稿に追加することは、ユーザーエクスペリエンスを向上させるための優れた方法です。 多くの場合、ブログ投稿の目次では、アンカーリンクを使用して、ユーザーがコンテンツ内を移動できるようにします。 また、目次（アンカーリンク付き）は、基本的なHTMLを使用して作成するのが非常に簡単です。 ただし、カスタムデザイン/ CSSを追加してカスタマイズするのは、難しい場合があります。 これは、Diviレイアウトブロックが役立つところです。

このチュートリアルでは、アンカーリンクを使用してユーザーを投稿全体の指定された見出しに誘導する単一のブログ投稿（グーテンブルク）のクリック可能な目次を設計します。 これを行うには、Divi Layoutブロックを使用して、Diviビルダーのすべての強力な設計ツールを自由に使用できる目次を作成します。

始めましょう！

スニークピーク

再利用可能な目次レイアウトブロックを無料でダウンロード

このチュートリアルの目次レイアウトブロックに手を置くには、最初に下のボタンを使用してそれらをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

ダウンロードを使用してこのレイアウトブロックをサイトにインポートする方法

これらの再利用可能なDiviImage Layout Blockをサイトにインポートするには、まず、ダウンロードファイルを解凍する必要があります。 そこに、サイトにインポートする必要がある3つのJSONファイルがあります。

デフォルトのエディター（Gutenberg）を使用して投稿を編集します。 ページの右上にある[その他のツールとオプション]メニューを開き、[すべての再利用可能なブロックを管理する]を選択します。

次に、[JSONからインポート]ボタンをクリックします。 ダウンロードフォルダからJSONファイルの1つを選択し、インポートボタンをクリックします。

完了したら、グーテンベルク内に新しいブロックを追加します。 インポートされた再利用可能なレイアウトブロックは、[再利用可能]オプションの切り替えで見つけることができます。 「目次」という名前のページをクリックするだけで、投稿に追加できます。

それでおしまい！

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しい投稿を作成し、デフォルトのエディター（Gutenberg）を使用して、いくつかのモックコンテンツ（タイトル、見出し、段落、注目の画像など）を追加します。 それぞれの下にコンテンツを含む少なくとも3つの見出しブロックを作成するようにしてください。 目次にアンカーリンクを追加するので、投稿のさらに下にリンクするには3つの見出しが必要です。

その後、開始する準備が整いました。

Diviレイアウトブロックを使用したブログ投稿のクリック可能な目次の作成

Diviレイアウトブロックを追加

まず、ブログ投稿コンテンツの上部に新しいDiviレイアウトブロックを追加します。

次に、[新しいレイアウトの作成]ボタンをクリックします。 これにより、レイアウトブロックのDiviビルダーであるレイアウトエディターがデプロイされます。

行を追加する

レイアウトエディターで、1列の行を追加してデザインを開始します。

トップディバイダーを追加

カラム内に、仕切りモジュールを追加します。 これは、目次をフレーム化するために使用する2つの仕切りのうちの1つになります。

仕切りの設定

次に、仕切りの設定を次のように更新します。

• 線の色：#eeeeee
• 線の位置：垂直方向の中央
• 仕切りの重量：3px
• 幅：25％
• パディング：上30px、下30px

ボトムディバイダーを追加

2番目の仕切りを作成するには、前の仕切りを複製します。

宣伝文句を使用して目次の見出しを作成する

仕切りが配置されたら、目次の見出しを作成しましょう。

2つの仕切りの間に新しい宣伝文句モジュールを追加します。

宣伝文の内容

宣伝文の設定を開き、次のようにコンテンツを更新します。

• タイトル：「目次」
• アイコンを使用：はい
• アイコン：スクリーンショットを参照

宣伝文のデザイン設定

[デザイン]タブで、以下を更新します。

• アイコンの色：#eeeeee
• 画像/アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：100px
• タイトル見出しレベル：H2
• コンテンツの幅：100％
• 高さ：38px

宣伝文の高さがアイコンの高さよりも低いことに注意してください。 これにより、次に追加する宣伝文の横にあるアイコンを下に伸ばすことができます。

タイトルの宣伝文句が配置されたら、目次を構成するクリック可能なアイテム/宣伝文句の追加を開始する準備が整いました。 これを行うために、宣伝文句モジュールも使用します。

アイテム＃1の宣伝文を追加

タイトルの宣伝文の下に新しい宣伝文モジュールを追加します。

宣伝文の内容

宣伝文の設定を開き、デフォルトの本文コンテンツを取り出して、タイトルのみが表示されるようにします。 タイトルは、投稿のさらに下にリンクするセクション/見出しに対応するテキストのブロックを追加する場所です。

次に、デスクトップの右矢印アイコンでコンテンツを更新します。

アイコンのホバーオプションを展開し、ホバー時にアイコンを下矢印に変更します。 これは、リンクが投稿の下の場所にスクロールすることを強調する、優れたマイクロインタラクションになります。

宣伝文句のデザイン

これで、宣伝文句モジュールを好きなように設計できます。 この例では、次のように宣伝文の設定を更新しましょう。

• アイコンの色：＃b856c7
• 円のアイコン：はい
• 円の色：#ffffff
• 円の境界線を表示：はい
• 円の境界線の色：＃b856c7
• 画像/アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：16px
• テキストテキストサイズ：16px
• タイトルラインの高さ：2em
• コンテンツの幅：100％
• マージン：残り118px
• パディング：10pxトップ
• パディング（ホバー）：10px左

より多くのアイテムのために宣伝文句を複製する

最初の宣伝文句が完成したので、投稿に含めるクリック可能なリンクの数に応じて、必要な回数だけ複製することができます。 今のところ、それを2回複製して、目次用に合計3つのアイテムを作成しましょう。

アンカーリンクURLの追加

現在、宣伝文句はクリックできないため、それぞれに必要なアンカーリンクURLを追加する必要があります。 アンカーリンクのURLは常にハッシュタグ（＃）で始まり、その後に含めるIDが続きます。

アンカーリンク#one

簡単にするために、リストの最初の宣伝文にアンカーリンク「#one」を追加します。 これを行うには、リストの最初の宣伝文（タイトルの宣伝文ではない）の設定を開き、以下を更新します。

• モジュールリンクURL：#one

アンカーリンク＃two

次に、2番目の宣伝文の設定を開き、次のリンクを追加します。

• モジュールリンクURL：#two

アンカーリンク＃three

最後に、次のリンクを3番目の宣伝文句アイテムに追加します。

• モジュールリンクURL：＃three

間隔を狭める

行設定

現在、行の要素間に少しスペースがありすぎています。 これを修正するには、行設定を開き、ガター幅とパディングを次のように更新します。

• 側溝幅：1
• 幅：100％
• パディング：0px上、0px下

セクション設定

セクションのパディングも削除しましょう。 セクション設定を開き、以下を更新します。

• パディング：0px上、0px下

レイアウトを保存する

これで目次のデザインは完了です。 必ずレイアウトエディタを保存して終了してください。

これで、デフォルトのブロックエディタ内に新しい目次が表示されます。

投稿見出しへのHTMLアンカーの追加

目次のアイテムを構成する各宣伝文にアンカーリンクURLを追加しました。 次に、対応するCSS ID（またはHTMLアンカー）を投稿のさらに下の見出しブロックに追加する必要があります。

HTMLアンカー1

リンク/ジャンプする最初のヘッダーを含むブロックをクリックします。 次に、そのブロックの設定を開きます。 [詳細オプション]トグルで、[HTMLアンカー]入力ボックスに「1」を追加します。

HTMLアンカー：1つ

最初の宣伝文句には、これにリンクするURL「#one」があることを忘れないでください。 ただし、このHTMLアンカーにハッシュタグを追加しないでください。 必要ありません。）

HTMLアンカー2

次に、2番目の見出しブロックを選択し、以下を更新します。

• HTMLアンカー：2つ

HTMLアンカー3

最後に、3番目の見出しブロックを選択し、次のようにHTMLアンカーを追加します。

• HTMLアンカー：3つ

最終結果

ライブ投稿で最終結果を見てみましょう。

そして、これがアンカーリンクがどのように機能するかです。 アイコンのホバー効果と、リンクがページの下の対応するアンカーにスムーズにスクロールする方法に注目してください。

再利用可能なレイアウトブロックとして目次を追加する

このレイアウトブロックを今後の投稿のテンプレートとして引き続き使用する場合は、レイアウトブロックを再利用可能なレイアウトブロックとして保存することをお勧めします。 これにより、組み込みのブロックリストから「目次」ブロックを簡単に追加できます。

これを行うには、目次を含むDivi Layout Blockをクリックし、その他の設定メニューを開きます。 次に、「再利用可能なレイアウトブロックに追加」を選択します。

再利用可能なブロックの名前（「目次」）を入力し、[保存]をクリックします。

これで、投稿に新しいブロックを追加するときに、[再利用可能なブロック]リストでブロックを使用できるようになります。

これで、レイアウトブロックは、投稿の目次を作成するための便利なテンプレートとして機能します。 特定の投稿用にカスタマイズする前に、ブロックを通常のレイアウトブロックに変換することを忘れないでください。 再利用可能なレイアウトブロックを変更する必要はありません。

これを行うには、再利用可能なレイアウトブロックのその他の設定メニューを開き、「通常のブロックに変換」を選択します。

最終的な考え

この目次Diviレイアウトブロックが、それらを必要とするのに十分な長さの投稿に役立つことを願っています。 これを動的に行うことに興味がある場合（投稿の見出しに基づいて目次を自動的に作成するなど）、Table of ContentsPlusのようなプラグインがあります。 この投稿は、Diviを使用したデザインが好きで、投稿ごとに目次を作成することを気にしない人を対象としています。

コメントでお返事をお待ちしております。

乾杯！