Skip to content

5. メニュー設定(モバイル・追従)

特集ページでは、訪問者がページ内をスムーズに移動できるよう、特別なナビゲーションメニューを利用できます。

  • モバイルメニュー: スマートフォンなどの画面幅が狭いデバイスで表示される、ハンバーガーアイコン(≡)などをタップして開閉するメニュー。
  • スティッキー(追従)メニュー: ページをスクロールしても画面上部(または下部)に常に固定表示されるメニュー。

ここでは、これらのメニューの設定方法について解説します。

モバイルメニューの有効化 (※設定箇所要確認)

モバイルメニュー機能自体を使用するかどうかは、ページ全体の設定で制御される場合があります。

  • 確認場所:5. ページ設定とメタ情報」ガイドで解説した「ページ設定」タブ内に、「モバイルメニューを有効にする」のようなチェックボックスやトグルスイッチがあるか確認してください。

モバイルメニュー有効化設定 (ページ設定タブ内のモバイルメニュー有効化オプションを示すスクリーンショット)

この設定がオフの場合、個々のパーツでモバイルメニュー表示を設定しても、メニュー自体が表示されません。

パーツをメニューに追加する

どのパーツをモバイルメニューやスティッキーメニューに表示させるかは、各パーツの設定 で個別に指定します。

多くのパーツ(例: タイトル、リンクメニュー、バナーなど)の設定エリアには、「メニュー」タブが存在します。

パーツのメニュー設定タブ (任意のパーツ(例: タイトルパーツ)を選択し、「メニュー」タブが開かれている状態のスクリーンショット)

  1. メニューに追加したいパーツを、パーツリストまたはライブプレビューから選択します。
  2. 設定エリアで「メニュー」タブを開きます。
  3. 以下の設定項目が表示されるので、必要に応じて設定します:
    • モバイルメニューに表示 (Show in Mobile Menu): このパーツをモバイルメニューの項目として表示したい場合にオンにします。
    • スティッキーメニューに表示 (Show in Sticky Menu): このパーツをスティッキー(追従)メニューの項目として表示したい場合にオンにします。
    • メニュー表示名 (Menu Display Name): モバイルメニューやスティッキーメニュー上で表示されるテキストを入力します。空欄の場合、パーツのタイトルなどが自動的に使われるか、表示されない場合があります。簡潔で分かりやすい名前を設定しましょう。
    • アイコン (Icon): (※もしあれば) メニュー表示名の前に表示するアイコンを選択します。
  4. 設定が完了したら、忘れずにページ全体を「保存」します。

メニュー設定オプション (メニュータブ内の「モバイルメニューに表示」「スティッキーメニューに表示」「メニュー表示名」などの設定オプションを示すスクリーンショット)

メニューの表示確認

設定したメニューが意図通りに表示・動作するかを確認します。

  • モバイルメニュー: ライブプレビューをスマートフォン表示モード(※もし切り替え機能があれば)にするか、実際のスマートフォンでページを確認し、ハンバーガーメニューを開いて項目が表示されるか、タップして正しくスクロールするかを確認します。
  • スティッキーメニュー: ライブプレビューまたは実際のページでスクロールし、メニューが画面上部(または下部)に固定表示され、項目が表示・動作するかを確認します。

モバイルメニュー表示例 (スマートフォン表示でモバイルメニューが開かれている様子のスクリーンショット)

スティッキーメニュー表示例 (ページスクロール中に画面上部に固定表示されているスティッキーメニューのスクリーンショット)


これでモバイルメニューとスティッキー(追従)メニューの設定は完了です。 最後に「7. 公開(デプロイ)」で、作成したページを実際にストアに反映させる方法を見ていきましょう。