Diviのタブモジュールの使い方

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

Diviのタブモジュールとは？

タブモジュールでは、複数のタブを用意しておいて、切り替えて別のテキストを表示することができます。

コンテンツ設定

まず「コンテンツ」の設定をみていきましょう。デフォルトで2つのアイテムが表示されていて、2つのタブが表示されている状態です。タブのコンテンツを編集する場合はギアアイコンを、複製する場合はその右隣のアイコンを、削除する場合はゴミ箱アイコンをクリックします。全く新しくタブを作成したいとか、タブを追加したいのであれば、プラスボタンをクリックします。

ギアアイコンをクリックすると、まず最初に「テキスト」の設定が表示されます。ここでは、「タイトル」でタブの名前を記入し、「ボディ」では本文を入力します。

「リンク」は、タブにリンクを埋め込みたい時に設定します。「モジュールリンクURL」にそのリンクを入力します。そして、「モジュールリンクターゲット」でどのようにそのページを開くかを選択します。「同じウィンドウで」開くのか、それとも「新しいタブで」開くのかを選びます。

最後の「背景」では、本文の背景を設定します。4つのタブが用意されていて、左から「背景色（単色）」、「グラデーション」、「画像」、「動画」となっています。

デザイン設定

次は、「デザイン」の設定を確認していきます。

ボディ・タブテキスト

• フォント：テキストのフォントを変更できます。
• ソフトライト：文字の太さを選択します。
• 書式のコピー：テキストの書式（斜体にしたり、打ち消し線を引いたり）を設定します。複数の書式を選択することも可能です。
• 文字列の揃え：テキストの位置を設定します。
• テキストカラー：文字の色を設定します。
• 文字サイズ：文字の大きさを調節します。
• 文字間隔：テキストの各文字の隙間を調節します。
• 行の高さ：縦の幅を調節します。
• 文字サイズ：テキストにかけるシャドウを設定します。

ボディとタブのテキストは設定項目がほとんど同じなので、上記のように1つにまとめてしまいました。

ただし、「ボディ テキスト」の場合は、1つ設定項目が多くて、通常の文章とリンクテキスト、箇条書きテキスト、順序付きリストテキスト、引用テキストを細かく設定できます。