写真

画像要素は、他の要素とは別にキャンバスに挿入できる画像プレースホルダーです。画像要素は、セクションや div ブロックなどの要素に適用される背景画像とは異なることに注意してください。

このチュートリアルでは、次のことを学びます。

1. 画像を挿入する方法
2. 画像設定を調整するテクニック
3. 写真を置き換える手順
4. 画像のスタイルを設定する方法
5. 代替テキストを追加する手順

写真を挿入する方法

Webflow サイトに次の画像を挿入することができます:

• 挿入パネル
• リソースパネル
• 高速検索
• あなたのデバイス

注記： 写真の最大ファイルサイズは4MBです。

貴重な情報: Webflow は、リソース パネルに画像をアップロードすると、レスポンシブな画像を生成します。ただし、Webflow にアップロードする前に画像を最適化することをお勧めします。画像の解像度について詳しくは、こちらをご覧ください。

インターネットで使用されている最も一般的な画像ファイル形式について読んでください。

挿入パネル

挿入パネルから画像要素を挿入するには:

1. に移動 挿入パネル
2. クリックしてドラッグ 写真 Webflowキャンバス上の要素

プレースホルダーを画像ファイルの 1 つに置き換えるには:

1. 選択してください 写真 キャンバス上の要素
2. 訪問 要素設定パネル
3. 選択する 写真を選択
4. 以前にアップロードした写真を選択するか、「雲”アイコンをクリックして新しい写真をアップロードします リソースパネル

リソースパネル

写真をアップロードしたら リソースパネル、写真をキャンバスにドラッグできます。

リソース パネルに写真をアップロードするには、次の 3 つの方法があります。

1. クリック "雲”アイコンをクリックすると リソースパネル デバイスからアップロードしたい写真を選択します
2. デバイスから写真をドラッグアンドドロップして リソースパネル
3. キャンバスに写真を直接ドラッグアンドドロップします

リソース パネルに画像を挿入する方法について詳しく学習します。

高速検索

高速検索は、Webflowデザイナーに組み込まれた強力な検索バーです。 指示 + え (Macの場合) または コントロール + え (Windows の場合) リソース パネルにアップロードした写真を名前で検索します。

あなたのデバイス

デバイスからキャンバスに画像を直接ドラッグできます。

写真のアップロードに関する問題を解決する方法

写真をアップロードしようとしたときに「アップロードに失敗しました」という警告が表示された場合は、次の点を確認してください。

• 画像ファイル画像ファイルが破損していないこと、正しいサポートされているファイル拡張子を持っていること、サイズが 4MB を超えていないことを確認してください。
• インターネット接続を確認してください: インターネット接続が遅い場合でも (最低 5 Mbps)、写真をアップロードできるはずです。インターネット速度に問題がないか確認するには、インターネット接続を再確認し、信号強度を確認してください。インターネット接続のトラブルシューティング方法については、こちらをご覧ください。
• ブラウザの拡張機能を調べる: 特定のブラウザ拡張機能は、Webflow Designer に画像をアップロードするときに問題を引き起こす可能性があります。シークレット モードまたはプライベート ブラウジング ウィンドウから画像をアップロードするか、ブラウザ拡張機能のトラブルシューティング方法を確認してください。

画像設定を調整する方法

画像設定にアクセスするには、4 つの方法があります。最初にキャンバス上の画像コンポーネントを選択し、次の操作を行います。

1. 画像コンポーネントをダブルクリックします
2. ヒット 入力/戻る キーボードのキー
3. 画像コンポーネントラベルの横にある「歯車」のようなアイコンをクリックします
4. プレス だ または、 要素設定パネル

内で 画像設定、あなたには次の能力があります:

• 画像を選択 — デフォルトのプレースホルダーを任意の画像に置き換えます アセットパネル画像コンポーネントをダブルクリックして選択するだけです 画像を選択 から 画像設定 ウィンドウ
• 画像のサイズを調整する — 画像の幅または高さの特定のピクセル値を指定します。これらの寸法はすべてのブレークポイントに適用されますが、幅と高さの個別の設定は、 要素設定パネル 各ブレークポイントごとに、画像の角をドラッグしてサイズを変更することもできます。画像のサイズを調整しても、親要素のサイズを超えないことに注意してください。
• 画像のHiDPIモードを有効にする — このボックスをチェックすると、画像のピクセル幅が半分になります。たとえば、幅 600 ピクセルの画像は 300 ピクセルで表示されます。このピクセル密度により、ほとんどの HiDPI モバイル ディスプレイで最適な画像品質が保証されます。
• 読み込み動作を指定する— 画像の読み込み設定を変更します。「遅延」読み込みでは、ページの読み込み時に表示可能な折り返し部分の上の画像を読み込み、ユーザーがスクロールすると折り返し部分の下の画像を読み込みます。「積極的」読み込みでは、サイトの読み込み時にページ上のすべての画像を即座に読み込みます。「自動」読み込みでは、ブラウザの設定に基づいて調整されます。

画像コンテンツの代替

キャンバスに画像を挿入した後は、必要に応じていつでも画像を置き換えることができます。画像を交換するには、次の手順を実行します。

1. キャンバス上の画像を強調表示する
2. に移動 要素設定パネル > 画像設定
3. 選択する 画像を置き換える 開く アセットパネル
4. 既存の画像を選択するか、新しい画像をアップロードしてください

イメージの美観の向上

活用する スタイルパネル 画像の視覚的な魅力を高めます。背景スタイルなど、一部のスタイル属性は画像には適用されないことに注意してください。画像にオーバーレイ効果を加える場合は、代わりに背景画像を使用することを検討してください。

クラスを利用して画像をスタイル設定すると、複数の画像にクラスを適用できるため、時間効率が最適化されます。クラスに適用されたスタイルは、それに関連付けられたすべての画像に影響します。この方法は、 スタイルパネル 代わりに 要素設定パネルクラスを利用することで、各画像のサイズを手動で調整する必要がなくなります。

画像にセンスを加えるために利用できるスタイル プロパティの例をいくつか示します。 

• コーナー半径: 1つまたは複数の辺に丸い角を実装します。半径を定義するには、 スタイルパネル > 国境 > 半径.
• ドロップシャドウ: 影の効果を作成して画像の見栄えを良くします。ドロップシャドウを設定するには、 スタイルパネル > 効果 > ボックスシャドウ.
• フィルター: ぼかし、グレースケール、セピア調などのさまざまなフィルターを適用します。フィルターを追加するには、 スタイルパネル > 効果 > フィルター.

代替テキストの追加

説明文は、画像内に隠された画像の簡潔な描写です (キャプションとは異なり、サイト ページには表示されません)。画像を表示または表示できない場合に、その画像を解釈します。これにより、視覚障害のある人や盲目の人が画像の内容を理解するのに役立ちます。また、画像ファイルが読み込まれていない場合やユーザーが画像を表示しないことを選択した場合に、画像の代わりに表示されます。検索エンジンは、代替テキストを使用して画像の内容を特定します。

画像に代替テキストを導入するには:

1. キャンバスに絵を描く
2. アクセス 要素設定パネル > 画像設定
3. 進む 代替テキスト 選択して カスタム説明
4. ドロップダウンメニューの下のスペースに代替テキストを作成します

画像が単なる装飾用（つまり、有益な情報を提供しない）である場合は、 装飾的な 代替テキストのドロップダウンから選択します。

代替テキストを指定することもできます アセットパネル アセット パネルから画像をサイトに追加するたびに、画像に代替テキストが設定されます。

動的な代替テキストの実装

動的なコレクション リストやコレクション テンプレート ページで画像要素を使用できます。画像フィールドに関する詳細をご覧ください。

これらの画像の動的な代替テキストを構成するには:

1. 選択してください 画像
2. に移動 要素設定パネル > 画像設定
3. 確認する altテキストを取得する
4. 画像の代替テキストを含むセクションを選択します（例：「名前」）