画像ウィジェット・背景画像の使い方

① 「画像」を選ぶ

1. 編集したいページを「Elementorで編集」で開きます。
2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
3. 新しく追加する場合は、左上の「＋」を押し、検索欄に「画像」と入力します。
4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。

開き方から確認したい場合：ページを作成・編集する

② 使いたい写真を選ぶ

123

1. 「画像の選択」の大きな枠を押します。
2. メディアライブラリから使う画像を選びます。パソコンの画像なら「ファイルをアップロード」から追加します。
3. 画像の内容が分かる代替テキストを入力します。例：「打ち合わせをしているスタッフ」。
4. 選択した画像を挿入します。「画像の解像度」は表示する大きさに合うものを選びます。
5. 画像を押しても移動させない場合、「リンク」は「なし」のままにします。

成功の目印：右側に選んだ写真が表示されます。

③ 写真の幅を調整する

12

1. 「スタイル」を押します。
2. 「幅」の単位が％なら、まず100を指定すると入れ物の幅に合わせられます。
3. 小さくしたい場合は80や60などに減らし、右側を見ながら調整します。
4. 「高さ」は必要がなければ未入力にし、写真の縦横比を保ちます。

「画像の解像度」は元画像の細かさ、「幅」はページでの表示サイズです。小さな画像を大きく表示すると、ぼやけることがあります。

成功の目印：写真がつぶれず、ページ内に収まっていればOKです。

文字の後ろに敷く「背景画像」を変えたい場合

123

1. 画像そのものではなく、背景を持つコンテナを選びます。
2. 「スタイル」→「背景」を開きます。
3. 「背景タイプ」の筆形の「クラシック」を選びます。
4. 「画像」の枠から写真を選びます。
5. 表示位置やサイズを確認し、スマホでも人物や商品の大事な部分が見えるように調整します。

画像ウィジェットは写真を部品として置きます。背景画像はコンテナの後ろに敷きます。背景は画面の幅によって一部が切れることがあるため、重要な説明文を画像だけに入れないようにしましょう。

成功の目印：文字などの背後に写真が表示されます。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• 写真が横につぶれたり縦に伸びたりしていない。
• スマホでも重要な部分が見える。
• 画像にリンクを付けた場合、移動先が正しい。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順