Diviのサークルカウンターモジュールの使い方

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

Diviのサークルカウンターモジュールとは？

Diviのサークルカウンターモジュールは、カウントアップのアニメーション付きで、パーセンテージを表示することができるモジュールです。

コンテンツ設定

テキスト

• タイトル：サークルの下部に表示されるタイトルテキストを入力します。
• 数字：サークルの中心に表示するパーセンテージの量を設定します。

要素

「要素」の項目では、「パーセント記号」というものがあります。デフォルトの設定では、サークルの中に◯%と表示されますが、パーセント表記が必要ないという場合、別の目的で使用する場合は「オフ」にします。

デザイン設定

サークル

• サークルの色：パーセンテージのメインカラーを設定します。
• 円の背景色：残りのパーセンテージの部分の色を設定します。例えば、70%と設定している場合は、30%の部分がここで設定した色で表示されます。
• 円の背景の不透明度：「円の背景色」で設定した色の透明度を調節します。

テキスト

• 文字列の揃え：パーセンテージとタイトルテキストの位置を設定します。
• テキストの色：パーセンテージとタイトルテキスト、両方の色に適用されますが、「暗い」色か「明るい」色のどちらかを選択します。
• 文字サイズ：パーセンテージとタイトルテキストに付けるシャドーの設定をします。

タイトル・数字 テキスト

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

テキストの細かい設定は「タイトル テキスト」と「数字 テキスト」の2種類ありますが、ほとんど同じ設定なので、一緒にまとめてしまいました。