シングルページウェブサイトは、すべての情報を1つのページに掲載します。これらのウェブサイトは、読み込みが完了するとページ全体（ウェブサイト全体）を表示し、訪問者がヘッダーにある各メニュー項目をクリックすると、ページの異なるセクションが表示されます。
これらのタイプのウェブサイトには、シンプルで使いやすいナビゲーション、モバイルフレンドリー、ウェブサイト訪問者のエンゲージメント向上、コンバージョン率の向上、作成とメンテナンスの容易さなど、多くの利点があります。ランディングページ、イベント関連ウェブサイト、ポートフォリオを簡潔かつ分かりやすく紹介するのに適しています。
これは、セクション設定で指定できるセクションIDと呼ばれる重要な要素を使用することで実現できます。
この記事では、セクションIDとリンクのメニュー項目を使用して、単一ページのウェブサイトを作成する方法について説明します。
ここで扱われる内容：
- ページを作成してセクションを追加する
- セクションIDを指定
- ページをホームページとして設定
- セクション ID を使用してリンク メニュー項目を作成する
- トップに戻るボタンを有効にする
- 固定ナビゲーションを有効にする
ページを作成してセクションを追加する
- 最初のステップは、 新しいページを作成する (NAIST) と 必要なセクションを追加します それに。
- それぞれのメニュー項目 (About や Contact ページなど) にリンクするすべてのセクションを作成する必要があります。
セクションIDを指定
- ページにセクションを追加したら、追加したすべてのセクションのセクション設定にアクセスし、 セクションIDを指定 それらのそれぞれに。
ページをホームページとして設定
次に、ウェブサイトセクションに移動し、そのページをホームページとして設定し（1）、ウェブサイトのメニュー/ナビゲーションから非表示にします（2）。
セクション ID を使用してリンク メニュー項目を作成する
次に、「ホーム」、「概要」、「仕事」、「お問い合わせ」などのリンクメニュー項目を作成します。
新しいリンクメニュー項目を追加するには、検索ボックスに「リンクを追加」 (1)と入力し、 「リンクを追加」(2)をクリックします。
リンク メニュー項目をページのセクションに接続するには、次の手順に従います。
- ノーザンダイバー社の ウェブサイト セクションで、リンク メニュー項目にカーソルを合わせて、 XNUMXつの垂直ドットアイコン (1) その隣。
- まず 設定 オプション (2) をドロップダウンから選択します。
- 次に、下にスクロールして リンクターゲット セクション (3) で、 ページセクション タブ (4) を選択して、 セクション ID リンクしたいセクションの(5)。
- セクション ID は、スペースを含めずにページ セクションで指定したものと同じにする必要があります。
- 最後に、 Save 選択したファイルに対してアクションを実行するには、Actionsアイコン（6）を使用します。
トップに戻るボタンを有効にする
下にスクロールするとフェード インし、ブラウザの下部に沿って浮かぶボタンがあると便利です。 クリックすると簡単にトップに戻ることができます。
- 次に、下にスクロールして 先頭へ戻るボタンに セクションを開き、ボタンを有効にします。
固定ナビゲーションを有効にする
ヘッダー上に固定ナビゲーションを有効にすることで、ウェブサイトの見栄えを向上させることもできます。詳細はこちらをご覧ください。
さあ、これでシングルページウェブサイトが完成しました！上部にある「サイトを表示」ボタンをクリックするだけで、ウェブサイトをご覧いただけます。
ウェブサイトに施せるその他のカスタマイズについては、「Pixpaでウェブサイトを構築する – 完全ガイド」の記事をご覧ください。
- セクション ID は大文字と小文字が区別されます。
- セクションIDには、文字、数字、ハイフンのみを使用してください。#、スペース、特殊文字は使用しないでください。
- ダッシュを使用して、セクション ID 内の単語を区切ります。
以下は、単一ページの Web サイトのデモです。