❓ Q: スマートフォンでページを見ると、画面が左右にぶれます。また、ページ上部のメニューがスマートフォンでは表示されず、選んで編集することもできません。
👉 A: 左右のぶれは、メニューとは別の部品が画面からはみ出していることがほとんどです。はみ出している部品を見つけて、幅を直します。
メニューは、スマートフォンではヘッダーから外して、ハンバーガーメニューの中に「メニュー」パーツを置くのがおすすめです。
この記事では、はみ出している部品の見つけ方と直し方、ハンバーガーメニューにメニューを入れる手順、メニューの文字とリンク先の変え方を説明しています。
❶ 画面が左右にぶれるときは、はみ出している部品を探す
見出しやテキスト、画像、メニューなどのパーツは、PCで幅を数値で指定していても、スマートフォンでは画面の幅に収まるように縮みます。
そのため、スマートフォンで画面が左右にぶれるときは、HTMLパーツで貼り付けた地図や動画などの埋め込みが、固定の幅のまま画面からはみ出していることがほとんどです。
① エディタの画面右上で、スマートフォン表示に切り替えます。
② ページを上から順に見て、右側の余白がなく、画面の端で切れている部品を探します。ほかの部品は左右に同じくらいの余白があるので、はみ出している部品は見分けられます。
③ 見つけた部品が埋め込み（HTMLパーツ）なら、「詳細設定」の「コード」にある幅の指定（例：width="600"）を width="100%" に書きかえます。
💡 Googleマップの埋め込みタグは、はじめから width="600" になっています。詳しくは「Webサイトに地図（アクセス・所在地）情報を追加する」をご覧ください。
💡 書きかえたあとは、ページを公開（更新）して、スマートフォンで確認しましょう。
❷ スマートフォンでヘッダーのメニューを非表示にする
ヘッダーのメニューは、PCでは横に並びますが、スマートフォンの幅には入りきりません。スマートフォンでもメニューを表示する設定のままだと、メニューがロゴの横に押し込まれて重なったり、ハンバーガーメニュー（三本線のアイコン）がロゴのすぐ隣に寄ったりします。
スマートフォンでは、ヘッダーのメニューを非表示にして、ハンバーガーメニューから選べるようにしましょう。
⚠ スマートフォン表示では、非表示にしたメニューや、画面の外にあるメニューは選べません。PC表示に切り替えてから選びます。
① エディタの画面右上で、PC表示に切り替えます。
② ヘッダーのメニューの文字をクリックします。
③ 選んだパーツの左上に出るラベルにマウスを合わせ、「コンテナ」をクリックします。メニューとボタンを囲む枠が選ばれます。
④ 画面右側の「デザイン」タブで、「表示」の「モバイル」のチェックを外します。
⑤ スマートフォン表示に切り替えると、ヘッダーのメニューが消え、ハンバーガーメニューが右端に戻ります。
💡 「表示」のチェックは、PCとモバイルで別々に設定できます。「モバイル」だけを外せば、PCではこれまでどおりメニューが表示されます。
❸ ハンバーガーメニューの中にメニューパーツを置く
ハンバーガーメニューを開いた中に「メニュー」パーツを置くと、メニューに表示しているページが、スマートフォンでは自動で縦に並びます。ページを増やしたときも、自動で項目が増えます。
① スマートフォン表示で、ハンバーガーメニュー（三本線のアイコン）をクリックします。
② 画面右上の状態の選択欄（「通常時」）を、「展開時」に変えます。ハンバーガーメニューを開いた中身が表示されます。
③ 画面左側のパーツエリアから「メニュー」パーツを、開いた中身の、ボタンのすぐ上にドラッグ＆ドロップします。
⚠ 置いた直後は文字が白いため、何も見えないことがあります。次の手順で文字の色を変えます。
④ 置いたメニューパーツを選んだまま、画面右側の「デザイン」タブの「テキストカラー」で、色を入力します（例：#333333）。
⑤ 「状態」を「アクティブ時」に切り替えて、同じ色を入力します。アクティブ時は、いま見ているページの項目の色です。こちらを変えないと、そのページの項目だけ白く見えなくなります。
⑥ メニューが左の端にくっついているときは、メニューの文字をクリックし、ラベルの「インナー」を選んで、「パディング」の上下・左右に余白を入れます（例：上下24px・左右28px）。下のボタンと左端がそろいます。
⑦ 保存して、ページを公開（更新）します。スマートフォンでハンバーガーメニューを開くと、メニューが縦に並びます。
⚠ ヘッダーはページごとに作られています。ほかのページにも同じ手順でメニューパーツを置いてください。一度置いておけば、あとからページを増やしても、そのページのドロワーを直す必要はありません。
❹ メニューの文字とリンク先を変える
メニューパーツの項目は、メニューパーツの上では直接書きかえられません。それぞれのページの設定で変えます。
- 文字を変える：そのページの「メニュー表示名」を書きかえます。
- どのページを並べるか：並べたいページの「メニューに表示」をONに、外したいページはOFFにします。
- リンク先：それぞれのページに自動でリンクされます。リンク先だけを別のページや外部のサイトに変えることはできません。
① 変えたいページのエディタを開き、左のメニューから「詳細設定」をクリックします。
② ページの一覧から対象のページを選び、画面右側の「基本設定」で「メニューに表示」と「メニュー表示名」を設定します。入力した内容は自動で保存されます。
③ そのページを公開（更新）します。ほかのページのメニューにも、自動で反映されます。
⚠ 公開していないページは、「メニューに表示」をONにしてもメニューに出ません。
⚠ 記事のページのメニューは、記事を公開（更新）したときの内容のままになります。ページを増やしたら、記事も更新してください。
💡 外部のサイトなど、自由なリンク先をメニューに入れたいときは、メニューパーツの代わりにテキストやボタンのパーツを置いて、リンクを設定します。詳しくは「リンクを設定する」をご覧ください。