垂直スティッキーサイドバーは、ページのサイドに配置される実用的なデザイン要素で、ユーザーがスクロールダウンしてもビューポート内に表示されたままになります。この固定位置のサイドバーは、特定のページセクションに素早くアクセスできるようにすることで、コンテンツを通して訪問者を誘導する効率的なツールとなります。サービスページ、ポートフォリオ、ブログ記事など広範な情報を持つウェブサイトの場合、スティッキーサイドバーは便利なナビゲーションツールを提供することでユーザーエクスペリエンスを向上させ、ユーザーが広範囲にスクロールすることなく目的のセクションにジャンプしやすくします。
This tutorial will guide you through creating a vertical sticky sidebar in Elementor with navigation items, anchor links, and custom styling to match your website’s aesthetic.
準備
作業を始める前に、以下のことを確認してください：
- エレメンタル・プロ インストールとアクティベーション:スティッキーエフェクトにはElementor Proが必要です。
- ページ設定:垂直スティッキーサイドバーを追加したい新規または既存のページ。
- Elementorコンテナに精通していること:との連携をお勧めします。 フレックスボックス このチュートリアルでは、より柔軟なコントロールが可能なコンテナモードを使用します。
ステップ1：シングルページテンプレートの作成
We’ll begin by creating a single page template and setting it up to house the container that will serve as our vertical sticky sidebar.
- テンプレートに移動
WordPressのダッシュボードにある Elementor > テンプレート > 新規追加.
- テンプレートタイプの選択
ポップアップで シングルページ as the template type and give it a name, like “Business Service Page Template.”
- ページタイプの選択
テンプレートライブラリの上部で ページ タブ
Browse the available templates to find a suitable style. You can use the search bar to find templates for specific purposes, such as “Services” or “Company.” If you’re creating this sidebar for a particular type of page, you may also configure conditions in the display settings to limit its appearance to specific pages.
既存のテンプレートを挿入するかどうかを選択でき、ページの1つにサイドスティッキーナビゲーションを追加する必要がある場合は、ページを直接編集することができます。
ステップ2: Elementorでコンテナを作成します。
このコンテナは縦のスティッキーサイドバーのベースとなります。
- コンテナの追加
ページエディターで 新しいコンテナの追加 をクリックし、デザインエリアにドラッグします。このコンテナはスティッキーサイドバーのメイン構造として機能します。
- コンテナの方向の設定
コンテナを選択し、左側の設定パネルで方向を「垂直」に設定します。垂直方向は、サイドバーアイテムを上から下へ積み重ねることができ、垂直サイドバーレイアウトを作成するのに不可欠です。
- コンテナ幅の定義
での スタイル tab, adjust the width to fit the sidebar’s needs, such as 200px or less, depending on your design preferences. Ensuring it takes up minimal space on the page helps maintain focus on the main content.
ステップ 3: 垂直スティッキーサイドバーの作成
- タイトルとナビゲーション項目の挿入
追加 見出し widget inside the container with a title like “Quick Navigation” or “Contents.”
- リスト項目の追加
を挿入します。 アイコン一覧 または ボタン widget below the heading to create navigation items. Here, we’ll use an Icon List for a streamlined look, allowing space between each item in the sidebar.
- ナビゲーションリンクの追加
サイドバーのナビゲーションには、次のような項目を追加します：
- 会社概要:会社概要にリンクします。
- サービス内容:サービスコーナーへご案内します。
- お客様の声:クライアントのフィードバックエリアへご案内します。
- お問い合わせ:お問い合わせフォームや情報コーナーへのリンクです。
ページレイアウトに合わせて、名前やアイコンを自由にカスタマイズできます。アイコンを削除するか、アイコンギャラリーでアイコンを選択してください。
- アンカーリンクの設定
Add anchor links to each navigation item by setting up anchor points on the page. For example, for an “About Us” section, we’ll use 1TP5弊社について他のセクションにも同様のアンカーを使用しています。
Add an Anchor for “About Us”
Elementor で メニューアンカー widget. Drag it just above the title for the “About Us” section or to any appropriate position. Name the anchor (for example, about-us) in the settings for easy linking later.
アンカーをナビゲーションにリンク
Return to the Icon List item for “About Us” and link it by setting the URL as #about-us. Users clicking on this navigation item will immediately jump to the section.
残りのメニュー項目についてもこの作業を繰り返します。
- サイドバー幅の定義
一貫したレイアウトを維持するには、アイコンリストコンテナとメインコンテナの両方の幅を200pxなどの固定値に設定します。
- サイドバーのカスタマイズ
でフォント、色、間隔を調整できます。 スタイル tab to match your site’s style. You may also add a 背景色サイドバーを視覚的に際立たせるために、パディング、シャドウ効果を使用しています。
ステップ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；
- Align the sidebar to the viewport’s left edge, positioning it flush with the page’s left side.
- top：0;
- これは、サイドバーがビューポートの最上部から始まるように設定し、ページの最上部に揃えます。
- 高さ：100VH
- Sets the sidebar’s height to occupy the entire viewport height (100% of the viewport height). This ensures the sidebar spans from the top to the bottom of the screen.
- width: 200px；
- Sets the sidebar’s width to 200px. This value can be adjusted based on design needs.
- z-index：10;
- Sets the sidebar’s stacking order. A higher z-index ensures the sidebar appears above other elements that might overlap.
- background-color: #e0f7fa；
- これはサイドバーの背景色を定義します。ここでは、淡いパステルブルー（#e0f7fa）が選ばれ、落ち着きと清潔感を与えています。
- カラー：#FFF；
- サイドバー内のテキスト色を白（#FFF）に設定します。これにより、パステルブルーの背景とのコントラストが得られ、読みやすさが向上します。
- padding-top: 250px；
- サイドバーの上部にパディングを追加します。これは、サイドバーのメイン・コンテンツ (ナビゲーション・リンクなど) をさらに下から開始し、ブランディングやロゴのために上部にスペースを残したい場合に便利です。
- overflow-y: auto；
- It allows vertical scrolling inside the sidebar if the content exceeds its height. This ensures the content remains accessible without affecting the page’s overall layout.
垂直スティッキーサイドバーは、ユーザーがスクロールしてもウェブページのサイドに固定され、特定のセクションへのクイックナビゲーションを提供するデザイン要素です。このチュートリアルでは、ナビゲーションアイテム、アンカーリンク、カスタムスタイルを使用してシームレスなユーザーエクスペリエンスを実現する、Elementor でのスティッキーサイドバーの作成方法を説明します。Elementor Pro をインストールした状態で、単一ページのテンプレートを作成し、サイドバー用のコンテナを設定し、ナビゲーションアイテムを追加し、アンカーリンクを割り当てます。最後に、カスタムCSSを追加することで、サイドバーはビューポートに固定され、サービスやポートフォリオセクションのようなコンテンツの多いページでのアクセシビリティが向上します。