主にサービスや商品の性能比較(従来比較、進捗状況、効率など)や、人材などの数値で表せる能力を、アニメーション棒グラフ(スキルバー)で表示できます。

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

このショートコード

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

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

このショートコード

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

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

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

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

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

class

スキルバーコンテンツ全体を括るdiv要素に指定するclassがある場合にそのクラス名を指定します。

例 : class=”ft13px bg-blue”

style

スキルバーコンテンツ全体を括るdiv要素に指定する任意のスタイルを直接指定できます。

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

plx

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

例 : plx=’enter bottom delay 0.8s’

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

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

title

スキルバーの左端に表示されるテキストを指定します。

未指定の場合は「Skill」という文字列がセットされます。

例 : title='<i class=”icon-wordpress”></i>WordPress’

titlesize

スキルバーの左端に表示されるテキストのフォントサイズをピクセルを基準とした整数値で指定します。

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

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

titlebold

スキルバーの左端に表示されるテキストを太字にしない場合は、「0」または「false」を指定します。

未指定の場合は太字になります。

例 : titlebold=0, titlebold=false

titlecolor

スキルバーの左端に表示されるテキストのフォントカラー指定する場合に、HEX値(#fffなど)またはrgba値(rgba(0,0,0,0.6) など)のカラーコードを指定します。

未指定の場合は「#fff」が指定されます。

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

ratebarcolor

スキルバーの割り合いを示すバーのカラー指定する場合に、HEX値(#82dacaなど)またはrgba値(rgba(0,0,0,0.6) など)のカラーコードを指定します。

未指定の場合は「#82daca」が指定されます。

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

rate

スキルバーを塗りつぶす割り合いをパーセンテージ(整数)で指定します。

未指定の場合は「50」パーセントが指定されます。

例 : rate=74

ratesize

スキルバーの割り合いを示すパーセンテージのテキストのフォントサイズをピクセルを基準とした整数値で指定します。

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

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

ratecolor

スキルバーの割り合いを示すパーセンテージのテキストのフォントカラー指定する場合に、HEX値(#82dacaなど)またはrgba値(rgba(0,0,0,0.6) など)のカラーコードを指定します。

未指定の場合は「#666」が指定されます。

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

ratetext

スキルバーの割り合いを示すパーセンテージのテキストを任意の文字列に変更する場合にそのテキストを指定します。

未指定の場合は、スキルバーの右端は rate パラメータで指定したパーセンテージが表示されます。

例 : ratetext=’WordPress’

bgcolor

このスキルバーの空きの部分のバーカラーをHEX値(#82dacaなど)またはrgba値(rgba(0,0,0,0.6) など)のカラーコードで指定します。

未指定の場合は「rgba(0,0,0,0.06)」が指定されます。

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

height

このスキルバー自体の高さをピクセルを基準とした整数値で指定します。

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

例 : height=50, height=50px など。

flat

このスキルバーのデザインをシャドウのないフラットスタイルにする場合に「1」または「true」を指定します。

例 : flat=1, flat=true

class

このスキルバー要素に指定するclassがある場合にそのクラス名を指定します。

例 : class=”ft13px bg-blue”