DigiPress

Highly Flexible WordPress Theme

メニュー

skillbars / sbar : カラーバーがアニメーションしながら割合を示す棒グラフを表示

skillbars / sbar : カラーバーがアニメーションしながら割合を示す棒グラフを表示
このショートコードを使用するには「Shortcodes for DigiPress」または「DigiPress Ex – Shortcodes」プラグインが必要です

対象ブラウザ/バージョン

30.0〜, 22.0〜, 11〜, 6.1〜, 12.10〜, 4.4〜, 7.1〜

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

注意事項

  • 表示幅が680ピクセル以下になるとレスポンシブ表示となり、料金表は縦並びになります。
  • このショートコードは「フレックスボックス用ショートコード」のCSSがベースになっており、カラム数に制限はありません。

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

HTML
82%
CSS
70%
Javascript
48%

このショートコード

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

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

WordPress
一番得意
Photoshop
基本だけ
Illustrator
それなり
PHP
日々精進

このショートコード

[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)と子用のコード(sbar)でネスト(入れ子)にする必要があり、子(sbar)で括ったコンテンツが1つ(1カラム分)の料金表アイテムのコンテンツとなります。

指定可能なパラメータ(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”