Diviのスライダーモジュールの使い方

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

Diviのスライダーモジュールとは？

Diviのスライダーモジュールでは、スライダー形式でCTAを表示することができます。

コンテンツ設定

まず「コンテンツ」の設定を確認していきます。ここでは、デフォルトで2つのアイテムが表示されています。これがスライドです。コンテンツを編集する時は、ギアのアイコンをクリックして、複製する場合はその右隣のアイコン、削除する際はゴミ箱のアイコンをクリックします。まっさらなスライドを作成したいのであれば、「新規スライドを追加」というプラスボタンをクリックします。

• タイトル：スライドのタイトルを入力します。
• ボタン：ボタンの文言を記入します。
• ボディ：スライドのメインの文章をここに記入します。

スライドの編集項目の1つ目は、「テキスト」です。ここがメインの設定になりますが、タイトルとボタンテキスト、ボディ文章を記入していきます。

「画像とビデオ」では、スライドの左側に表示する画像もしくは動画を設定することができます。画像はシンプルにプラスボタンをクリックして、表示したい画像を選択すればOKです。

動画の場合は、WordPressにアップロードしている動画を使用するのであれば、画像と同じ手順で行えばOKですが、YouTubeなどの外部のプラットフォームにアップロードされている動画を使用したいという場合もあると思います。その時は、プラスボタンをクリックして、「URLから挿入」タブに切り替えます。そして、URLを入力すればサムネイル付き（YouTubeの場合）で動画を表示することができます。

• ボタンリンクURL：ボタンに埋め込みたいページのURLを入力します。
• ボタンリンクターゲット：ボタンに埋め込んだURLを「同じウィンドウで」開くのか「新しいタブで」開くのかを選択します。
• モジュールリンクURL：背景に埋め込みたいページのURLを入力します。
• モジュールリンクターゲット：背景に埋め込んだURLをを「同じウィンドウで」開くのか「新しいタブで」開くのかを選択します。

「リンク」には、ボタンに埋め込むURLとモジュールに埋め込むURLを入力することができます。「モジュールリンクURL」で伊rんくを設定すると、スライドの背景の部分にリンクが埋め込まれます。ボタンは使いますが、モジュールの方はあまり使う機会はないと思います。

「背景」では、スライドの背景のタイプを設定します。左のタブから「背景色（単色）」、「グラデーション」、「画像」、「動画」があります。設定したいタブに切り替えて、色や画像、動画を設定しましょう。

要素

• 矢印を表示：スライドに表示する矢印を表示する場合は「はい」、非表示にする場合は「いいえ」にします。
• スライドショーのコントロール：これはスライドの下部に表示されるドットを表示するかどうかを設定します。

「要素」にある2つの設定項目は、上記の位置関係になっています。

デザイン設定

オーバーレイ

• 背景のオーバーレイを使用する：スライドの背景にオーバーレイを設定する場合は、「あり」に切り替えます。
• 背景オーバーレイカラー：背景のオーバーレイカラーを設定します。
• テキストのオーバーレイを使用する：タイトルとボディテキストの部分にオーバーレイを追加するかどうかの設定です。「あり」に切り替えると、下の項目が表示されます。
• テキストオーバーレイ色：タイトルとボディテキスト部分のオーバーレイ色を設定します。
• オーバーレイテキストのボーダーラジアス：タイトルとボディテキスト部分のオーバーレイの4つ角の丸みを調節します。

ナヴィゲーション

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

画像

• 画像 角丸長方形：画像の角の丸みを調節します。
• 画像 ボーダースタイル：画像ボーダーを付ける場合、そのタイプをこちらから選択します。
• 画像 ボーダー幅：設定したボーダーの幅をここで調節します。
• 画像 ボーダーカラー：画像に追加したボーダーの色を設定します。
• 画像 ボーダースタイル：ボーダーのタイプをドロップダウンから選択します。
• 画像とビデオ：画像にシャドーをつけるかどうか、つける場合はそのタイプを選択します。

テキスト

• 文字列の揃え：タイトルやボディテキスト、ボタンの位置を設定します。（セットで移動します。）
• 文字サイズ：それぞれのテキストにシャドウを付けることができます。

タイトル・ボディテキスト

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

タイトルとボディテキストの設定は、ほぼ同じなので1つにまとめてご紹介しました。

ボタン

• ボタンにカスタムスタイルを使用：「はい」に切り替えると下に設定項目が表示され、ボタンのスタイルを細かく設定できるようになります。
• ボタン 文字サイズ：ボタンの文字の大きさを設定します。
• ボタン テキストカラー：ボタンの文字色を設定します。
• ボタン Background：ボタンの背景色（メインとなる色）を設定します。
• ボタン ボーダー幅：ボタンのボーダーの幅を調節します。
• ボタン ボーダーの色：ボタンのボーダーの色を設定します。
• ボタン 境の半径：ボタンの角の丸みを調節します。
• ボタン 文字間隔：ボタンテキストの字間を調節します。
• ボタン フォント：ボタンテキストのフォントを選択します。
• ボタン ソフトライト：ボタンテキストの書体を変更できます。
• ボタン 書式のコピー：ボタンテキストの書式を設定します。
• ボタン アイコン：「はい」に切り替えると、ボタンにアイコンを表示できるようになり、以下の設定項目が表示されます。

• ボタン アイコン：アイコンを表示したい場合は、こちらからデザインを選択します。
• ボタン アイコンの色：設定したアイコンの色を設定します。
• ボタン アイコンを配置：アイコンの配置をテキストの「左」に置くか「右」に置くか設定します。
• みのアイコンを止のためのボタン：アイコンを常時表示しておきたい場合は、「はい」に切り替えます。「いいえ」のままだと、マウスカーソルが置かれた時だけアイコンが表示されます。
• ボタン 文字サイズ：ボタンテキストのシャドウの設定ができます。
• ボタンのマージン：ボタン単体のマージンを設定できます。
• ボタンのパディング：ボタン単体のパディングを設定できます。
• ボタンのボックス影：ボタンにシャドウをつける場合は、こちらからデザインを選択します。