Diviでユニークなアンカーリンクナビゲーションのためにスクロールにスティッキーな見出しを積み重ねる方法

ディビの粘着性のあるオプションは、新しいデザインと機能への扉を開き続けています。 このチュートリアルでは、スティッキーな見出しをアンカーリンクとして使用して、ユーザーをWebページのコンテンツに誘導する創造的な方法を設計します。 スティッキーな見出しは、表示されているコンテンツと、上または下にあるコンテンツの有用な識別子として、ブラウザウィンドウの上部と下部に貼り付けられます。 これらのスティッキーヘッダーにアンカーリンクを追加することで、ユーザーがそれらのスティッキーヘッダーをクリックして、対応するセクションにジャンプできるようにすることができます。 これは、プロセス（レシピのステップなど）を表示するページのユーザーエクスペリエンスを向上させるための優れた方法です。

スティッキーヘディングアンカーリンクナビゲーションを構築するために、Diviの組み込みオプションのみを使用します。 デスクトップとモバイルの機能はどちらもユニークです。 そして、結果はあなたを驚かせるかもしれません！

始めましょう！

スニークピーク

これは、このチュートリアルで作成するアンカーリンクナビゲーションの付いたスティッキーな見出しを示しています。

スティッキーヘディングアンカーリンクナビゲーションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

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

始めるために必要なもの

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

• まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
• WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
• 「既成のレイアウトを選択」オプションを選択します。

• [ライブラリからロード]ポップアップから、Meal Kit LayoutPackからMealKit RecipePageレイアウトを見つけてアップロードします。

パート2：レイアウトの変更

行の削除

レイアウトが読み込まれたら、「手順」というラベルの付いた2番目のセクションの下の2行を削除します。

これで、レシピの「step-01」のコンテンツを含む1つの行ができました。

新しい行を作成してコンテンツで埋める

スティッキーな見出しは、2列の行の左側の列に配置されます。 この設定を作成するには、現在の行の下に新しい0ne-fourths3 / 4列の行を追加します。

mulitselectを使用して（cmd / ctrlを押しながらクリック）、上記の既成のレイアウト行でレシピのステップ1のコンテンツを含む3つのモジュールを選択します。

次に、作成した新しい行の右側の列にこれらのモジュールをドラッグします。

完了したら、上の空の行を削除します。

パート3：各行のスティッキー見出しの作成

このレイアウトには4つの行が含まれ、各行の左側の列にスティッキーヘッダーが含まれます。 最初の行の最初のスティッキー見出しを作成した後、行を複製して、コンテンツの追加の各行を作成します。

最初の行のスティッキー見出しの作成（ステップ1）

手順1の最初のスティッキー見出しを作成するには、行の左側の列に新しいテキストモジュールを追加します。

次に、H4見出しテキストのデザイン設定を次のように更新します。

• 見出し4フォントの太さ：太字
• 見出し4フォントスタイル：TT
• 見出し4テキストの配置：中央
• 見出し4テキストサイズ：15px
• 見出し4文字の間隔：3px
• 見出し4行の高さ：2em

次に、間隔と角の丸みを次のように更新します。

• マージン：0px
• パディング：10px
• 丸みを帯びた角：3px

注：テキストサイズ（15px）、行の高さ（2em、30pxに等しい）、パディング（10px）、およびデフォルトのH4下マージン（10px）のため、テキストモジュールの結果の高さは50px（30px + 10px + 10px）。 これは、各スティックの上下の位置を今後どれだけオフセットするかを知るために注意することが重要です。

[詳細設定]タブで、次のスティッキーオプションを更新します。

• スティッキーボトムオフセット：150px（デスクトップ）、0px（タブレット）
• スティッキーの上限：セクション（デスクトップ）、なし（タブレット）
• スティッキーの下限：セクション（デスクトップ）、行（タブレット）
• 周囲の粘着要素からのオフセット：いいえ

この手法により、スティッキー見出しをクリックしたときに、アンカーリンクが行をブラウザウィンドウの上部に確実にプルします。

次に、スティッキー状態の背景色を更新します。

• 粘着性のある背景色：＃febd2d

次に、スティッキー状態のZインデックスを更新します。

• Zインデックス（スティッキー）：10003

これにより、モバイルでスタックするときはいつでも、見出しが他のスティッキー見出しの上に留まるようになります。

模擬コンテンツの更新

行を複製してさらに手順を進める前に、列2の一番上のテキストモジュールのH4見出しを取り出し、列2の2番目のテキストモジュール（段落テキストを含む）をコピーして、画像モジュールの下に3回貼り付けます。 これにより、スクロールするコンテンツが増えます。

行1が重複しています

手順2の2番目の行を作成するには、行1を複製します。

2行目のスティッキー見出しを作成する（ステップ2）

重複（2番目）行の列1の見出しのテキスト設定を開き、H4テキストを「Step-02」に変更します。

次に、テキストのスティッキーオプションを次のように更新します。

• スティッキートップオフセット：50px（デスクトップ）、0px（タブレット）
• スティッキーボトムオフセット：100px（デスクトップ）
• スティッキーの上限：セクション（タブレット）

次に、スティッキー状態のZインデックスを更新します。

• Zインデックス（スティッキー）：10002

行2が重複しています

手順3の3番目の行を作成するには、行2を複製します。

3行目のスティッキー見出しを作成する（ステップ3）

重複（3番目）行の列1の見出しのテキスト設定を開き、H4テキストを「Step-03」に変更します。

次に、テキストのスティッキーオプションを次のように更新します。

• スティッキートップオフセット：100px（デスクトップ）
• スティッキーボトムオフセット：50px（デスクトップ）

次に、スティッキー状態のZインデックスを更新します。

• Zインデックス（スティッキー）：10001

行3が重複しています

手順4の4番目の行を作成するには、行3を複製します。

4行目のスティッキー見出しを作成する（ステップ4）

重複（3番目）行の列1の見出しのテキスト設定を開き、H4テキストを「ステップ-04」に変更します。

次に、テキストのスティッキーオプションを次のように更新します。

• スティッキートップオフセット：150px（デスクトップ）
• スティッキーボトムオフセット：0px（デスクトップ）

次に、スティッキー状態のZインデックスを更新します。

• Zインデックス（スティッキー）：10000

各スティッキー見出しの列Zインデックスを更新します

各スティック見出しのzインデックスを更新しますが、モバイルでのスタック順序が機能することを確認するために、各見出しの親列のzインデックスも更新する必要があります。

これを行うには、各スティッキー見出しの各親列の設定を開き（手順1〜4）、次のようにそれぞれの列のz-indexを更新します。

行1、列1

• Zインデックス：20

行2、列1

• Zインデックス：19

行3、列1

• Zインデックス：18

行4、列1

• Zインデックス：17

パート3：スティッキーヘディングアンカーリンクの作成

各見出しのアンカーリンクを作成するには、見出しのモジュールURLに対応するCSSIDを行に割り当てる必要があります。

ステップ1アンカーリンク

行1の最初のスティッキー見出しのアンカーリンクを作成するには、行1の設定を開き、次のCSSIDを追加します。

• CSS ID：1つ

次に、「step-01」見出しのテキストモジュール設定を開き、次のモジュールリンクURLを追加します。

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

ステップ2アンカーリンク

行2の2番目のスティッキー見出しのアンカーリンクを作成するには、行2の設定を開き、次のCSSIDを追加します。

• CSS ID：2

次に、「step-02」見出しのテキストモジュール設定を開き、次のモジュールリンクURLを追加します。

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

ステップ3アンカーリンク

行3の3番目のスティッキー見出しのアンカーリンクを作成するには、行3の設定を開き、次のCSSIDを追加します。

• CSS ID：3

次に、「step-03」見出しのテキストモジュール設定を開き、次のモジュールリンクURLを追加します。

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

ステップ4アンカーリンク

行4の4番目のスティッキー見出しのアンカーリンクを作成するには、行4の設定を開き、次のCSSIDを追加します。

• CSS ID：4

次に、「step-04」見出しのテキストモジュール設定を開き、次のモジュールリンクURLを追加します。

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

最終結果

最終的な考え

スティッキーな見出しだけでも、表示されているコンテンツをユーザーに認識させるのに役立ちます。 また、アンカーリンクナビゲーションとしてスティッキーな見出しを作成することは、ユーザーがステップをすばやくナビゲートできるようにする方法で、ユーザーエクスペリエンスを向上させる独自の効果的な方法です。 うまくいけば、これはユーザーにプロセスを案内するページにとって役立つデザインになるでしょう。

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

乾杯！