#14｜イメージについて

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

このレッスンでは

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

1. 画像を追加する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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