1ページのDiviWebサイトのスクロールでアクティブリンクを作成する方法

公開: 2017-08-30

今日のチュートリアルでは、訪問者がページを下にスクロールすると、表示されているセクションに対応するメニューリンクが強調表示されるように、垂直ナビゲーションリンクのスタイルを設定する方法を示します。 これは、Webデザインとユーザーの行動の間に少しの双方向性を追加するちょっとした効果です。 この方法は、1ページのWebサイトを作成する場合に特に効果的です。

この効果を頭の中で描くのに苦労している人のために、以下のプレビューを提供しました。

結果

この投稿をフォローした後に達成できる最終結果を見てみましょう。

アクティブなリンク

ご覧のとおり、ユーザーがページセクションをスクロールすると（およびクリックすると）、強調表示されたアクティブなリンクが自動的に変更されます。

インスピレーション

この投稿のインスピレーションは、垂直ナビゲーションに関する投稿で例として挙げたFilmschoolBerlinのWebサイトで見つかりました。 その投稿のコメントの読者は、スクロールアクティブリンク効果を作成する方法を彼らに示すように頼んだので、ここにいます！

アクティブなリンク

1ページのDiviWebサイトのスクロールでアクティブリンクを作成する方法

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

はじめに：ページスクロールからIDプラグインをダウンロードします

このデザインを実現するために、ここにある無料で評価の高いPage Scroll toIDプラグインを利用することから始めます。 [ダウンロード]ボタンをクリックして、プラグインのZIPファイルをすぐに見つけられる場所に保存します。

アクティブなリンク

ページをアップロードしてアクティブ化するIDプラグインにスクロール

次に行う必要があるのは、 WordPressダッシュボード>プラグイン>新規追加>ダウンロードしたZIPファイルを選択してアップロードすることです。

アクティブなリンク

その後、プラグインもアクティブ化することを忘れないでください。

垂直ナビゲーションを有効にする

Page Scroll to IDプラグインの設定に入る前に、まず垂直ナビゲーション（および次のステップの固定ナビゲーション）を有効にします。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [ヘッダー形式]に移動し、垂直ナビゲーションを有効にします。

アクティブなリンク

固定ナビゲーションを有効にする

次に、Webサイトの固定ナビゲーションを有効にしましょう。 スクロールでアクティブリンクを使用することの全体的なポイントは、訪問者がどのセクションにいるのかを確認することであるため、これが必要です。 WordPressダッシュボードを使用している場合は、 Divi>テーマオプション>に移動し、[全般]タブで固定ナビゲーションバーを有効にします。

アクティブなリンク

ページスクロールしてIDプラグイン設定

この部分では、最近アップロードされたプラグインに戻ります。 プラグインをアクティブ化したら、適切な設定を使用する必要があります。 設定に移動するには、プラグイン名のすぐ下にある[設定]をクリックします。

アクティブなリンク

それを行うと、アクティブなリンクがWebサイトでどのように動作するかを決定するのに役立つさまざまなオプションに気付くでしょう。 作成した例では、次の設定を使用しています。

  • WordPressメニューリンクで有効にする：はい
  • スクロール時間：200ミリ秒
  • スクロール時間の自動調整：はい
  • スクロールアニメーションの緩和：線形
  • ページ/ドキュメントの最後に到達するときは常にスムーズにスクロールします：はい
  • マウスホイールまたはタッチスワイプでページスクロールを停止する：はい
  • ページレイアウト：自動
  • 一度に1つの強調表示された要素のみを許可する：はい
  • 次の要素が表示されるまで、現在の要素を強調表示したままにします。はい
  • 次のターゲットによるハイライト：はい
  • クリックしたリンクのハッシュ値をブラウザのURL /アドレスバーに追加します：はい
  • 別のページから/にスクロール：はい
  • ページの読み込み時にターゲットにスクロールするための0ミリ秒の遅延
  • 他のスクリプトがプラグインのリンクを処理しないようにします（可能な場合）：はい
  • アンカーポイントターゲットの正規化：はい

アクティブなリンク

アクティブなリンク

アクティブなリンク

CSSIDとクラスをセクションに追加する

次に行う必要があるのは、さまざまなCSSIDとIDCSSクラスのページスクロールを1ページのさまざまなセクションに割り当てることです。 これを行うには、各セクションの設定を開き、[詳細設定]タブに移動します。 [詳細設定]タブで、セクションに使用するさまざまなCSSIDを決定します。 それが機能するためには、ポケットベルの各セクションに異なるCSSIDを割り当てる必要があることを知っておいてください。

activelinks

この例では、最初のCSSIDとして「home」を使用しています。 ただし、CSSクラスは各セクションで同じであり、セクションをPage Scroll toIDプラグインにリンクするのに役立ちます。 CSSクラス名は「ps2id」です。

メニュー項目にIDを追加

次に、メニュー項目を作成し、それらがセクションおよびPage Scroll toIDプラグインと一致していることを確認します。 WordPressダッシュボードを使用している場合は、 [外観]> [メニュー]に移動します。 すでにプライマリメニューがある場合は、そのメニューで作業できます。 そうでない場合は、タイトルを入力して新しいメニューを作成できます。 プライマリメニューにすることを忘れないでください。

カスタムリンクを使用する

次に、必要な結果を達成するためにカスタムリンクが必要になります。 最初のカスタムリンクを追加することから始めます。 以下のスクリーンショットに示すように、Webサイトに続けて最初のセクションIDをリンクフィールドに追加します。

CSSクラスを有効にする

次に行う必要があるのは、過去に行ったことがない場合は、メニュー項目のCSSクラスをアクティブにすることです。 これを行うには、右隅にある[画面オプション]オプションをクリックします。 可能性が現れたら、CSSクラスを有効にします。

アクティブなリンク

ページスクロールを使用してIDCSSクラスに移動

メニュー項目のCSSクラスを有効にしたら、先に進んで、ページスクロールからIDクラスを各メニュー項目に手動でリンクできます。 CSSクラスは、セクションにIDを割り当てるために使用したものと同じです。つまり「ps2id」です。

アクティブなリンク

外観を変更する

この方法を使用している場合でも、プライマリメニューにあらゆる種類の変更を加えることができます。 変更を加える方法を示すために、垂直ナビゲーションの例を再作成します。

注：この投稿の冒頭で述べたように、 ページのプレビュー中に行った変更を確認することはできません。 結果を確認するには、最初にページを公開し、ライブモードで表示する必要があります。

テーマカスタマイザー

まず、[テーマカスタマイザー]> [ヘッダーとナビゲーション]> [プライマリメニュー]に移動し、プライマリメニューの外観に次の変更を加えます。

  • ロゴ画像を非表示：はい
  • ロゴの最大高さ：83
  • メニュートップマージン：0
  • テキストサイズ：14
  • 文字間隔：-1
  • フォント：Lato Light
  • フォントスタイル：大文字
  • テキストの色：#FFFFFF
  • アクティブリンクの色：#FFFFFF
  • 背景色：rgba（255,255,255,0）
  • ドロップダウンメニューの背景色：rgba（255,255,255,0）

アクティブなリンク

アクティブなリンク

カスタムCSSテーマオプション

アクティブなリンクスタイルを変更するには、カスタムCSSコードを追加する必要があります。 WordPressダッシュボードを使用している場合は、 [Divi]> [テーマオプション]> [全般]タブを下にスクロールして、CSSコードの次の行を[カスタムCSS]ボックスに貼り付けます。 

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

それに加えて、重複する透明なメニューも使用しました。これについては、この投稿で詳しく説明します。 これらのCSSの変更をWebサイトにも適用するには、CSSコードの次の行をコピーして[カスタムCSS]ボックスにも貼り付けます。 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

アクティブなリンク

結果

この投稿のすべての手順を実行すると、次の最終結果を達成できるはずです。

アクティブなリンク

もちろん、スタイルを自分の好みに合わせて変更することもできます（または、トップナビゲーションにも使用できます）。

最終的な考え

このチュートリアルでは、ポケットベル用のインタラクティブな垂直ナビゲーションメニューを作成する方法を示しました。 Page Scroll to IDプラグインをDiviテーマと組み合わせて使用​​して、目的の結果を簡単に実現する方法を示しました。 将来の投稿では、これに戻って、この方法で使用しているアクティブなリンクをクリエイティブにスタイル設定する方法を紹介します。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Yurlick /shutterstock.comによる注目の画像