(再利用可能な)画像を追加する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXAには、ページ デザインを簡単にするための事前定義されたレンダリングのライブラリが付属しています。ツールボックスからページにレンダリングをドラッグして、ページにコンテンツを追加できます。このトピックでは、ページに画像を追加する方法について説明します。
画像レンダリング
画像レンダリング
画像レンダリングは、一度だけ使用する画像をページに追加します。画像を追加すると、SXAは画像のページのDataフォルダーの下にあるデータ ソース アイテムに画像を保存します。
画像レンダリングをページに追加するには:
-
ツールボックスを開きます。 Mediaセクションで、「 Image」をクリックします。クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。または、タッチパネルを使用してレンダリングを指でページにドラッグするか、ホームタブのレンダリングアイコンをクリックすることもできます。
-
レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが青色に点灯したら、レンダリングをページにドロップします。
-
メディアライブラリから画像を選択するには、Edit image propertiesをクリックして、関連するフィールドに入力します。
Section
Property
Description
キャプション
塗りつぶすと、画像の下にテキストが表示されます。
関連URL
URLを直接入力するか、他のオプションのいずれかを使用します。
Insert link
Sitecoreアイテムへのリンクを挿入します。画像をクリックすると、ユーザーがリダイレクトされます。
Insert media link
リンク先のメディア項目に移動し、リンクの追加プロパティを指定します。
Insert external link
リンクを挿入する外部WebサイトのURLを入力し、追加のプロパティを指定します。
Insert anchor
ページの特定のセクションに移動するリンクを追加するには、まずリンク先のセクションにアンカーを配置し、次にアンカーリンクを使用して、訪問者がスクロールせずにそのセクションにアクセスできるようにする必要があります。
Insert email
メールアドレスを入力します。画像をクリックすると、指定したメールアドレス宛てのメールが開きます。
Insert JavaScript
挿入するJavaScriptリンクを入力し、リンクの関連プロパティを指定します。
Clear
URLフィールドをクリアします。
画像
画像アイテムへのパスを直接入力するか、他のオプションのいずれかを使用します。
Browse
クリックすると、メディアライブラリで画像が見つかります。
Properties
クリックして画像のプロパティを変更します。
Clear
画像を削除します。
Refresh
画像を更新します。
External image link
別のページ上の画像に移動するリンクを指定します。
-
画像のプロパティを変更するには、「 Modify image appearance」をクリックします。
-
Image Propertiesダイアログボックスでは、次のフィールドを定義できます。
-
Alternate Text: 画像ファイルがロードされていない場合に表示される画像の代替テキストを提供します。
-
Default Alternate Text: 変更してはならない標準のSitecoreフィールド。
-
Width and Height: Dimensionsセクションでは、画像の幅と高さを変更できます。
-
Keep Aspect Ratio: 選択すると、画像のサイズを変更するときにアスペクト比が維持されます。
-
Horizontal Space: 画像と周囲のテキストとの間の水平方向のスペースを設定します。
-
Vertical Space:画像と周囲のテキストとの間の垂直方向のスペースを設定します。
-
画像(再利用可能)レンダリング
画像(再利用可能)レンダリング
ページ全体で画像を再利用すると非常に便利です。たとえば、ロゴ、プロフィール写真、商品画像をさまざまな場所で使用したい場合があります。再利用可能な画像は、サイトのDataフォルダ ( Site/Data/Images) に保存されます。
画像(再利用可能)レンダリングをページに追加するには:
-
ツールボックスを開きます。 Mediaセクションで、「 Image (Reusable)」をクリックします。
レンダリングをクリックしてドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。または、タッチパネルを使用してレンダリングを指でページにドラッグするか、HomeタブのRenderingアイコンをクリックします。
-
レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが青色に点灯したら、レンダリングをページにドロップします。
-
Select the Associated Contentダイアログボックスで、画像を選択し、「 OK」をクリックします。