Diviのトグルモジュールの使い方

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

Diviのトグルモジュールとは？

トグルモジュールは、アコーディオンモジュールと外観が似ていて、タイトルをクリックすると本文が表示されるというものになります。ページが縦長にならないように、最初は文章を隠しておいて、ユーザーが気になった場合は開いて内容を確認してもらいたいという場合に使ってみると良いと思います。

コンテンツ設定

テキスト

• タイトル：タイトルの文章を記入します。
• ボディ：本文を記入します。基本的にはWordPressの通常のエディターと使い方は同じなので問題はないのかなと思います。

状態

「状態」では、トグルの初期状態を選択します。デフォルトでは、「閉じる」が選択されていて、本文が閉じた状態になっています。「開く」を選択すれば、最初からコンテンツが見える状態になります。

デザイン設定

アイコン

• アイコンの色：トグルの右側に表示されるプラスアイコンの色を設定します。
• カスタムアイコンサイズを使用：「はい」に切り替えることで、「アイコンフォントサイズ」の設定項目が表示されます。
• アイコンフォントサイズ：アイコンの大きさを調節します。

トグル

• トグル開背景色：トグルが開いている時の背景色を設定します。
• トグル閉背景色：トグルが閉まっている時の背景色を設定します。

テキスト

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

タイトル・クローズドタイトルテキスト

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

「タイトルテキスト」と「クローズドタイトルテキスト」はほぼ設定が同じになりますので、一緒にしてしまいました。中には「タイトルテキスト」にしかないというものもあるので、それは上に記入してあります。

ボディテキスト

「ボディテキスト」は、「タイトル」や「クローズドタイトル」とほぼ設定が同じなので飛ばしたいと思います。