(再利用可能) な画像の追加

概要

ページに画像を追加します。

SXA は、ページ デザインを容易にする定義済みのレンダリングのライブラリを付属しています。ツールボックスからページにレンダリングをドラッグすることで、ページにコンテンツを追加できます。このトピックでは、ページに画像を追加する方法について説明します。

画像のレンダリングは、一度だけ使用したい画像をページに追加します。画像を追加すると、SXA は画像をページの Data フォルダーの下にあるデータ ソース アイテムに格納します。

画像の格納

ページに画像レンダリングを追加するには、次の手順に従います。

  1. ツールボックスを開きます。[メディア] セクションで [画像] をクリックします。クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。または、タッチ パネルを使用してレンダリングをページに指でドラッグするか、[ホーム] タブの [レンダリング] アイコンをクリックします。

  2. レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが青色に点灯したら、レンダリングをページにドロップします。

  3. メディア ライブラリから画像を選択するには、[画像のプロパティの編集] をクリックして、関連するフィールドに入力します。

    セクション

    プロパティ

    説明

    キャプション

    入力すると、画像の下にテキストが表示されます。

    URL

    URL を直接入力するか、他のオプションのいずれかを使用します。

    リンクを挿入

    Sitecore アイテムにリンクを挿入します。画像をクリックすると、ユーザーはリダイレクトされます。

    メディア リンクを挿入

    リンクするメディア アイテムにナビゲートし、リンクの追加のプロパティを指定します。

    外部リンクを挿入

    リンクを挿入する外部 Web サイトの URL を入力し、追加のプロパティを指定します。

    アンカーの挿入

    ページの特定のセクションに移動するリンクを追加するには、最初にリンク先のセクションにアンカーを配置し、アンカー リンクを使用して、訪問者がスクロールせずにそのセクションにアクセスできるようにする必要があります。

    メールを挿入

    メール アドレスを挿入します。画像をクリックすると、指定したメール アドレス宛のメールが開きます。

    JavaScript の挿入

    挿入する JavaScript リンクを入力し、リンクに関連するプロパティを指定します。

    クリア

    URL フィールドをクリアします。

    画像

    画像アイテムへのパスを直接入力するか、他のいずれかのオプションを使用します。

    参照

    クリックして、メディア ライブラリで画像を検索します。

    プロパティ

    クリックして画像のプロパティを変更します。

    クリア

    画像を削除します。

    更新

    画像を更新します。

    外部画像リンク

    別のページの画像へのリンクを指定します。

  4. 画像のプロパティを変更するには、[画像の外観を変更する] をクリックします。

  5. [画像のプロパティ] ダイアログ ボックスで、次のフィールドを定義できます。

    • 代替テキスト: 画像ファイルが読み込まれていない場合に表示される画像の代替テキストを提供します。

    • 既定の代替テキスト: 変更してはならない標準の Sitecore フィールドです。

    • 幅と高さ: [寸法] セクションで、画像の幅と高さを変更できます。

    • アスペクト比を維持: 選択すると、画像のサイズを変更するときにアスペクト比を維持します。

    • 横のスペース: 画像と周囲のテキストとの横方向の間隔を設定します。

    • 縦のスペース: 画像と周囲のテキストとの縦方向の間隔を設定します。

ページ全体で画像を再利用すると非常に便利です。たとえば、さまざまな場所でロゴ、プロファイル写真、または製品画像を使用したい場合があります。再利用可能な画像は、サイト (Site/Data/Images) の Data フォルダーに保存されます。

ページに画像 (再利用可能) レンダリングを追加するには、次の手順に従います。

  1. ツールボックスを開きます。[メディア] セクションで、[画像 (再利用可能)] をクリックします。

    クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできるプレースホルダーが青色に点灯します。または、タッチ パネルを使用してレンダリングをページに指でドラッグするか、[ホーム] タブの [レンダリング] アイコンをクリックします。

  2. レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが青色に点灯したら、レンダリングをページにドロップします。

  3. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、画像を選択して [OK] をクリックします。