メディア – 画像
画像 コンテンツタイプを使用して、JPG、GIF、またはPNG画像をPage Builder ステージ に追加します。 デフォルトのデスクトップ画像に加えて、モバイルデバイス用のセカンダリ画像を指定できます。 画像の下に表示されるキャプションを追加し、画像をURL、製品、カテゴリ、またはページにリンクすることもできます。
画像ツールボックス
画像コンテナにカーソルを合わせると、画像ツールボックスが表示されます。
画像を追加
-
Page Builder パネルで、Mediaを展開し、Image プレースホルダーをターゲットコンテナにドラッグします。
行、列、またはタブに画像を追加できます。 次の例では、画像を空の列にドラッグします。
-
画像アセットを追加するには、次のいずれかの方法を使用します。
note NOTE 最大ファイルサイズは4 MBです。 サポートされているファイル形式は、JPG、GIF、PNGです。 -
新しい画像をアップロード ：この方法を使用して、システムから新しい画像ファイルをアップロードします。
-
Upload Imageをクリックします。
-
画像を見つけて選択し、ギャラリーとターゲットコンテナに追加します。
代わりに、システムから画像ファイルをドラッグして、カメラ （
-
-
既存のアセットを選択 ：この方法を使用して、メディアストレージ/ギャラリーから既存の画像アセットを選択します。
-
Select from Galleryをクリックします。
-
ツリーを使用して画像に移動します。
-
サムネールをクリックし、Add Selectedをクリックします。
-
-
Adobe Stock画像を検索して選択 ：この方法を使用して、Adobe Stockから画像を検索します。
note NOTE この方法では、管理者用に設定されたAdobe Stock統合が必要です。 -
Search Adobe Stockをクリックし、画像を検索します。
-
プレビューまたはライセンスされた画像をギャラリーに保存します。
Adobe Stock Assetsの操作について詳しくは、Adobe Stock Imagesの使用を参照してください。
-
ギャラリーでアセットのサムネールを選択し、Add Selectedをクリックします。
-
画像は、プレースホルダーの場所にあるターゲットコンテナに表示されます。 背景画像とは異なり、画像を現在のコンテナ内の別の位置または別のコンテナに移動できます。
note NOTE バナーおよび スライダーのコンテンツタイプには、画像のアップロードおよび_ギャラリーから選択_のオプションも含まれています。 
-
画像設定の変更
-
画像コンテナにカーソルを合わせてツールボックスを表示し、設定 （
ファイル名、サイズ、ファイルサイズは、現在の画像の下に表示されます。
-
現在の Image を変更するには、次のいずれかの操作を行います。
-
新しい画像をアップロード ：この方法を使用して、システムから新しい画像ファイルをアップロードします。
-
Upload Imageをクリックします。
-
画像を見つけて選択し、ギャラリーとターゲットコンテナに追加します。
-
-
既存のアセットを選択 ：この方法を使用して、メディアストレージ/ギャラリーから既存の画像アセットを選択します。
-
Select from Galleryをクリックします。
-
ツリーを使用して画像に移動します。
-
サムネールをクリックし、Add Selectedをクリックします。
-
-
Adobe Stock画像を検索して選択：この方法を使用して、Adobe Stockから画像を検索します。
note NOTE この方法では、管理者用に設定されたAdobe Stock統合が必要です。 -
Search Adobe Stockをクリックし、画像を検索します。
-
プレビューまたはライセンスされた画像をギャラリーに保存します。
Adobe Stock Assetsの操作について詳しくは、Adobe Stock Imagesの使用を参照してください。
-
ギャラリーでアセットのサムネールを選択し、Add Selectedをクリックします。
-
-
-
Mobile Imageを追加するには、前の手順で説明したのと同じ方法を使用して、モバイルデバイスでの表示に使用する画像を選択します。
-
必要に応じて、画像の Link を指定します。
リンクは、顧客が画像をクリックしたときに表示される宛先ページです。 次の3つのリンクタイプのいずれかを使用できます。
-
URL – 相対URLまたは完全修飾URLのいずれかにリンクします。
-
Product – 製品名またはSKUに基づいて宛先ページを識別します。 部分的または完全な名前に基づいて、製品を名前で検索します。 検索結果リストから商品を選択します。
-
Category – 宛先ページをカテゴリ ツリー内の特定のカテゴリまたはサブカテゴリとして識別します。 部分的または完全な名前に基づいてカテゴリを検索します。 表示されたツリーの展開されたセクションからカテゴリを選択します。
-
Page – 宛先ページを特定のコンテンツ ページとして識別します。 部分的または完全な名前に基づいてページを検索します。 検索結果リストからページを選択します。
訪問者がストアから離れるのを防ぐ場合は、Open in new tab チェックボックスを選択します。 チェックボックスをオフにすると、リンクされた宛先が同じブラウザータブで開き、訪問者をストアから効果的に移動させることができます。
-
-
Image Captionを追加するには、画像の下に表示するテキストを入力します。
キャプションの形式は、現在のテーマに関連付けられているスタイルシートによって決まります。
キャプションは通常、画像の下に表示され、訪問者と検索エンジンに画像に関する情報を提供します。 サイトが複数の言語で利用できる場合は、同じ画像を使用しながら、キャプションを翻訳します。 HTMLでは、
<figcaption>タグは<figure>タグのサブセットです。<figcaption>This is the image caption</figcaption> -
必要に応じて、他の設定を更新します。
-
完了したら、Saveをクリックして設定を適用し、Page Builder ワークスペースに戻ります。
画像を移動
-
画像コンテナにカーソルを合わせてツールボックスを表示し、移動 （
-
赤いガイドラインのすぐ下にある新しい位置に画像を選択してドラッグします。
画像を削除
-
画像コンテナにカーソルを合わせてツールボックスを表示し、削除 （
-
確認を求められたら、OKをクリックします。
検索エンジン最適化
これらの設定のテキストは、検索エンジンに表示され、ページのインデックス作成方法を改善します。
-
「Alternative Text」に、表示するデジタルアクセシビリティツールのalt テキスト説明を入力します。
代替テキストの使用はアクセシビリティのベストプラクティスであり、一部のロケールでは法律で義務付けられています。 HTMLでは、
alt属性はimageタグ<image title="tooltip" alt="description" src="image.jpg">のサブセットです。 -
Title Attributeの場合、マウスオーバーにツールチップとして表示するテキストを入力します。
ベストプラクティスとして、説明的でキーワードが豊富なタイトルを選択して、検索エンジンによる画像のインデックス付け方法を改善します。 HTMLでは、
title属性はimageタグ<image title="tooltip" alt="description" src="image.jpg">のサブセットです。
Advanced
-
コンテナに追加された画像の水平方向の配置を制御するには、Alignmentを選択します。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto オプション 説明 Default現在のテーマのスタイルシートで指定されている整列のデフォルト設定を適用します。 Left画像コンテナの左端に沿って画像コンテンツを整列させ、指定された任意のパディングを許可します。 Center指定したパディングを許可して、画像コンテナの中央に画像コンテンツを整列させます。 Right画像コンテンツを画像コンテナの右端に沿って、指定された任意のパディングを許可して整列させます。 -
画像コンテナのすべての4つの側面に適用されるBorder スタイルを設定します。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto オプション 説明 Default関連付けられたスタイルシートで指定されたデフォルトの境界線スタイルを適用します。 Noneコンテナの境界を表示しません。 Dottedコンテナの境界線が点線で表示されます。 Dashedコンテナの境界線が破線で表示されます。 Solidコンテナの境界線が実線として表示されます。 Doubleコンテナの境界線が2行で表示されます。 Grooveコンテナの境界線は、溝付き線として表示されます。 Ridgeコンテナの境界線は、うね付きの線として表示されます。 Insetコンテナの境界線がインセット線として表示されます。 Outsetコンテナの境界線がアウトセット線として表示されます。 -
None以外の境界線スタイルを設定する場合は、境界線の表示オプションを完了します。
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto オプション 説明 Border Color 色見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の16進数値を入力して、カラーを指定します。 Border Width 境界線の幅のピクセル数を入力します。 Border Radius 境界線の各隅を丸めるために使用する半径のサイズを定義するピクセル数を入力します。 -
（オプション）画像コンテナに適用する現在のスタイルシートから CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
Margins and Paddingの値をピクセル単位で入力して、画像コンテナの外側の余白と内側の余白を指定します。
画像コンテナダイアグラムに対応する各値を入力します。
table 0-row-2 1-row-2 2-row-2 layout-auto コンテナ領域 説明 Margins コンテナのすべての側面の外側のエッジに適用される空白スペースの量。 Padding コンテナのすべての側面の内側エッジに適用される空白スペースの量。