Diviのギャラリーモジュールの使い方

こんにちは、根本です。今回は、Diviのギャラリーというモジュールの使い方をご紹介していきます。

Diviのギャラリーモジュールとは？

Diviのギャラリーモジュールでは、画像をギャラリー形式で表示することができます。

タイプは2種類あって、1つがグリッドと言って画像が一覧で表示されるタイプになります。

2つ目のタイプは、スライダー形式です。矢印や画像の下部に表示されるドットをクリックすると、次の画像がスライドして表示することができるタイプになります。

コンテンツ設定

では、実際に使い方を確認していきましょう。まずは、「コンテンツ」の設定です。

画像

• 画像：ギャラリーに表示する画像を選択します。
• 画像の順番：「初期設定」の順番で表示するか「ランダム」で表示するかを選択します。
• 画像数：1つのページに何枚の画像を表示するか設定します。

要素

• タイトルとキャプションを表示：「はい」にすると画像に設定されているタイトルとキャプションが画像下に表示されます。
• ページネーションを表示：「はい」にすると、モジュールの左下にページネーションが表示されます。

デザイン設定

レイアウト

• レイアウト：「グリッド」形式か「スライダー」形式を選択します。
• サムネイル方向：「レイアウト」で「グリッド」を選択した場合に表示される項目で、「横向き書式」で画像を横向きに、「ポートレイト」で縦長に表示することができます。

オーバーレイ

• オーバーレイアイコン色：オーバーレイ時（画像にカーソルが置かれた時）の色を設定します。
• オーバーレイの背景色：オーバーレイ時の背景色を設定します。
• オーバーレイアイコン：オーバーレイで表示する際のアイコンを選択します。

画像

• 画像 角丸長方形：画像の四角の丸みを調節します。
• 画像 ボーダースタイル：画像の4つの辺のうち、どこにボーダーをつけるのかを選択します。
• 画像 ボーダー幅：ボーダーの幅を調節します。
• 画像 ボーダーカラー：ボーダーの色を設定します。
• 画像 ボーダースタイル：ボーダーのタイプを選択します。
• 画像とビデオ：画像に付けるぼかしを選択します。

基本的には、上記の設定になりますが、その他の項目については画像の細かい色合いをブレンドして設定することができます。

テキスト

• 文字列の揃え：画像のタイトルとキャプションの位置を設定します。
• テキストの色：画像のタイトルとキャプションの色を設定します。
• 文字サイズ：画像のタイトルとキャプションの文字のシャドーをつけるのかどうか、つけるのであれば、どのタイプをつけるのかを設定します。

タイトル・キャプション・ページネーションを表示 テキスト

• 見出し3を挿入：ここは「タイトル テキスト」のみに表示され、画像タイトルのHタグを選択します。デフォルトでH3タグが選択されていますが、必要に応じて別のものに変更しましょう。
• フォント：テキストのフォントを変更します。
• ソフトライト：文字の太さを選択します。
• 書式のコピー：テキストを斜体にしたり、アンダーラインを引いたり、打ち消し線を引くことができます。複数選択することも可能です。
• 文字の揃え：テキストの位置を設定します。
• テキストカラー：文字の色を設定します。
• 文字サイズ：文字の大きさを調節します。
• 文字間隔：テキス間の隙間を調節します。
• 行の高さ：縦の幅を調節します。
• 文字サイズ：タイトルテキストにかけるシャドーを設定します。