【Elementor】初心者でも安心！トップページやブログの画像を安全に差し替える3つのステップ

「季節が変わったからトップページやブログの画像を変えたいけれど、Elementor（エレメンター）の編集画面を開いたらボタンが多すぎて怖い……」
「変なところを押して、ホームページが壊れてしまったらどうしよう……」
そんな風に不安に思っていませんか？
ご安心ください。
そのお悩み、とてもよくわかります。
Elementorはプロの制作者も使うツールなので、画面上に様々な設定項目やボタンが並んでいます。
ですが、今回触るボタンはほんの少しだけです。
ホームページの画像は訪れた人が最初に見る重要な部分です。
今回はホームページの構造を作り変えるような複雑な作業ではなく、「指定された枠の中の画像を、別の画像に入れ替えるだけ」の作業を行いますので、安心してゆっくり進めていきましょう。

※本記事では、画像が多くてわかりやすい「ブログページ」の画面を例に解説しますが、トップページでも手順は全く同じですので、安心してゆっくり進めていきましょう。

手順1：準備編〜差し替える画像とログイン情報を用意しよう〜

まずは、手元に必要なものが揃っているか確認しましょう。

① 新しい画像データの準備
差し替えたい新しい画像をご自身のパソコンに保存しておきましょう。
ここで一つだけポイントがあります！
それは「画像のサイズ（縦横の比率）」です。

今まで設定されていた画像と全然違う形（例えば、横長だったのに縦長の画像を入れるなど）のものを入れると、枠からはみ出したり、不自然に表示されたりしてしまいます。
できるだけ、「今まで設定されていた画像と同じサイズ（推奨サイズ）」の画像を用意すると、ホームページのレイアウトが崩れず安全です。

【ちょっと一工夫】今の画像のサイズ（推奨サイズ）の調べ方
「同じサイズと言われても、今のサイズがわからない！」という方は、以下の手順で調べることができます。
（Google Chromeブラウザでの操作を想定しています）

1. ご自身のホームページを開き、今のトップ画像を表示します。
2. 画像の上で「右クリック」し、メニューの中から一番下の「検証」をクリックします。

3. 画面の右側（または下）に、難しい英語が並んだ画面が出ます。
よく見ると、一部の英語の行がグレーや青色でハイライト（色付け）されています。
4. そのハイライトされている行の中にある、青文字のリンク（「https://〜」や「/wp-content/〜」などから始まる部分）の上に、マウスの矢印（カーソル）をそっと乗せて（ホバーして）みてください。
※クリックはしません。
5. すると、小さな画像のプレビューと一緒に「1200 × 800 px」のような数字がフワッと表示されます。
この数字が、元々の画像のサイズ（推奨サイズ）です！
確認できたら、右上の「×」ボタンで英語の画面を閉じてOKです。

② WordPressのログイン情報
ホームページの管理画面に入るための「ID（ユーザー名）」と「パスワード」をご用意ください。
準備ができたら、WordPressのログイン画面から管理画面にログインしましょう。

手順2：実践編〜迷わずできる！画像を差し替える手順〜

ログインができたら、画像を差し替える作業に入ります。
ここからは実際の画面を見ながら、一つずつゆっくり進めてくださいね。

① Elementorの編集画面を開く
左側の黒いメニューから「固定ページ」または「投稿」を選び、変更したいブログページのタイトルにマウスを合わせます。
すると、「Elementorで編集」という文字が出てくるので、そこをクリックしてください。
（※トップページを変更する場合は、トップページのタイトルを選びます）

② 変更したい画像をクリックする
しばらく待つと、実際のホームページの画面と一緒に、左側にたくさんのメニューが並んだ編集画面が開きます。
設定項目が多くて驚くかもしれませんが、左側の難しいメニューはいったん無視して大丈夫です！
右側のホームページ画面の中で、「差し替えたい現在の画像」をマウスで1回クリック（左クリック）してください。
※最新のバージョンでは、画像をクリックしても周りに枠線などは出ませんが、そのまま次の手順に進んで大丈夫です！

③ 左側のメニューから新しい画像を選ぶ
画像をクリックすると、先ほどまで無視していた左側のメニューが、「画像の編集」という案内に自動的に切り替わります。
左側のメニューの中にある、現在の画像が小さく表示されている四角い枠（「画像を選択」と書かれている部分）をクリックしてください

④ 新しい画像をアップロードする
「メディア」という、画像を管理する画面が開きます。
左上の「ファイルをアップロード」というタブをクリックし、画面の真ん中にある「ファイルを選択」ボタンを押して、あなたのパソコンに入っている新しい画像を選んでください。

画像が読み込まれて、青いチェックマークがついているのを確認したら、右下にある青い「選択」ボタンを押します。

画面が切り替わり、右側のホームページに新しい画像が表示されたら、差し替え作業は完了です！

手順3：完了編〜「公開」ボタンを押して変更を保存・公開しよう〜

今の状態は、まだ「あなた（管理者）の編集画面上だけで、画像が仮に変更されている状態」です。
ホームページを見に来る一般の訪問者にも新しい画像が見えるようにするには、設定を保存する必要があります。
画面の右上にある「公開」（または「更新」）というボタンをクリックしてください。

このボタンの色が変わるか、設定が保存された合図が出れば保存と公開は完了です！
これで、ホームページへの訪問者に新しいトップ画像が表示されるようになりました。
最後に、スマホや別の画面でご自身のホームページを開き、画像が綺麗に切り替わっているか確認してみてくださいね。
お疲れ様でした！

おわりに：解決しない場合はDIANT公式LINEへ

いかがでしたでしょうか？
「Elementor 画像 差し替え」などで検索してこの記事にたどり着いた方が、少しでも安心して作業を進められたなら幸いです。
もし、
・「記事の通りにやってみたけど、なぜか画面が違う……」
・「画像サイズが合わなくてレイアウトが崩れてしまった！」
・「やっぱり自分で触るのは怖いから手伝ってほしい」
といった場合は、無理に操作を続けず、お気軽に株式会社DIANTまでご相談ください。

▼解決しない場合は、DIANT公式LINEへお気軽にご連絡ください！