イメージ要素は、ページ上にドロップできる画像または画像の仮枠のことをいいます。画像は、他の要素とは独立してどこにでも移動可能です。イメージ要素は、セクションやdivブロックなどの他の要素に設定される背景画像とは区別されます。

Image icon thumbnail

このレッスンでは

  1. 画像要素を追加する‍
  2. 画像の設定を編集する‍
  3. 画像の置き換え
  4. 画像のスタイル設定
  5. alt属性を追加する

について説明しています。

1. 画像を追加する

ウェブフローのプロジェクトに画像を追加するには、4つの方法があります。

  1. ‍エレメント(要素)パネルから追加
  2. アセットパネルから追加
  3. パソコンから追加
  4. クイック検索から追加

エレメント(要素)パネルから追加

新しい画像をページに追加するには、「要素」パネルから画像要素をドラッグ&ドロップするだけです。画像を選択または追加するには、「アセットパネル」をクリックし、「画像を選択」または「アップロード」をクリックします。

The four elements that are included in the Media section are Image (highlighted), video, YouTube and Lottie Animation.

アセット(要素)パネルから追加

アセットパネルに画像をアップロードしたら、キャンバス上に画像をドラッグします。

The assets panel displays a folder dropdown menu, create new folder button, upload button, search assets bar and image thumbnail previews.

アセットパネルへの画像のアップロードは、2つの方法で行うことができます。

  1. アセットパネルで「アップロード」をクリックし、アップロードする画像を選択する。
  2. コンピュータからアセットパネルに画像をドラッグ&ドロップする。

コンピュータから追加

コンピュータからキャンバスに画像をドラッグします。‍

クイック検索から追加する

クイック検索は Webflow Designer 内の強力な検索バーです。CMD+E / CTRL+E の操作で、ワークフローを短縮し、プロジェクト作成の効率を高めるアシスタントです。

2. 画像設定の編集

The image settings panel displays a choose image button, file name, dimensions and size along with a check box for "Image is HiDPI". It also displays two text input fields for width and height. There is a dropdown menu for alt Text and for Load and a show all settings button.


画像要素を選択した状態で、4つの方法で画像設定にアクセスすることができます。

  1. 画像要素をダブルクリックする
  2. エンターキーを押す
  3. 画像要素のラベルの横にある歯車のアイコンをクリックします。
  4. Dキーを押すか、設定パネルに移動します。
  5. 画像(Image)を選択します。プレースホルダーは、「資産」パネルにある任意の画像で置き換えることができます。要素をダブルクリックし、表示される設定パネルから「画像を選択」をクリックするだけです。

サイズ。幅や高さにピクセル値を指定できます。これにより、すべてのブレークポイントの画像サイズが設定されますが、これらの値は、[要素のスタイル]パネルで幅と高さを設定して上書きすることができます。

画像設定で幅/高さを設定すると、すべてのデバイスブレークポイントでその画像に値が適用されます。ただし、スタイルパネルから設定する場合は、画像に異なる幅/高さを設定することができます。

また、画像の角を掴んでドラッグすることで、サイズを変更することができます。

なお、画像のサイズを変更しても、親要素より大きくなることはありません。

HiDPIをチェックすると、画像のピクセル幅の半分に設定されます。つまり、幅600pxの画像は、300pxで表示されます。このピクセル密度は、HiDPIディスプレイを搭載したほとんどのモバイルデバイスで、画像が美しく見えることを保証します。


The checkbox for "Image is HiDPI" is highlighted on the Image settings panel.

3. 画像を差し替える

The replace image button is highlighted on the Image settings panel.

キャンバスに画像を追加した後、いつでも好きなときに画像を入れ替えることができます。

  1. 画像の設定を開く
  2. 画像の置き換え」ボタンをクリックします。アセットパネルが表示されます。
  3. 既存の画像を選択するか、新しい画像をアップロードしてください。
Step one on the left click the replace button, step two on the right select an image from the assets panel.

4.「アップロードに失敗しました」と表示される場合

The upload failed alert graphic displays a red circle with diagonal line icon, a file name and a the max size for png files of 4mb notice.

画像をアップロードしようとしたときに「アップロードに失敗しました」というアラートが表示される場合は、以下を確認してください。

  1. 画像ファイルが原因かどうかを調べる。
    画像ファイルが破損していないこと、サポートされている正しいファイル拡張子を持っていること、4MB以下であることを確認します。
  2. インターネット接続を確認する。
    インターネット接続の確認:低速のインターネット接続(最低5mbps)でも、画像をアップロードできるはずです。インターネット接続速度に問題がないことを確認するために、インターネット接続を再確認し、信号の強さを確認してください。インターネット接続のトラブルシューティングをご覧ください。
  3. ブラウザの拡張機能をチェックする。
    ブラウザの拡張機能の中には、ウェブフローデザイナーに画像をアップロードする際に問題を引き起こすものがあります。ブラウザの拡張機能のトラブルシューティングを行います。

5. 画像のスタイル設定‍

画像は、他の要素と同様にスタイルパネルを使用してスタイルを設定することができます。背景スタイルなど、画像に適用されないスタイルオプションもあります。画像にオーバーレイを使用するには、代わりに背景画像を使用します。

画像のスタイル設定にクラスを使用すると、時間を大幅に節約できます。複数の画像にクラスを適用することができます。クラスを編集すると、そのクラスを持つすべての画像に影響します。特に、設定パネルではなく、スタイルパネルでサイズを指定する場合に便利です。

クラスを使えば、プロジェクトに画像を追加する際に、各画像のサイズを手動で設定する必要がなくなります。ここでは、画像に個性を与えるために使用できるスタイルプロパティをいくつか紹介します。

  • ボーダーの半径。1つまたは複数のコーナーに丸みをつけることができます。
  • ドロップシャドウ:画像がページから飛び出してきたように見せることができます。
  • フィルター ぼかし、グレースケール、セピアなど、さまざまなフィルターを使用できます。

6. alt属性の追加

Alt属性とは、何らかの理由で画像がページに読み込まれない場合に表示される代替テキストです。

画像の簡単な説明を記述することができます。これはアクセシビリティに役立つだけでなく、検索エンジンがその画像の内容を判断する際にも役立ちます。

設定パネルから、それぞれの画像にAlt属性を指定することができます。

  1. ‍画像を選択する
  2. [設定]タブに移動します。
  3. 画像のプロパティで、「altテキストを取得する」のチェックボックスをオンにします。
  4. イメージのaltテキストを含むフィールドを選択します。