【Elementor】文字だけサクッと直したい!テキストの修正と更新方法

こんな方へ

営業時間やキャッチコピーなど、ホームページの「文字」だけを少し直したいWebご担当者様

わかること

複雑な操作は一切なし!「直したい文字をクリック」して「書き換える」だけの、安全で簡単な修正手順

作業の目安

約5分

必要なもの

修正したい新しいテキスト(変更後の営業時間や文章のメモなど)

1. はじめに:文字を直すだけなら、とても簡単です!

「営業時間が変わったから、ホームページの数字だけ直したい」
「ちょっとしたご案内の文章を追加したい」

そう思ってElementor(エレメンター)の編集画面を開いたものの……

「左側にズラッと並んだメニューやボタンを見て、怖くなって閉じてしまった」
「どこを触ればいいか分からず、間違えてデザインを壊してしまいそうで不安」
とお悩みではありませんか?

どうかご安心ください!Elementorにはたくさんの機能がありますが、「文字を直すだけ」であれば、使う機能はほんの少しだけです。

複雑なレイアウトの変更などは一切行わず、安全に文字だけを修正する方法をステップバイステップで解説します。

2. テキスト修正の仕組み(お店のメニュー表を書き換えるイメージ)

ホームページの文字を直す作業は、難しく考える必要はありません。

例えるなら、「お店の入り口にある『メニュー表』や『営業時間のお知らせ』を、新しい文字に書き直すだけ」の作業です。

看板そのものを作り変えたり、お店の建物を工事したりするような大掛かりな操作は行いません。普段お使いの「Word(ワード)」やスマートフォンの「メモ帳」で文字を打ち直すのと同じような感覚で、サクッと変更することができます。

それでは、実際の画面を見ながら一緒に進めていきましょう!

3. 手順1:編集画面を開いて、直したい文字をクリックする

まずは、修正したい文字があるページを開き、編集できる状態にします。

1. WordPressの管理画面にログインし、文字を直したいページ(トップページや会社概要など)を実際に開きます。
2. 画面の一番上にある黒い帯の中から、「Elementorで編集」という文字をクリックします。

3. 少し待つと、Elementorの編集画面が開きます。画面の左側には色々なボタンが並んでいますが、今は左側は見なくて大丈夫です!
4. 右側の実際のホームページ画面を見ながら、今回直したい「文字(営業時間など)」の上にマウスの矢印を乗せてみてください。
5. 水色(またはピンク色)の枠線が表示されたら、そこを「カチッ」と1回クリックします。

これで「ここの文字を書き換えますよ」という指定ができました。

4. 手順2:左側のメニューで新しい文字に書き換える

文字をクリックすると、先ほどまで見ないでOKだった「画面の左側」のメニューがパッと切り替わります。ここが、文字を書き換えるためのノートになります。

1. 左側のメニューの中に、現在表示されている文字が書かれた「四角い入力枠」が現れます。

2. この枠の中の文字をクリックして、古い文字を「BackSpace」キーや「Delete」キーで消します。
3. 準備しておいた新しい文字(新しい営業時間や文章)をキーボードで打ち込みます。

※右側のホームページ画面を直接クリックして文字を打つこともできますが、誤って周りのデザインを消してしまうのを防ぐため、必ず「左側の入力枠」で文字を打ち換えるようにすると安全です!

打ち換えると、右側のホームページ画面の文字も連動してスッと新しいものに切り替わります。

5. 手順3:最後に「更新」ボタンを押して保存する!

文字が切り替わって一安心……ですが、ここで画面を閉じてはいけません!

今の状態は、まだあなたのパソコンの画面上だけで変わっている「仮留め」の状態です。最後にしっかりと「保存」のボタンを押して、変更を確定させましょう。

1. 画面の右上の隅(または左下の隅)を見てください。
2. ピンク色(または緑色)の「更新」というボタンがあります。このボタンをクリックしてください。

ボタンの色がグレーに変われば、保存(実際のWebサイトへの反映)は完了です!
これで、ホームページの文字が、無事に新しいものへ変更されました。左上のメニュー(横線3本のマーク)から「ページを表示」を押して、実際のお客様からどう見えるか確認してみてくださいね。お疲れ様でした!

6. 解決しましたか?レイアウトが崩れてしまった等の場合はDIANT公式LINEへ

「文字を直そうとしたら、間違えて横の画像を消してしまった!」

「文字の大きさが変わって、レイアウトがガタガタに崩れてしまった…」

「更新ボタンを押しても、スマホで見ると古い文字のままになっている」

このように、もし作業中にデザインが崩れてしまったり、うまくいかないことがあった場合は、慌てて直そうとせず、そのままの状態で株式会社DIANTまでご連絡ください!

▼ 解決しない場合はDIANT公式LINEへ!

「文字の修正中にレイアウトが崩れてしまいました」とメッセージをお送りいただければ、サポート担当が直接状況を確認し、元の綺麗な状態に戻すサポートをさせていただきます。いつでもお気軽にご相談くださいね!

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

こんな方へ

PC操作や専門ツールに不慣れで、自分でトップページやブログの画像を差し替えたいWeb担当者様

わかること

複雑な機能は無視してOK!ホームページを壊さずに、トップ画像を安全・確実に変更する方法

作業の目安

約10分

必要なもの

差し替えたい新しい画像データ、WordPressのログイン情報(ID・パスワード)

「季節が変わったからトップページやブログの画像を変えたいけれど、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へお気軽にご連絡ください!