A 単一ページのウェブサイト すべてを XNUMX ページに表示します。 これらの Web サイトは、ロードされると完全なページ (Web サイト) を表示し、Web サイトの訪問者がヘッダーにある各メニュー項目をクリックすると、ページのさまざまなセクションがプルアップされて表示されます。
これらのタイプの Web サイトには、シンプルで簡単なナビゲーション、モバイル フレンドリー、Web サイト訪問者のエンゲージメントの向上、コンバージョン率の向上、作成と保守の容易さなど、多くの利点があります。 これらはに適しています ランディングページ、イベントベースのウェブサイト、およびあなたの ポートフォリオ 短くさわやかな方法で。
これは、と呼ばれる重要な要素を使用して達成できます。 セクション ID で指定できます。 設定セクション.
この記事では、セクション ID を使用して単一ページの Web サイトを作成する方法について説明します。 リンク メニュー項目.
ここで扱われる内容：
- ページを作成してセクションを追加する
- セクションIDを指定
- ページをホームページとして設定
- セクション ID を使用してリンク メニュー項目を作成する
- トップに戻るボタンを有効にする
- 固定ナビゲーションを有効にする
ページを作成してセクションを追加する
- 最初のステップは、 新しいページを作成する および 必要なセクションを追加します それに。
- それぞれのメニュー項目 (About や Contact ページなど) にリンクするすべてのセクションを作成する必要があります。
セクションIDを指定
- ページにセクションを追加したら、追加したすべてのセクションのセクション設定にアクセスし、 セクションIDを指定 それらのそれぞれに。
ページをホームページとして設定
次は、 ウェブサイト セクション、 ページをホームページとして設定する （1）と、 ウェブサイトのメニュー/ナビゲーションから非表示にする とします。
セクション ID を使用してリンク メニュー項目を作成する
今、 リンク メニュー項目を作成する ホーム、アバウト、ワーク、コンタクトなど。
新しいリンク メニュー項目を追加するには、次のように入力します。 リンクを追加 (1) 検索ボックスで、 リンクを追加 アクション (2)。
リンク メニュー項目をページのセクションに接続するには、次の手順に従います。
- ノーザンダイバー社の ウェブサイト セクションで、リンク メニュー項目にカーソルを合わせて、 XNUMXつの垂直ドットアイコン (1) その隣。
- 現在地に最も近い 設定 オプション (2) をドロップダウンから選択します。
- 次に、下にスクロールして リンクターゲット セクション (3) で、 ページセクション タブ (4) を選択して、 セクション ID リンクしたいセクションの(5)。
- セクション ID は、スペースを含めずにページ セクションで指定したものと同じにする必要があります。
- 最後に、 Save 選択したファイルに対してアクションを実行するには、Actionsアイコン（6）を使用します。
トップに戻るボタンを有効にする
下にスクロールするとフェード インし、ブラウザの下部に沿って浮かぶボタンがあると便利です。 クリックすると簡単にトップに戻ることができます。
- 次に、下にスクロールして 先頭へ戻るボタンに セクションを開き、ボタンを有効にします。
固定ナビゲーションを有効にする
ヘッダーのスティッキー ナビゲーションを有効にして、Web サイトの外観を向上させることもできます。 もっと知る.
出来上がり！ シングルページ Web サイトの準備が整いました。 をクリックするだけで、 サイトを見る 上部にあるボタンをクリックして、Web サイトを表示します。
チェック Pixpa でウェブサイトを構築する – 完全ガイド Web サイトで実行できるその他のカスタマイズについて知るには、この記事を参照してください。
注：
- セクション ID は大文字と小文字が区別されます。
- セクション ID 内にスペースを使用しないでください。
- ダッシュを使用して、セクション ID 内の単語を区切ります。
以下は、単一ページの Web サイトのデモです。