一連の画像と関連テキストを表示する場合は、[画像リスト] セクションを使用します。
このセクションを使用すると、Web サイト内のさまざまなページに簡単にリンクしたり、リンクごとに画像や説明を追加したい場所にリンクを追加したりできます。
ここで扱われる内容：
- 画像セクションとは何ですか?
- 画像の追加セクション
- リスト項目の追加と編集
- シーケンス リスト アイテム
- リスト項目の削除
- 要素の管理
- セクション レイアウトの変更
- スタイルオプション
- カルーセル スタイル
- 実例
イメージリスト
画像リストは、画像の説明を追加したり、リンクやボタンを追加して Web サイトの他のページや他のリンクに接続したりできる画像のコレクションです。
画像を追加セクション
- ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
- あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。
- 今すぐ セクションカテゴリ 左側にあります。
- 選択する コンテンツ （1）カテゴリーをクリックし、 画像 タブ (2) から選択できます さまざまなレイアウト イメージリスト とします。
- 任意のセクション レイアウトを選択し、クリックしてページに追加します。
- からセクション幅を管理できます。 セクション設定 とからのコンテンツの幅 コンテンツ スタイル.
- このセクションでアップロードする必要がある理想的な画像サイズは、列の数によって異なります。 もっと知る.
- タイトル、サブタイトル、および説明は短く鮮明にします。
- 説明フィールドで、 Enter 改行を与えるボタンと Shiftキー+ Enterキー ボタンをクリックして、次の行から開始します。
リスト項目の追加と編集
リストアイテムを追加
セクションを追加したら:
- 以下を行うには、 コンテンツを編集する (1) ボタンをクリックして、リスト項目パネルを開きます。
- 以下を行うには、 アイテムを追加 (2) ボタンをクリックして、新しいリスト アイテムを追加します。
- あなたは D複製または削除 (3) リストアイテム。
リスト項目の編集
編集するリスト項目をクリックします。 特定のリスト項目の編集オプションが開きます。
ここから、次のことができます。
- プライマリイメージとセカンダリイメージのアップロード/削除 (1)
あなたはアップロードすることができます 二次画像 と一緒に プライマリ画像 各リスト項目に設定されます。ユーザーが項目の上にマウスを移動すると、プライマリ画像の代わりにセカンダリ画像が表示されます。さらに、 画像のアクセントカラー画像の上にマウスを移動すると表示されます。 - 加える Title (2)、字幕 (3)、および説明 (4) リスト項目の。
- 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
説明を追加する前に確認してください この 記事。
5. クリック時のアクション
個々のアイテムのクリック動作をカスタマイズできます。 イメージリスト セクション。利用可能なオプションは次のとおりです。
- リンクへ移動
このオプションを選択すると、 リンクビルダーを使用すると、このアイテムにハイパーリンクを追加できます。このリンクにより、ユーザーを Web サイト内の別のページまたは外部 URL に誘導できます。 もっと知る 自己紹介 リンクビルダー. - ライトボックスで開く
このオプションではアイテムを拡大して表示します ライトボックス クリックすると表示されます。このモードでは、 サブタイトル の三脚と 詳細説明 アイテムに関連付けられた情報はグリッド ビューには表示されませんが、ライトボックス モードでは表示されます。 - 何もしません
このオプションを選択すると、アイテムをクリックできなくなります。選択すると、アイテムをクリックしてもアクションはトリガーされません。
6. 新しいウィンドウでリンクを開く: で開くようにリンクを設定します 新しいタブまたは同じタブで。 これは次の場合にのみ表示されます リンクへ移動 オプションが選択されている場合は、 クリック時のアクション メニュー。
7. ボタンとアイコン: 任意のタイプを追加します リンク リスト項目にボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.
8. カードスタイルのオーバーライド
セクションのカードスタイル設定を上書きすることができます。 スタイル設定 画像リスト セクションで各アイテムのカードを個別にカスタマイズできます。これにより、異なるリスト アイテムに固有のスタイルを適用して、カスタマイズ性を高めることができます。
さらに詳しく ダイナミックセクションのカードオプションについて。
9. シェイプスタイルのオーバーライド
オーバーライド オプションを使用すると、画像リスト セクション内の各画像に個別に異なる形状を割り当てることができ、各アイテムの視覚スタイルをより細かく制御できます。 さらに詳しく シェイプマスクについて。
10. 保存: カスタマイズを行った後、変更を保存します。
- 有効にする カード からのオプション スタイル設定 個々のアイテムのカードを上書きしてカスタマイズします。
- 有効にする シェイプマスク からのオプション スタイル設定 各項目ごとに図形のスタイルを個別に設定できます。
実際の画像リスト アイテムの編集を参照してください。
シーケンスリスト項目
- リスト項目を簡単にドラッグ アンド ドロップして、順序を変更できます。
実際のイメージ リスト アイテムの順序付けを参照してください。
リスト アイテムを削除する
リスト アイテムを追加したら、それを編集および削除できます。
- 以下を行うには、 削除 画像リスト項目の横にあるアイコン。
- をクリックします。 削除 確認ポップアップのボタン。
- 最後に、 保存 あなたの変更。
実際のイメージ リスト アイテムの削除を参照してください。
一度削除されたリスト項目は復元できません。
画像リストの要素を管理する
画像リストセクションには、 要素タブ セクション内のさまざまな要素の表示を簡単に管理できます。シンプルなトグル スイッチを使用すると、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にすることができます。
- 以下を行うには、 コンテンツを編集する （1）ボタン。
- 選択する 要素 (2) タブ。
- 変更を加えたら、 Save （3）ボタン。
セクションのオプション
- 見出しを表示: 画像リストセクションの見出しの表示を有効または無効にします。
- ボタンを表示: セクション レベルでボタンを表示するかどうかを制御します。
アイテムオプション
- 画像を表示: 画像の表示/非表示を切り替えます。
- ショーのタイトル: タイトルを表示するかどうかを制御します。
- 字幕を表示: 字幕を有効または無効にします。
- 説明を表示: アイテムの説明の表示を管理します。
- ボタンを表示: 個々の項目のボタンを表示するかどうかを決定します。
セクション レイアウト
- 以下を行うには、 コンテンツを編集する （1）ボタン。
- 選択する レイアウト (2) タブ。
- 選択する セクションのレイアウトと Save (3) 変更。
全幅セクション/タブ付きリスト セクションを作成するには、25 ～ 29 の範囲のレイアウトを選択します。
- タブ付きリストのレイアウトをページに簡単に追加できます。
- 水平タブ/垂直タブのレイアウトから選択するオプションがあります。
- 比較ベースのセクションを作成するのに役立ちます。
セクションのスタイルを設定する
- ソフトウェアの制限をクリック コンテンツを編集する（1）
- 選択する スタイル（2） タブには何も表示されないことに注意してください。
- セクション要素のスタイルを変更し、 保存 (3) あなたの変更。
セクションには複数のスタイル オプションがあります。
- 表示オプション
- モバイルディスプレイ
- アラインメント
- 文字サイズ
- 間隔
- セクションの見出し
- 画像オプション
- シェイプマスク
- 画像ホバーオプション
- イメージボーダー
- カードオプション
- 影のオプション
- ボタンとリンク
ディスプレイ
- に選択します。 アイテムを表示 in 行と列 / カルーセル / ショーケース
- をセットする 列の数 画像一覧です。 1 ～ 10 列から選択できます。
- 特定します 列間のスペース リスト項目の。
- 特定します 行間のスペース リスト項目の。
ステップ 1 でカルーセル オプションを選択した場合、次の追加オプションが表示されます。
- スムーズ スクロールを有効にする: カルーセル内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスが実現します。
- 自動スライド: ユーザーの操作なしでスライドを自動的に回転させます。
- 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
- 自動再生の遅延: 自動再生が有効になっている場合、各スライドの切り替え間の時間間隔を設定します。
- カルーセルループ: スライドの連続ループを有効にして、最後のスライドの後にカルーセルがシームレスに再開されるようにします。
- カルーセル コントロール：を選択 ナビゲーションコントロールコントロールなし、矢印（中央下/右上/右下）、シェブロン、ドット、水平スクロールから選択できます。
- フェードエッジ: カルーセルの端に微妙なフェード効果を適用します。画像がビューに出入りするときに画像をソフトにブレンドすることで、ユーザー エクスペリエンスが向上します。
ステップ 1 で Showcase オプションを選択した場合は、次の追加オプションが表示されます。
- 効果： フェード、フリップ、カード、カバーフロー (傾斜)、またはカバーフロー (フラット) の 5 つのアニメーション効果から選択して、画像の遷移を制御します。
- スムーズスクロールを有効にする: ショーケース内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスを実現できます。
- 自動スライド: ユーザー入力なしで画像を自動的に切り替えます。
- 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
- 自動再生遅延: 自動再生が有効な場合のスライド間の時間を設定します。1秒から10秒までの任意の値を選択できます。
- カルーセルループ: これを有効にすると、カルーセルが無限にループし、連続再生が可能になります。
- カルーセルコントロール: カルーセル コントロール設定では、矢印 (中央下、右上、右下)、ドット、コントロールなしなどのオプションを使用して、ユーザーがスライド間を移動する方法を選択できます。
モバイルディスプレイ
- の数を設定します グリッド列 モバイルデバイス向け。 最大 3 列まで設定できます。
- 定義 間隔 グリッド間 (ピクセル単位)。
スタジオ設定に基づくデバイス固有の列レイアウト:
アラインメント
- 整列 コンテンツを水平方向に表示 画像リストで。 左、右、または中央揃えに設定できます。
- 整列 コンテンツを縦方向に表示 画像リストにあります。 上揃え、中央揃え、下揃えに設定できます。
- 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。
文字サイズ
- 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。
- をセットする Title セクションのリスト項目のフォント スタイル。
- をセットする サブタイトル セクションのリスト項目のフォント スタイル。
- デフォルトを設定する 詳細説明 セクションのリスト項目のフォント スタイル。
- このオプションを有効にすると 数字をアニメーション化する に存在する Title の三脚と サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。
間隔
- 特定します 画像の幅 リストアイテム用。
- 特定します コンテンツの幅 リストアイテム用。
- 特定します セクション見出しの下のスペース ピクセルで。
- 特定します 画像の下のスペース リスト項目の (%)。
- 特定します タイトルの下のスペース リスト項目の (%)。
- 特定します 字幕の下のスペース リスト項目の (%)。
セクションの見出し
- 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
- 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
- をセットする 仕切りの厚さ (ピクセル単位)。
- 特定します 仕切りの色 カラーピッカーから。
- 選択する ディバイダースタイル をドロップダウンから選択します。
- をセットする 見出しの幅 セクション タイトルの表示幅を定義します。最小値は 50% です。
画像
- 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
- リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.
使い方 コーナー半径 フィールドでは、さまざまな形状のリスト アイテム イメージを作成できます。 ここで 500 px を指定すると、画像は円形で表示されます。
- 分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。
シェイプマスク
- シェイプマスク: このトグルを有効にすると、画像リスト セクションの画像にシェイプ マスクが適用されます。有効にすると、選択したシェイプによって画像がそのフォームに視覚的にクリップされます。
- 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイリングできます。
- ストレッチ： このオプションを有効にすると、選択した図形が画像コンテナに収まるように引き伸ばされます。これにより、図形が利用可能なスペースを均等に埋め尽くし、さまざまな画面サイズでの視覚的な配置が向上します。
画像ホバー時
- 選択する 画像ホバーの色 の アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度各アイテムのアクセントカラーを以下から指定できます。 アイテムを編集 パネル。
- を選択した場合 色を指定 オプションを設定してから オーバーレイの色と不透明度.
- をセットする オーバーレイテキストの色 ホバーすると表示されます。
- に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.
- 選ぶ アニメーションスタイル 画像の上にカーソルを置いたときに表示されます。
- 許可する場合は選択してください 画像の遷移 ホバーしているかどうか。
- ドロップダウンリストから トランジションスタイル ホバー遷移用。使用可能なオプションはフェードと反転です。
イメージボーダー
- 境界線の有効化/無効化 トグルを切り替えて画像の周りを囲みます。
- を選択してください 共通の境界線 画像のすべての面、または指定することもできます 別々に境界線を付ける それぞれの側に。
- 特定します 幅 国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
- まず 境界線の色 カラーピッカーから。
- 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
- を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。
カード
- 方法を参照してください カードの管理に。
Shadow
- ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
- 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS. - プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。
ボタンとリンク
- 方法を参照してください のスタイリングを管理する ボタンとリンク。
- Save すべてのスタイルが変わります。
カルーセル スタイル
カルーセル スタイルでは、リスト アイテムがスライドショーとして表示されます。つまり、リスト アイテムは次々と循環します。
カルーセル スタイルの仕組みをご覧ください。
ライブ画像リストは次のとおりです。
角の半径がどのように機能するかを確認してください。