Elementorでスマートフォン表示を調整する

① スマートフォン表示に切り替える

12

1. 画面上部のスマートフォン形のアイコンを押します。
2. 右側が細い縦長の画面になることを確認します。
3. ページを上から順番に見て、読みにくい場所を探します。

② 文字と画像の大きさを整える

1. 大きすぎる見出しをクリックします。
2. 「スタイル」→「タイポグラフィ」で、設定対象がスマホになっていることを確認します。
3. 見出しなら24pxなどを出発点に、読みやすい大きさへ調整します。
4. 画像がはみ出している場合は、画像の「スタイル」→「幅」を確認します。固定pxより％の方が画面に合わせやすい場合があります。

③ 横並びと余白を調整する

12

1. 横並びの部品を入れているコンテナを選びます。
2. スマホ表示のまま「レイアウト」→「方向」を確認します。
3. 下向きの矢印を選ぶと、部品が縦に並びます。
4. 「Gaps」を調整し、部品同士の間隔を整えます。

写真は設定項目の場所を示すパソコン表示の例です。実際に値を変える前に、画面上部がスマホ表示になっているか確認してください。

成功の目印：写真と文章などが、狭い画面でも読みやすく縦に並びます。

1

1. 「高度な設定」→「パディング」を開きます。
2. 端末がスマホであることを確認します。
3. 左右の値が大きければ、例として16pxなどへ調整します。
4. パソコン・タブレットへ戻り、それぞれの表示も確認します。

成功の目印：文章が細くなりすぎず、画面端にもくっつかない状態になります。

④ 保存後に実際のスマホで確認する

• 左右へ横スクロールしなくても読める。
• 見出しに不自然な1文字だけの改行がない。
• 写真の人物や商品が切れていない。
• ボタンを指で押しやすい。
• パソコン側の表示も崩れていない。

確認できたら保存し、スマートフォンで公開URLを開きます。編集画面のプレビューだけでは分からない、実際の文字の大きさや押しやすさも確かめます。