スマートフォンでメニューを開閉でき、リンク先へ移動できる。
作業を始める前に
- メインメニューに公開済みページを割り当てます。
- CRAFT 2.1.0のサイト領域が760px以下になるとモバイル用表示へ切り替わります。
設定の手順 07 STEPS
メニューの項目を先に設定する
「外観 → メニュー」で「メインメニュー」の割り当てを確認します。パソコンとスマートフォンは同じメニューの項目を使います。スマホ専用の別メニューを追加する操作は必要ありません。
ヘッダーに使う項目が保存されている。
実機または幅の狭い表示で開く
スマートフォンのブラウザーで通常URLを開きます。パソコンでは開発者ツールのデバイス表示やカスタマイザーのモバイルプレビューでも確認できます。テーマのコンテンツ幅に応じて切り替わるため、画面の名称だけで判定しないでください。
横並びナビゲーションがメニューボタンに変わる。
ボタンを押して開く
ヘッダーの線とMENUのボタンを押します。ボタンは「サイトメニューを開く」という読み上げ名を持ち、開いた状態ではその状態が支援技術へ伝わります。項目が多い場合はメニュー領域内をスクロールできるかも確認します。
メニュー項目が表示され、指で選択できる。
閉じる操作を確認する
同じボタンをもう一度押して閉じます。キーボードではEscapeでも閉じられます。閉じた状態のメニューが本文に重なり続けていないことを確かめます。
開閉を繰り返しても正常に動く。
リンクを選んで移動する
項目を1つ押し、移動先のページタイトルを確認します。ページ内アンカーは目的の位置へ移動するか確認します。ホーム以外から#servicesだけを指定すると、そのページに対象がないことがあるためURLも確認します。
目的のページまたは見出しへ移動できる。
長い名前と小さい画面を試す
320px程度の幅でも、会社名とメニューボタンが重ならないか確認します。横に長いロゴや長いラベルは短く整えます。ボタンを極端に小さくする追加CSSは避け、指で押しやすい状態を保ちます。
横スクロールやボタンの隠れがない。
反応しない場合は競合を切り分ける
ブラウザーの再読み込み、キャッシュの更新、テーマの更新状況を確認します。独自のJavaScriptやメニュー系プラグインを追加した直後なら、検証環境でそれらの影響を切り分けます。別のハンバーガー機能を重ねて追加しないでください。
テーマ標準機能の動作を単独で確認できた。
終わったら確認すること
- タップ・再タップ・Escape・リンク選択を確認した。
- 縦向きと横向きで表示を確認した。
途中で困ったときは
スマホ表示でも横並びのままです
ブラウザーのPC版サイト表示や表示幅を確認します。実機の通常表示でも再確認してください。
子メニューが表示されません
CRAFTは1階層のメニューです。項目を同じ階層にそろえるか、親ページ本文から詳細ページへ案内してください。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.29 ／ 作業時間は目安です。反映待ちや環境によって異なります。
管理画面の項目を調べる
入力欄の意味・操作・確認方法を、項目ごとに確認できます。
外観 → メニュー →外観 → エディター → ナビゲーション →