Diviのカウントダウンタイマーモジュールの使い方

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

Diviのカウントダウンタイマーモジュールとは？

DIviのカウントダウンタイマーモジュールは、名前の通り、カウントダウンタイマーを表示することができるモジュールです。特定の日時を指定しておくことで、その日にちまでの残り時間を表示してくれます。例えば、セールを実施したいとか、そういった時に使えます。

コンテンツ設定

• タイトル：カウントダウンタイマーのタイトルを記入します。
• 日付：カウントダウンタイマーが切れる日時を設定します。
• Hour：カウントダウンタイマーが切れる時間を設定します。
• Minute：カウントダウンタイマーが切れる分を設定します。

まずは、コンテンツの設定項目でタイトルとカウントダウンが切れる日付を設定します。

デザイン設定

次にデザインの設定を確認していきたいと思います。ちなみに、

テキスト

• 文字列の揃え：全てのテキストをまとめて左に寄せたり、中央に寄せたり、右に寄せることができます。
• テキストの色：テキストを「明るい」色にするのか、「暗い」色にするのかを設定します。
• 文字サイズ：テキストにつけるシャドーのタイプを選択します。

「テキスト」では、カウントダウンタイマーモジュールに表示されているテキスト全体に反映される設定項目になります。それぞれのテキストを細かく設定したい場合は、以下の設定項目を変更します。

タイトル・数字・セパレータ・ラベル テキスト

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

「タイトル テキスト」と「数字 テキスト」、「セパレータ テキスト」、「ラベル テキスト」はそれぞれ設定が分かれていますが、使い方は同じなので一緒にまとめてしまいました。

Diviのカウントダウンタイマーのラベルを日本語に変更する方法

カウントダウンタイマーモジュールに表示されるラベルは、設定から変更することができません。テキストの色を透明にしてしまえばラベル自体を非表示のようにすることができますが、別のテキストに変更したいと思います。以下でその方法をご紹介します。

まずは、こちらのコードをコピーします。

そして、「Divi」の「テーマオプション 」に移動し、タブを「統合」に切り替えます。そのタブの「コードをブログの< head >に追加する。」という項目にコピーしてきたコードを入力して完了です。

すると、このようにラベルを変更されます。