画像一覧セクション

一連の画像と関連テキストを表示する場合は、[画像リスト] セクションを使用します。

このセクションを使用すると、Web サイト内のさまざまなページに簡単にリンクしたり、リンクごとに画像や説明を追加したい場所にリンクを追加したりできます。

ここで扱われる内容：

1. 画像リストとは？
2. ページに画像リスト セクションを追加する
3. リスト アイテムの追加と編集
4. シーケンス リスト アイテム
5. リスト項目の削除
6. セクション レイアウトの変更
7. スタイルオプション
8. カルーセル スタイル
9. 実例

イメージリスト

• 画像リストは、画像の説明を追加したり、リンクやボタンを追加して Web サイトの他のページや他のリンクに接続したりできる画像のコレクションです。

画像一覧セクションを追加

• ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
• あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。

• 今すぐ セクションカテゴリ 左側にあります。
• 選択する リスト（1） カテゴリをクリックし、 イメージリスト タブ (2) から選択できます さまざまなレイアウト 画像リストの（3）。

• 任意のセクション レイアウトを選択し、クリックしてページに追加します。

リスト項目の追加と編集

リストアイテムを追加

セクションを追加したら:

• セットアップボタンをクリックすると、セットアップが開始されます 画像リストの編集 (1) ボタンをクリックして、リスト項目パネルを開きます。

• セットアップボタンをクリックすると、セットアップが開始されます アイテムを追加 (2) ボタンをクリックして、新しいリスト アイテムを追加します。
• あなたは D複製または削除 (3) リストアイテム。

リスト項目の編集

編集するリスト項目をクリックします。 特定のリスト項目の編集オプションが開きます。

ここから、次のことができます。

• 画像のアップロード/削除 (1) リスト項目の場合。 を設定することもできます 画像のアクセントカラー ここからは画像ホバーで表示されます。
• 加える 役職 (2)、字幕 (3)、および説明 (4) リスト項目の。
• 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
  説明を追加する前に確認してください この 記事。

• のリンク ビルダー アイコンをクリックします。 タイトルリンク (5) リンク ビルダーを開いて、リスト アイテムのタイトルを任意のページにリンクします。 もっと知る 約 リンクビルダー.
• で開くようにリンクを設定します 新しいタブまたは同じタブ内 とします。
• 任意のタイプを追加します リンク (7)リスト項目へ。 ボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.
• Save (8) お客様の変更。

実際の画像リスト アイテムの編集を参照してください。

シーケンスリスト項目

• リスト項目を簡単にドラッグ アンド ドロップして、順序を変更できます。

実際のイメージ リスト アイテムの順序付けを参照してください。 

リスト アイテムを削除する

リスト アイテムを追加したら、それを編集および削除できます。

• セットアップボタンをクリックすると、セットアップが開始されます 削除 画像リスト項目の横にあるアイコン。
• をクリックします。 削除 確認ポップアップのボタン。
• 最後に、 保存 あなたの変更。

実際のイメージ リスト アイテムの削除を参照してください。 

セクション レイアウト

• セットアップボタンをクリックすると、セットアップが開始されます 画像一覧の管理 （1）ボタン。
• 選択する レイアウト (2) タブ。
• 選択 (3) セクションのレイアウトと Save (4) 変更。

セクションのスタイルを設定する

• ソフトウェアの制限をクリック 画像一覧の管理 (1)
• 選択する スタイル（2） タブには何も表示されないことに注意してください。
• セクション要素のスタイルを変更し、 保存 (3) あなたの変更。

セクションには複数のスタイル オプションがあります。 

アイテム 

1. に選択します。 アイテムを表示 in 行と列 or カルーセル 
   • を選択した場合 行と列 オプションを選択すると、リスト項目が行と列に配置されます。 この場合、行数と列数を指定する必要があります。
   • を選択した場合 カルーセル オプションを選択すると、リスト項目がスライドショーとして表示されます。 もっと知る.
2. をセットする 列の数 画像一覧です。 1 ～ 10 列から選択できます。
3. 特定します 列間のスペース リスト項目の。
4. 特定します 行間のスペース リスト項目の。
5. 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。
6. 整列 コンテンツを水平方向に表示 画像リストで。 左、右、または中央揃えに設定できます。
7. 整列 コンテンツを縦方向に表示 画像リストにあります。 上揃え、中央揃え、下揃えに設定できます。

ステップ 1 でカルーセル オプションを選択した場合、次の追加オプションが表示されます。

8. に選択します。 カルーセルをループする どうか。
9. カルーセルの場合は、 ナビゲーションコントロール. コントロールなし、矢印 – 中央下/右上/右下、シェブロン、ドットから選択できます。

モバイルディスプレイ

10. の数を設定します グリッド列 モバイルデバイス向け。 最大 3 列まで設定できます。
11. 定義 間隔 グリッド間 (ピクセル単位)。

画像 

12. 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
13. リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.

• 分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。

画像ホバー時 

14. 選択する 画像ホバーの色 の アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度.
15. を選択した場合 色を指定 オプションを設定してから ベースのホバーの色と不透明度 リストアイテム用。
16. をセットする 要素 セクションのリスト項目の色。
17. に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.
18. 選ぶ アニメーションスタイル 画像の上にカーソルを置いたときの画像の場合。

サイズとスペース 

19. 特定します 画像の幅 リストアイテム用。
20. 特定します コンテンツの幅 リストアイテム用。
21. 特定します セクション見出しの下のスペース ピクセルで。
22. 特定します 画像の下のスペース リスト項目の (%)。
23. 特定します タイトルの下のスペース リスト項目の (%)。
24. 特定します 字幕の下のスペース リスト項目の (%)。

テキスト 

25. セットアップボタンをクリックすると、セットアップが開始されます 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。 
26. をセットする 役職 セクションのリスト項目のフォント スタイル。
27. をセットする サブタイトル セクションのリスト項目のフォント スタイル。
28. デフォルトを設定する 説明 セクションのリスト項目のフォント スタイル。

カード 

29. 方法を参照してください カードの管理に。

Shadow

30. ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
31. 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
    カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS.
32. プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。

ボタンとリンク

33. 方法を参照してください のスタイリングを管理する ボタンとリンク。
34. Save すべてのスタイルが変わります。

カルーセル スタイル

カルーセル スタイルでは、リスト アイテムがスライドショーとして表示されます。つまり、リスト アイテムは次々と循環します。

カルーセル スタイルの仕組みをご覧ください。 

ライブ画像リストは次のとおりです。 

ライブ デモ サイトを表示します。 

角の半径がどのように機能するかを確認してください。 

関連記事：

• セクションの種類
• セクション間にスペーサー/ディバイダーを追加する
• あなたのウェブサイトを構築する