画像を接続
3分
画像要素を CMS に接続して、コレクションに保存されている画像をページ上に動的に表示します。
画像を CMS コレクションに接続するにはどうすればよいですか?
画像の「CMS に接続」アイコン
をクリックし、「画像を接続」パネルで接続を設定します:

- 「データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「データセットを追加」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
- 「画像を接続」パネルのドロップダウンをクリックし、画像の各部分を該当するコレクションのフィールドに接続します。「新しいフィールドを追加」を選択し、新しいコレクションのフィールドを作成して接続することもできます。
- 画像元の接続先:接続する「画像」フィールドを選択します。
- 代替テキストの接続先:画像の代替テキストとして使用するフィールドを選択します。「テキスト」、「数値」、「日付」、「日時」、「住所」、「タグ」フィールドから選択することができます。
- リンクの接続先:訪問者が画像をクリックした際の動作を選択します。アクション、動的ページ、またはフィールドセクションから、「送信」、「もっと見る」、「文書」、「URL」、「画像」、「動画」などのオプションを選択することができます。
画像の代替テキストには何を使用すればよいですか?
一般的に、CMS に接続した画像には、代替テキストとして使用するコレクションフィールドを使用、または作成することをおすすめします。コレクション内を見やすくするため、画像フィールドの横に代替テキストフィールドを作成し、「代替テキスト(画像名)」という名前を付けることができます。装飾的な画像の場合は、通常は代替テキストは必要でないため、代替テキストは未接続のままにすることができます。
画像をカスタム CMS フォームの「送信」ボタンとして使用することはできますか?
はい。画像またはボタン要素は、カスタム CMS フォームの「送信」ボタンとして使用することができます。カスタム CMS フォームの一部として追加するユーザー入力要素には、「送信」ボタンが必要となります。ボタンをクリックすると、入力要素の値が接続されたコレクションに保存されます。
画像を「送信」ボタンとして使用する方法:
- エディタに画像を追加します。
- 画像を、ユーザー入力要素に接続しているものと同じデータセットに接続します。
- 「クリック時の動作を選択」ドロップダウンをクリックし、「送信」を選択します。

ヒント:他のクリック時の動作を選択すると、画像を「もっと見る」ボタンや、「次のページ / 前のページ」ボタンとして使用することもできます。
データセットとは?
データセットは、ページ上の要素と CMS コレクション内のコンテンツを双方向接続するもので、これによってページ上にコレクションのコンテンツを表示したり、逆にユーザー入力をキャプチャしてコレクション内に格納したりできるようになっています。
データセットを使用すると、ページ要素のどの部分をコレクション内のどのフィールドに接続するかを制御できます。各データセットはコレクションに、データセットに接続された各要素はコレクション内のフィールドに接続します。これにより、表示するコンテンツと場所をまったく新しい方法で管理することができます。
複数の画像を同じデータセットに接続することはできますか?
はい。複数の画像を同じデータセットに接続することができます。データセットは 1つのコレクションにのみ接続することができますが、画像の各部分を異なるコレクションフィールドに接続することで、同じコレクション内の異なるコンテンツを使用することができます。
公開する前に画像の接続をテストするにはどうすればよいですか?
画像が正しく接続されているかを確認するには、エディタ右上の「プレビュー」ボタンをクリックしてください。これにより、データセットを介して接続したコンテンツが、どのように表示されるかを確認することができます。問題がなければ、変更内容を保存してライブサイトに公開してください。
お役に立ちましたか?
|