これは便利! WordPress ショートコードで横棒グラフを表示する
この記事は約 6 分で読めます。
WordPress をお使いの方に
朗報です♪
HTML5 で追加された要素、
「meter と progress」を
先日の記事で
ご紹介いたしましたが、
WordPress のショートコードで
横棒グラフを表示できると言う
記事を見つけました。
先ずは結果から
ご覧くださいませ。
錦戸亮さんがジャニーズ退所、ビックリ度は?
100ビックリは「とても驚いた」。0ビックリは「まったく驚かない」。
タピオカドリンク、今年飲んだ?
あなたは今年に入って、タピオカドリンクを飲みましたか?
生ビールの中ジョッキ なんて呼ぶ?
飲食店で生ビールの中ジョッキを注文する際、
「中生」と呼ぶか、「生中」と呼ぶか。あなたは何と言って注文しますか?
どうでしょう?
こんなグラフが
ショートコードで
出来てしまいます♪
設置方法は
ここでは説明しません。
基本、元記事の解説を
よくお読みになり、
コピペで出来ます。
以下が元記事になります。
【HTML/CSS】割合がわかる積み上げ横棒グラフ【WordPress】
ここでは、
オリジナルの色、
grey を追加する
方法を説明いたします。
たい焼き、どこから食べる?
たい焼きについて、「頭から食べると頭がよくなる。
しっぽから食べると足が速くなる。
胴体からだと体が丈夫になる」との迷信もあるようですが、あなたはどこから食べますか?
grey を追加する方法
bar-grey という名前にして、
type(1) から type(10) まで
background:#○○○に
カラーコードを設定します。
/* グレー */
.bar-grey > div:nth-of-type(1){background:#898989;}
.bar-grey> div:nth-of-type(2){background:#949494;}
.bar-grey > div:nth-of-type(3){background:#9e9e9e;}
.bar-grey > div:nth-of-type(4){background:#a9a9a9;}
.bar-grey > div:nth-of-type(5){background:#b4b4b4;}
.bar-grey > div:nth-of-type(6){background:#bfbfbf;}
.bar-grey > div:nth-of-type(7){background:#cacaca;}
.bar-grey > div:nth-of-type(8){background:#c5c5c5;}
.bar-grey > div:nth-of-type(9){background:#d3d3d3;}
.bar-grey > div:nth-of-type(10){background:#e2e2e2;}
Gray のショートコード書き方
[percentage-bar color="grey"]
[bar num="25" label="66.7%"]頭[/bar]
[bar num="10" label="26.1%"]しっぽ[/bar]
[bar num="15" label="2.6%"]胴体(腹)[/bar]
[bar num="15" label="1.4%"]胴体(背中)[/bar]
[bar num="35" label="3.1%"]割ってあんこから食べる[/bar]
[/percentage-bar]
- color:色指定 (この場合 grey)
- num:割合 (40とか20とかの数字)
- label:棒上文字 (○%とか○票とか割合の文字)
- 間の文字:棒下文字 (ここでは 頭とか 胴体とかの文字)
※ あくまで参考例です。
色指定(color="○○"
)で、
colorを入れないと青になります。
(この場合は color="grey"
)
他のカラーを入れる場合は
- ピンク
color="pink"
- 黄色
color="yellow"
- 緑
color="green"
- 対比
color="contrast"
こんな感じです。
おつかれさまでした!
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません