エディターで画像を差し替える方法
旧マニュアル番号: No.13
Webサイトの印象を大きく左右する「画像」。Content editor roleを使えば、専門知識がなくても既存の画像を新しいものに差し替えることができます。
1. 画像差し替えの基本ステップ
- 差し替えたい画像をクリックする
- 表示されるアイコンから「画像変更」を選択する
- 新しい画像をアップロード、または選択する
- 変更を保存する
2. 操作手順の詳細
-
Content editor roleでサイトを開く: まずはWebflowを開き、画像を差し替えたいページを表示します。
-
差し替えたい画像にカーソルを合わせる: 変更したい画像の上にマウスカーソルを合わせます。
-
青い枠と画像アイコンを確認: 編集可能な画像の場合、画像の周りに青い点線の枠が表示され、右上に写真のアイコンが現れます。これが「この画像は変更できますよ」という合図です。
-
画像アイコンをクリック: 右上に表示された写真のアイコンをクリックします。
-
ファイル選択ウィンドウが開く: クリックすると、お使いのパソコンのファイル選択ウィンドウ（エクスプローラーやFinder）が開きます。
-
新しい画像を選択: あらかじめ用意しておいた、新しい画像ファイルを選択し、「開く」ボタンをクリックします。
-
画像のアップロードと反映: 選択した画像がWebflowにアップロードされ、サイト上の画像が自動的に新しいものに差し替わります。アップロードには画像のサイズによって少し時間がかかる場合があります。
-
差し替え後の確認: 意図した通りに画像が差し替わったか、見た目を確認してください。
3. 画像に関する注意点
-
画像サイズ（ファイルサイズ）: Webサイトで使用する画像は、ファイルサイズが大きすぎるとページの表示速度が遅くなる原因になります。アップロードする前に、適切なサイズに圧縮しておくことをお勧めします。（目安：1枚あたり500KB以下） 「No.54 「画像がアップロードできません！」原因と対処法」もご参照ください。
-
画像の縦横比: 元の画像の縦横比と大きく異なる画像をアップロードすると、デザインによっては画像が歪んだり、意図しない形で切り取られたりする場合があります。できるだけ元の画像の縦横比に近い画像を用意すると、キレイに差し替えることができます。
-
ファイル名: アップロードする画像のファイル名は、半角英数字（例:
service-image-01.jpg）にすることを推奨します。日本語のファイル名は、予期せぬエラーの原因となる可能性があります。
4. 【重要】変更の公開
画像の差し替えが終わったら、忘れずに「No.15」の手順で変更を公開（Publish）してください。
次のステップ: 画像の差し替えができると、サイトの印象をガラッと変えられますね。次は、設定済みのリンク先を変更したい場合の「No.14 エディターでリンク先のURLを変更する方法」です。