弊社提供中のWordPressテーマ「DigiPress」専用のショートコードプラグイン「Shortcodes for DigiPress」に、特に商用サイトで活躍する新たなショートコードが3種類追加されました！

スキルバーショートコードは、商品やサービスの性能比較や、スタッフなどの人材ごとに持つ各能力をパーセンテージに応じてアニメーションしながら棒グラフ、または円グラフで表すことができるコンテンツです。

カウントアップショートコードは、商品やサービスの数値でアピールできる実績(販売数、ユーザー数、満足度など)を並べて、それぞれがカウントアップしながら表示されるコンテンツです。

もちろん、これらのショートコードはモバイル端末(レスポンシブ)表示にも対応させています。

最新バージョンのプラグインにてご利用いただけますので、既に本プラグインをお持ちの方はアップデートしてご利用いただけるようになります。

スキルバーショートコード

最低限のオプションを指定した例

このショートコード

[skillbars]
[sbar title='HTML' rate=82]
[sbar title='CSS' rate=70]
[sbar title='Javascript' rate=48]
[/skillbars]

様々なオプションを組み合わせた例

このショートコード

[skillbars]
[sbar 
title='<i class="wordpress"></i>WordPress'
titlesize=15
rate=78
ratetext='一番得意'
ratesize=14
height=60]

[sbar 
title='Photoshop'
titlecolor=#1F434C
titlesize=13 
ratebarcolor=#49D1FF 
rate=58 
ratetext='基本だけ'
ratecolor=#fff
ratesize=12
bgcolor=#5E96BD
height=50]

[sbar 
title='Illustrator'
titlesize=14
ratebarcolor=#FF76A1
rate=64
ratetext='それなり' 
ratesize=13
height=40]

[sbar 
title='PHP' 
titlebold=0
ratebarcolor=#E58C42 
rate=42 
ratetext='日々精進' 
height=30]
[/skillbars]

円形スキルバーショートコード

様々なパラメータを指定して4つのグラフを表示した例

このショートコード

[skillcircles]
[scircle rate=46]

[scircle rate=75 caption='従来比より' barcolor='#ff559f']

[scircle rate=52 ratetext='Calorie' ratesize=15 size=150 barcolor='#8BC131' caption='52% OFF!' duration=2800 startangle=360]

[scircle 
rate=84
ratesize=45
ratebold=1
barcolor='#0681c4'
barcolor2='#07c6c1'
barwidth=20
size=200
blankcolor='rgba(0,0,0,0.24)'
caption='<i class="icon-wordpress"></i>WordPress Share'
captionsize=15
captionbold=1
duration=4200
startrate=10
startangle=180
reverse='false']
[/skillcircles]

カウントアップショートコード

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

このショートコード

[countup]
[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]

既存ユーザー様は、以下のオンラインドキュメントにてショートコードの使い方を公開していますので、是非ご覧ください。