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

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

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

バーカウンターモジュールは、バーを使ってパーセント表記ができるモジュールです。例えば、何かしらのプロジェクトの進行度合いだったり、顧客満足度などを表示する際に使用すると良いのかなと思います。

コンテンツ設定

まずは、「コンテンツ」でタイトルとパーセンテージの設定をしていきます。ギアアイコンで詳しい設定ができますが、その右にあるアイコンでバーの複製、ゴミ箱アイコンでバーの削除ができます。

要素

「要素」では、「割合を表示」という項目がありますが、これは、パーセンテージの表記を非表示にするかどうかの設定になります。基本的には「オン」のままでOKだと思います。

デザイン設定

棒グラフカウンター

「棒グラフカウンター」では、バーのメインカラー（30%と設定したら30%分のバーの色）を設定します。

テキスト

• 文字列の揃え：パーセントテキストの位置を設定します。
• テキストの色：タイトルテキストを「暗い」色にするのか「明るい」色にするのかを選択します。
• 文字サイズ：タイトルとパーセンテージのテキストのシャドーを設定します。

タイトル・パーセントテキスト

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