Diviのスライダーを投稿するモジュールの使い方

こんにちは、根本です。今回は、Diviのスライダーを投稿するというモジュールの使い方をご紹介していきます。

Diviのスライダーを投稿するモジュールとは？

スライダーを投稿するモジュールというのは、英語で「Post Slider」となっています。DiviはGoogle翻訳（だったと思いますが）を使用しているので、変な訳になってしまっていますが、記事をスライダーで表示することができるモジュールです。

コンテンツ設定

まずは、「コンテンツ」の設定から確認していきたいと思います。

コンテンツ

• 投稿数：1つのモジュールに何記事表示するのかを設定します。
• 含まれるカテゴリー：どのカテゴリー直下にある記事を表示するのかを設定します。
• 順序：どんな順番で記事を表示するかを設定します。
• ボタン：
• コンテンツ表示：抜粋文章だけを表示したい場合は「抜粋を表示」、全部の文章を表示したいのであれば「内容を表示」を選択します。
• 抜粋投稿を使用する：（「コンテンツ表示」で「抜粋を表示」を選択すると表示されます。）記事の編集画面にある「抜粋」を使用するかどうかの設定です。
• 抜粋の長さ：（「コンテンツ表示」で「抜粋を表示」を選択すると表示されます。）抜粋文章の文字数を設定します。
• オフセットすう：記事をトップから何記事非表示にするか設定します。

「抜粋投稿を使用する」というのは、記事の編集画面にあるものです。上の画像のような欄が設定されていますが、ここに入力した文章が反映されます。

要素

• 矢印を表示：スライドを切り替えるための矢印を表示するか設定します。
• スライドショーのコントロール：スライドの下部に表示されるドットを表示するかどうかを設定します。
• 「もっと読み込む」ボタンを表示：記事のリンクが埋め込まれた「もっと読み込む」というボタンを表示するかどうかを設定します。
• ポストメタを表示する：記事のメタ情報を表示するかを設定します。

注目画像

• 注目画像を表示：モジュール内に注目画像を表示するかどうか選択します。
• 特集画像配置：サムネイル画像の位置を選択します。

デザイン設定

オーバーレイ

• 背景のオーバーレイを使用する：「はい」に切り替えることで、スライダーの背景にオーバーレイ色を設定できるようになります。
• 背景オーバーレイカラー：背景のオーバーレイ色を設定します。
• テキストのオーバーレイを使用：「はい」に切り替えることで、スライダーのタイトルとメタ情報テキストの背景にオーバーレイ色を設定できるようになります。
• テキストのオーバーレイ色：テキスト背景のオーバーレイ色を設定します。
• オーバーレイテキストのボーダーラジアス：テキストオーバーレイの4つ角の丸みを調節します。

「オーバーレイ」は「背景オーバーレイ」と「テキストーバーレイ」の2種類ありますが、位置関係は上の画像のようになります。

ナヴィゲーション

• 矢印の色：スライダーに表示される矢印の色を設定します。
• ドットナビゲーションカラー：モジュールの下部に表示されるドットの色を設定します。

画像

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

「画像」では、記事のサムネイル画像のことです。「コンテンツ」の「注目画像」にある「特集画像配置」で「背景」以外を選んだ場合に適用されます。上にリストアップしている設定項目以外については、色合いの設定です。

テキスト

• 文字列の揃え：オーディオモジュールに表示される全てのテキストの整列を設定します。
• テキストの色：全てのテキストの色を設定します。（「タイトル テキスト」と「キャプション テキスト」で色を別々に設定できます。）
• 文字サイズ：タイトルとその下に表示されるキャプションテキストに追加するシャドウを選択できます。

タイトル・ボディ・メタ情報テキスト

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

ボタン

• ボタンにカスタムスタイルを使用：「はい」に切り替えると以下の設定項目が表示され、ボタンの細かい設定が可能になります。
• ボタン 文字サイズ：ボタンの文字の大きさを設定します。
• ボタン テキストカラー：ボタンの文字色を設定します。
• ボタン Background：ボタンの背景色（メインとなる色）を設定します。
• ボタン ボーダー幅：ボタンのボーダーの幅を調節します。
• ボタン ボーダーの色：ボタンのボーダーの色を設定します。
• ボタン 境の半径：ボタンの角の丸みを調節します。
• ボタン 文字間隔：ボタンテキストの字間を調節します。
• ボタン フォント：ボタンテキストのフォントを選択します。
• ボタン ソフトライト：ボタンテキストの書体を変更できます。
• ボタン 書式のコピー：ボタンテキストの書式を設定します。
• ボタン アイコン：アイコンを表示したい場合は、こちらからデザインを選択します。
• ボタン アイコンの色：設定したアイコンの色を設定します。
• ボタン アイコンを配置：アイコンの配置をテキストの「左」に置くか「右」に置くか設定します。
• みのアイコンを止のためのボタン：アイコンを常時表示しておきたい場合は、「はい」に切り替えます。「いいえ」のままだと、マウスカーソルが置かれた時だけアイコンが表示されます。
• ボタン 文字サイズ：ボタンテキストのシャドウの設定ができます。
• ボタンのマージン：ボタン単体のマージンを設定できます。
• ボタンのパディング：ボタン単体のパディングを設定できます。
• ボタンのボックス影：ボタンにシャドウをつける場合は、こちらからデザインを選択します。