Diviでスムーズなスクロールアンカーリンクを使用してレスポンシブ固定サイドバーを構築する方法

公開: 2018-12-31

サイドバーは、以前ほど人気がありません。多くの場合、それらは役立つよりも気が散ることになります。ただし、特に長いコンテンツを処理する場合は、サイドバーが完全に理にかなっている場合があります。そのため、私は非常に意味のあるサイドバーの作成に着手しました。

今日は、Divi Builderを使用して、スムーズにスクロールするアンカーリンク（またはジャンプリンク）を備えたレスポンシブな固定（またはスティッキー）サイドバーを作成する方法を紹介します。サイドバーは表示されたままであり、アンカーリンクはページ上のさまざまなセクションにスムーズにスクロールするため、サイドバーはコンテンツと結合したままであり、便利なUX機能になります。ドキュメントのアウトラインと同様に、この組み合わせにより、Webページのコンテンツがよりアクセスしやすく読みやすくなります。それはそれらの長いスクロールページのためのさわやかな解決策です。

見てみな！

スニークピーク

これが私たちが一緒に構築するもののスニークピークです。

コンセプト

私と同じようにGoogleドキュメントに住んでいる人は、ドキュメントのさまざまな見出しにジャンプするクリック可能なアウトラインを備えた固定サイドバーを簡単に展開できる便利なドキュメントアウトラインツールをご存知でしょう。情報をすばやく見つけるのに役立つので、私はそれが大好きです。これと同じ機能をあなたのウェブサイトに持ち込むのはクールだと思いました。

始めるために必要なもの

このチュートリアルで本当に必要なのはDiviだけです！また、DiviBuilderから無料でアクセスできるFoodRecipes LayoutPackのレシピページも使用します。

ページへのレイアウトの追加

私たちのYoutubeチャンネルを購読する

開始するには、先に進んで新しいページを作成し、DiviBuilderをデプロイします。「既成のレイアウトを選択する」オプションを選択します。 [ライブラリからロード]ポップアップから、[Food Recipes Layout Pack]を選択し、クリックして[レシピ]ページを使用します。

レイアウトが読み込まれたら、クリックしてフロントエンドでビルドします。

新しいセクションの作成

フロントエンドのDiviBuilderから、新しいセクションを作成し、レイアウトの最上部にドラッグします。

レイアウトのヘッダーセクションにあるボタンをコピーして、作成した新しいセクションの1列の行に貼り付けます。

ボタン設定を開き、[詳細設定]タブの[メイン要素]に次のカスタムCSSを追加します。

display: block !important;

これにより、ボタンを列の幅全体に広げることができます。

ボタンのテキストを「はじめに」に変更します。次に、ボタンのリンクURLに次を追加します。

＃前書き

これは、アンカーリンクを作成する方法です。ハッシュタグ（＃）は、CSSIDにリンクするブラウザを示します。次のテキスト「はじめに」は、レイアウトのセクションの1つに追加するCSSIDの名前に対応します。 CSS IDの名前は、任意の名前にすることができます。後でセクションに指定するCSSIDと一致することを確認してください。

ボタンを複製してから、ボタンに新しいボタンテキストと新しいボタンリンクURLを与えるプロセスを繰り返します。これはページの別のセクションにジャンプするアンカーリンクになるため、CSS ID（「＃」の後のテキスト）が一意であり、後でセクションに付ける名前に対応していることを確認してください。

このボタンの場合、ボタンのテキストを「材料」に変更し、ボタンのリンクURLを「#ingredients」に変更します。

ボタンをもう一度複製してから、新しいボタンにボタンテキスト「Nutrition」を付け、ボタンのリンクURLを「#nutrition」に変更します。

ボタンをもう一度複製してから、新しいボタンにボタンテキスト「Instructions」を付け、ボタンリンクのURLを「#instructions」に変更します。

今のところ、これですべてです。このセクションに戻って、少し固定されたサイドバーに変えます。

セクションと行へのCSSIDの追加

アンカーリンクを使用してすべてのボタンを作成したので、対応するCSSID名をセクションと行に追加する準備が整いました。

アンカーリンクは、対応するCSSIDを持つページ上の任意の要素に自動的にジャンプします。 CSS IDは、インラインテキスト、モジュール、行、またはセクションに適用できます。 HTMLを使用して見出しにCSSIDを追加する場合は、次のようになります。

<h2 id="introduction">Introduction</h2>

ただし、ページのセクションにジャンプしたいので、CSSIDをページの特定のセクションに追加できます。これにより、ユーザーは十分に快適な表示スペースを利用できるため、訪問者はページ上のどこにいるかを簡単に認識できます。インラインテキストまたはモジュールにジャンプすると、訪問者が混乱する可能性があります。

前に説明したように、作成した各ボタンURLは、ジャンプする必要のあるセクションのCSSIDに対応することを目的としています。

「紹介」ボタンの場合、紹介コンテンツを含むページのセクションにCSSIDを追加する必要があります。これを行うには、ページの3番目のセクション（ヘッダーのすぐ下のセクション）のセクション設定を開き、[詳細設定]タブの下に次のCSSIDを追加します。

CSS ID：はじめに

これは、前に作成した[はじめに]アンカーリンクボタンに対応します。

同じセクションで、「材料」という見出しを含む行を見つけます。次に、行設定を開き、次のCSSIDを追加します。

CSS ID：材料

これは、前に作成した[材料]アンカーリンクボタンに対応します。

「栄養」という見出しのある次のセクションまでスクロールダウンし、セクション設定を開きます。次に、次のCSSIDを追加します。

CSS ID：栄養

これは、前に作成した栄養アンカーリンクボタンに対応します。

最後に、「ステップバイステップの説明」というタイトルのレイアウトの次のセクションまでスクロールダウンします。次に、セクション設定を開き、[詳細設定]タブに次のCSSIDを追加します。

CSS ID：手順

これは、前に作成した手順のアンカーリンクボタンに対応します。

変更を保存します。

今こそ、アンカーリンクが機能しているかどうかを確認する良い機会です。新しいタブでページを開き、上部のボタンをクリックして、ページ上の対応する場所にジャンプ/スクロールすることを確認します。

それらが機能していない場合は、戻ってCSS IDが正しく、一致していることを確認してください。

固定サイドバーレイアウトの作成

セクションに左マージンを追加して、サイドバー用のスペースを作成します

ページの上部にアンカーリンクがあると、目次などに適しています。ただし、このユースケースでは、ユーザーがリンクの1つをクリックした後、ページの先頭にスクロールして戻る必要がないように、これらのアンカーリンクを常にユーザーに表示したいと考えています。固定サイドバーは、ユーザーがアンカーリンクをクリックしてもページの側面に固定されたままになるため、この問題を解決します。

ただし、サイドバーを配置する前に、ページの左側にサイドバー用のスペースを作成する必要があります。これを行うために、レイアウトの各セクションに左マージンを追加します。

各セクションに追加する左マージンの量はサイドバーの幅と同じになるため、サイドバーの幅を決定するときが来ました。この例では、20％の幅で十分です。

2番目のセクション（アンカーリンクボタンのすぐ下にあるセクション）の設定を開き、次のカスタムマージンを追加します。

カスタムマージン：残り20％

設定を保存する前に、[カスタムマージン]オプションを右クリックし、[カスタムマージンのコピー]をクリックして設定を保存します。

ページレイアウト全体の残りの各セクションで、セクションを右クリックして[カスタムマージンを貼り付け]をクリックして、カスタムマージンをセクションに貼り付けます。

これにより、アンカーリンクボタンを含む最上部のセクションを除くすべてのセクションに20％の左マージンが与えられます。

固定サイドバーの作成

サイドバーを作成するには、ページの左側に固定位置を指定する必要があります。つまり、基本的に、上部を固定サイドバーに変えます。これを行うには、上部セクションの設定を開き、以下を更新します。

[デザイン]タブで、高さと幅を更新します…

幅：20％
高さ：100％

[詳細設定]タブで、位置を更新します…

位置：固定
垂直オフセット：80px

これにより、セクションはページの20％の幅で固定位置になります。また、ヘッダーナビゲーションの高さに対応するために、セクションをページの左側に配置し、ページの上部から80pxに配置します。 100％の高さは、セクションがページの高さ全体に及ぶことを保証します。

次に、別のブラウザタブでページを表示して、機能を確認します。ページを下にスクロールしても、サイドバーは固定されたままで、アンカーリンクボタンをクリックして、さまざまなセクションに簡単に移動できます。

フッターオーバーラップの修正

セクションがページ下部の下部フッターバーと重なっていることに気付いたかもしれません。

この問題に対処する方法はいくつかあります。たとえば、セクションから「高さ：100％」を削除したり、ページ設定にCSSを追加して、フッターバーの幅を調整したりできます。ただし、セクションの高さを100％に保ちたい場合は、セクションの背景色を取り除くのが簡単です。サイドバーに使用しているセクションのセクション設定を開き、次の背景色を追加します。

背景色：rgba（255,255,255,0）

サイドバーの色を変更する場合は、ページ設定を開いてコンテンツ領域の背景色を変更できます。

セクションの背景色は透明なので、ページのコンテンツ領域の背景色が透けて見えます。また、他のすべてのセクションには背景色があるため、下部のフッターバーと重なることなく、サイドバーセクションを通してのみ表示されます。

モバイル向けの調整

サイドバーのスペースがなく、ページの上部にリンクがあると、ユーザーがアンカーリンクをクリックするたびに上にスクロールする必要があるため、このデザインはスマートフォンにはあまり意味がありません。ただし、このデザインはタブレットでも機能しますが、これらのアンカーリンク用にさらにスペースを作成する必要がある場合があります。これを行うには、セクションサイドバーの行の行設定を開き、以下を更新します。

カスタム幅：100
カスタムパディング（デスクトップ）：左10％、右10％
カスタムパディング（タブレット）：左0％、右0％

今、私たちがしなければならないのは、スマートフォンのセクションを非表示（または無効化）することだけです。これを行うには、セクション設定を開き、[詳細設定]タブに移動し、チェックボックスをクリックしてスマートフォンで無効にします。

それでおしまい。これで、スムーズにスクロールするアンカーリンクを備えたレスポンシブな固定サイドバーメニューができました。

最終結果

それでは、最終結果を確認しましょう。

そして、これがタブレットでのレイアウトの様子です。

固定要素とアンカーリンクの詳細

このチュートリアルが役に立った場合は、以下の関連チュートリアルをご覧ください。

アンカーリンクを使用してDiviでできる5つのクールなこと
Diviページ要素をスティッキーにする方法
WordPressのサイドバーに固定ウィジェットを追加する方法
Diviナビゲーションを下から開始し、スクロール時に上に固定する方法
Diviフッターを修正する方法
Diviでフローティングポップアウトメニューを作成する方法

最終的な考え

この設定の利点は、さまざまなアンカーリンク（または必要なもの）を持つ任意のページに固定サイドバーを簡単に追加できることです。サイドバーは基本的にDiviセクションであるため、組み込みの設定を使用してサイドバーをカスタマイズしたり、行を追加したり、必要なモジュールの任意の組み合わせを使用したりできます。

この設定は、メンバーシップコース、チュートリアル、FAQ、ポートフォリオ、または長いブログ投稿に最適です。 1ページのWebサイトにも使用できます。他に共有する用途はありますか？コメントで彼らが何であるかを聞くことに興味があります。

乾杯！