主にサービスや商品、企業などの数値でアピールできる実績数(ユーザー数、販売数、売上高、料金など)を、0からカウントアップして表示できます。

カウンターを4つ並べた例

このショートコード

[countup plx='enter bottom delay 0.8s']

[counter to=3214 caption='数値とキャプションのみ']

[counter
to=980 
tocolor=#888 
caption='円/月' 
captionsize=15 
captionpos=right 
duration=2]

[counter 
to=95.9 
tocolor=#A8C85D
tosize=50
caption='<i class="icon-star"></i>満足度:'
captionpos=left 
decimal=1]

[counter 
to=1254
tocolor=#fff
tobold=0
caption='Users'
captionsize=14
captioncolor=#fff
captionbold=0
captionpos=top
bgcolor=#46B1D2 
bdwidth=4
bdcolor=#50CEF6 
bdradius=5 
duration=3]

[/countup]

指定可能なパラメータ(countup ※親)

inline

このカウントアップコンテンツ全体をインラインブロック要素として、左右に他のコンテンツの回り込みを許可する場合に「1」または「true」を指定します。

未指定の場合は、ブロック要素になります。

例 : inline=1

class

カウントアップコンテンツ全体を括るdiv要素に指定するclassがある場合にそのクラス名を指定します。

例 : class=”ft13px bg-blue”

style

カウントアップコンテンツ全体を括るdiv要素に指定する任意のスタイルを直接指定できます。

例 : style=”border:1px solid #ccc;”

plx

パララックススクロールコンテンツ対応のDigiPressテーマを使用している場合は、このオプションを指定することで料金表カウントアップコンテンツの表示にパララックススクロールを反映させることができます。

例 : plx=’enter bottom delay 0.8s’

指定可能な値はこちらを参照してください。

指定可能なパラメータ(counter ※子)

to

カウントアップする最大値を正の整数(1〜)、または小数で指定します。

未指定の場合は、「100」が割り当てられます。

例 : to=1280, to=94.52

decimal

カウンターの値に小数を指定した場合、小数点以下何位までを表示するかその位を数値で指定します。

未指定の場合は「0」(小数を表示しない)が指定されます。

例 : decimal=1, decimal=2 など

tosize

カウンター(数値)のフォントサイズをピクセルを基準とした整数で指定します。

未指定の場合は、「40」ピクセル が割り当てられます。

例 : tosize=40, tosize=40px

tobold

カウンター(数値)を太字にしない場合に「0」または「false」を指定します。

例 : tobold=0, tobold=false

tocolor

カウンター(数値)のフォントカラーを個別に指定する場合に、HEX値(#666666など)またはrgba値(rgba(0,0,0,0.6) など)のカラーコードを指定します。

例 : tocolor=’#666666′, tocolor=’rgba(0,0,0,0.6)’

caption

カウンターの周辺に任意のキャプションを表示する場合にそのテキストを指定します。

例 : caption=’円/月’, caption=’満足度’, caption=’件/年’ など

captionsize

カウンター周辺に表示するキャプションのフォントサイズを指定します。

未指定の場合は「13」ピクセルが指定されます。

例 : captionsize=14, captionsize=14px など

captionbold

カウンター周辺のキャプションを太字にしない場合に「0」または「false」を指定します。

例 : captionbold=0, captionbold=false

captioncolor

カウンター周辺に表示するキャプションのフォントカラー指定する場合に、HEX値(#666666など)またはrgba値(rgba(0,0,0,0.6) など)のカラーコードを指定します。

例 : captioncolor=’#666666′, captioncolor=’rgba(0,0,0,0.6)’ など

captionpos

カウンター周辺に表示するキャプションの表示位置を指定します。

未指定の場合はbottomが指定されます。

指定可能な値

• top または 1 : カウンターの上
• right または 2 : カウンターの右隣り
• bottom または3 : カウンターの下
• left または 4 : カウンターの左隣り

例 : captionpos=top, captionpos=1 など

duration

最大値までカウントアップするアニメーションを正の整数の秒数で指定します。

未指定の場合は「1」秒が指定されます。

※ミリ秒(1秒 = 1000)でないことに注意してください。

例 : duration=2, duration=4 など

bgcolor

このカウンター要素自体の背景カラー指定する場合に、HEX値(#eeeeeeなど)またはrgba値(rgba(0,0,0,0.05) など)のカラーコードを指定します。

例 : bgcolor=’#eeeeee’, bgcolor=’rgba(0,0,0,0.06)’ など

bdwidth

このカウンター要素にボーダー(枠線)を表示する場合に、その太さをピクセル値(3, 3px など)で指定します。

未指定の場合は「0」(ボーダーなし)が指定されます。

例 : bdwidth=3, bdwidth=3px など

bdcolor

このカウンター要素にボーダーを表示する場合に、そのボーダーカラーをHEX値(#eeeeeeなど)またはrgba値(rgba(0,0,0,0.05) など)のカラーコードで指定します。

例 : bdcolor=’#eeeeee’, bdcolor=’rgba(0,0,0,0.1)’ など

bdradius

このカウンター要素にボーダー(枠線)を表示する場合に、四隅の角丸の度合いをピクセル値(3, 3px など)で指定します。

未指定の場合は「3」ピクセルが指定されます。

例 : bdradius=4, bdradius=4px など

maxstep

1回のカウントアップに加算する最大数を整数で指定します。

例 : maxstep=10

minstep

1回のカウントアップに加算する最小数を整数で指定します。

例 : minstep=2

class

このカウントアップコンテンツ単体に指定するclassがある場合にそのクラス名を指定します。

例 : class=”ft13px bg-blue”