シームレスなページナビゲーションのためにElementorで垂直スティッキーサイドバーを作成する方法 - OpenByt - Your Ultimate Source for Free WordPress Knowledge

垂直スティッキーサイドバーは、ページのサイドに配置される実用的なデザイン要素で、ユーザーがスクロールダウンしてもビューポート内に表示されたままになります。この固定位置のサイドバーは、特定のページセクションに素早くアクセスできるようにすることで、コンテンツを通して訪問者を誘導する効率的なツールとなります。サービスページ、ポートフォリオ、ブログ記事など広範な情報を持つウェブサイトの場合、スティッキーサイドバーは便利なナビゲーションツールを提供することでユーザーエクスペリエンスを向上させ、ユーザーが広範囲にスクロールすることなく目的のセクションにジャンプしやすくします。

このチュートリアルでは、ナビゲーションアイテム、アンカーリンク、ウェブサイトの美的センスにマッチするカスタムスタイリングを使って、Elementorで垂直スティッキーサイドバーを作成する方法を説明します。

準備

作業を始める前に、以下のことを確認してください：

エレメンタル・プロインストールとアクティベーション:スティッキーエフェクトにはElementor Proが必要です。
ページ設定:垂直スティッキーサイドバーを追加したい新規または既存のページ。
Elementorコンテナに精通していること:との連携をお勧めします。フレックスボックスこのチュートリアルでは、より柔軟なコントロールが可能なコンテナモードを使用します。

ステップ1：シングルページテンプレートの作成

まず、単一ページのテンプレートを作成し、縦方向のスティッキーサイドバーとなるコンテナを設置します。

テンプレートに移動

WordPressのダッシュボードにある Elementor > テンプレート > 新規追加.

テンプレートタイプの選択

ポップアップで シングルページ をテンプレートタイプに設定し、"ビジネスサービスページテンプレート "のような名前を付けます。

ページタイプの選択

テンプレートライブラリの上部で ページ タブ

利用可能なテンプレートを参照して、適切なスタイルを見つけます。検索バーを使用して、"サービス "や "会社 "など、特定の目的のテンプレートを見つけることができます。特定のタイプのページのためにこのサイドバーを作成する場合、表示設定で条件を構成して、特定のページに表示を制限することもできます。

既存のテンプレートを挿入するかどうかを選択でき、ページの1つにサイドスティッキーナビゲーションを追加する必要がある場合は、ページを直接編集することができます。

ステップ2: Elementorでコンテナを作成します。

このコンテナは縦のスティッキーサイドバーのベースとなります。

コンテナの追加

ページエディターで 新しいコンテナの追加 をクリックし、デザインエリアにドラッグします。このコンテナはスティッキーサイドバーのメイン構造として機能します。

コンテナの方向の設定

コンテナを選択し、左側の設定パネルで方向を「垂直」に設定します。垂直方向は、サイドバーアイテムを上から下へ積み重ねることができ、垂直サイドバーレイアウトを作成するのに不可欠です。

コンテナ幅の定義

での スタイル タブでサイドバーの幅を200px以下にするなど、デザインの好みに合わせて調整してください。ページ上で最小限のスペースしか取らないようにすることで、メインコンテンツへの集中を維持することができます。

ステップ 3: 垂直スティッキーサイドバーの作成

タイトルとナビゲーション項目の挿入

追加 見出し コンテナ内のウィジェットに、"Quick Navigation "や "Contents "といったタイトルを付けます。

リスト項目の追加

を挿入します。 アイコン一覧 または ボタン ウィジェットを見出しの下に設置してナビゲーションアイテムを作成します。ここでは、合理的な外観のためにアイコンリストを使用し、サイドバーの各項目間にスペースを確保します。

ナビゲーションリンクの追加

サイドバーのナビゲーションには、次のような項目を追加します：

会社概要:会社概要にリンクします。
サービス内容:サービスコーナーへご案内します。
お客様の声:クライアントのフィードバックエリアへご案内します。
お問い合わせ:お問い合わせフォームや情報コーナーへのリンクです。

ページレイアウトに合わせて、名前やアイコンを自由にカスタマイズできます。アイコンを削除するか、アイコンギャラリーでアイコンを選択してください。

アンカーリンクの設定

ページ上にアンカーポイントを設定して、各ナビゲーション項目にアンカーリンクを追加します。例えば、"About Us "セクションの場合、次のようにします。 1TP5弊社について他のセクションにも同様のアンカーを使用しています。

会社概要」のアンカーを追加

Elementor で メニューアンカー ウィジェットを使用してください。ウィジェットを "会社概要 "セクションのタイトルのすぐ上、または適切な位置にドラッグしてください。後で簡単にリンクできるように、設定でアンカーに名前を付けます（例えば、about-us）。

アンカーをナビゲーションにリンク

会社概要」のアイコンリスト項目に戻り、URLを#about-usに設定してリンクします。ユーザーがこのナビゲーション項目をクリックすると、すぐにそのセクションにジャンプします。

残りのメニュー項目についてもこの作業を繰り返します。

サイドバー幅の定義

一貫したレイアウトを維持するには、アイコンリストコンテナとメインコンテナの両方の幅を200pxなどの固定値に設定します。

サイドバーのカスタマイズ

でフォント、色、間隔を調整できます。スタイルタブを追加してください。また背景色サイドバーを視覚的に際立たせるために、パディング、シャドウ効果を使用しています。

ステップ4：スティッキー効果を有効にする

ユーザーがスクロールしてもサイドバーを固定したままにするには、以下の手順に従ってください：

ナビゲーション・バーとコンテンツ・エリアのCSS IDの設定

ナビゲーション・バー・コンテナを選択し、AdvancedタブでCSS IDを追加します。 サイドバーメニュー.

カスタムCSSコードの追加

ElementorのカスタムCSS（グローバル設定またはナビゲーションバーコンテナのカスタムCSS）を開きます。以下のコードを追加します：

#sidebar-menu{サイドバー・メニュー
    position: fixed; /* スクロール時にサイドバーが動かないように固定します */
    left: 0; /* サイドバーをページの左側に配置します */
    top：0; /* サイドバーをページの上部に配置します */
    height: 100vh; /* サイドバーの高さをビューポート全体の高さに設定します */
    width: 200px; /* 必要に応じてサイドバーの幅を調整します */
    z-index：10; /* サイドバーが他の要素の上に留まるようにします。
    background-color: #e0f7fa; /* サイドバーの背景色を設定します */
    color: #FFF; /* サイドバー内のテキスト・カラーを設定します。
    padding-top: 250px; /* サイドバーの上部にパディングを追加します */
    overflow-y: auto; /* サイドバーのコンテンツが長すぎる場合にスクロールを許可します */
}

説明

ポジション：固定
- ユーザーがスクロールしても、サイドバーを画面上の固定位置に保ちます。ページのスクロールに関係なく、常にビューポートに表示されたままになります。
左：0；
- サイドバーをビューポートの左端に合わせ、ページの左側と同じ高さに配置します。

top：0;
- これは、サイドバーがビューポートの最上部から始まるように設定し、ページの最上部に揃えます。

高さ：100VH
- サイドバーの高さがビューポートの高さ全体（ビューポートの高さの100%）を占めるように設定します。これにより、サイドバーが画面の上から下まで確実に広がります。

width: 200px；
- サイドバーの幅を200pxに設定します。この値はデザインの必要性に応じて調整できます。

z-index：10;
- サイドバーの積み重ね順序を設定します。z-index を高くすることで、サイドバーが重なる可能性のある他の要素の上に表示されるようになります。

background-color: #e0f7fa；
- これはサイドバーの背景色を定義します。ここでは、淡いパステルブルー（#e0f7fa）が選ばれ、落ち着きと清潔感を与えています。

カラー：#FFF；
- サイドバー内のテキスト色を白（#FFF）に設定します。これにより、パステルブルーの背景とのコントラストが得られ、読みやすさが向上します。

padding-top: 250px；
- サイドバーの上部にパディングを追加します。これは、サイドバーのメイン・コンテンツ (ナビゲーション・リンクなど) をさらに下から開始し、ブランディングやロゴのために上部にスペースを残したい場合に便利です。

overflow-y: auto；
- コンテンツがサイドバーの高さを超える場合、サイドバー内部での垂直スクロールを可能にします。これにより、ページ全体のレイアウトに影響を与えることなく、コンテンツにアクセスし続けることができます。

垂直スティッキーサイドバーは、ユーザーがスクロールしてもウェブページのサイドに固定され、特定のセクションへのクイックナビゲーションを提供するデザイン要素です。このチュートリアルでは、ナビゲーションアイテム、アンカーリンク、カスタムスタイルを使用してシームレスなユーザーエクスペリエンスを実現する、Elementor でのスティッキーサイドバーの作成方法を説明します。Elementor Pro をインストールした状態で、単一ページのテンプレートを作成し、サイドバー用のコンテナを設定し、ナビゲーションアイテムを追加し、アンカーリンクを割り当てます。最後に、カスタムCSSを追加することで、サイドバーはビューポートに固定され、サービスやポートフォリオセクションのようなコンテンツの多いページでのアクセシビリティが向上します。