1年前に投稿

これは便利! WordPress ショートコードで横棒グラフを表示する

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 6 分で読めます。

4.5

WordPress をお使いの方に
朗報です♪

HTML5 で追加された要素、
meter と progress」を
先日の記事で
ご紹介いたしましたが、

WordPress のショートコードで
横棒グラフを表示
できると言う
記事を見つけました。

先ずは結果から
ご覧くださいませ。

錦戸亮さんがジャニーズ退所、ビックリ度は?

100ビックリは「とても驚いた」。0ビックリは「まったく驚かない」。

59.7%
0ビックリ
9.1%
10
6.4%
100
5.8%
50
5.1%
30
4.5%
20
2.4%
80
2.2%
70

Yahoo!ニュース 意識調査

タピオカドリンク、今年飲んだ?

あなたは今年に入って、タピオカドリンクを飲みましたか?

69.5%
飲んでいない
30.5%
飲んだ

Yahoo!ニュース 意識調査

生ビールの中ジョッキ なんて呼ぶ?

飲食店で生ビールの中ジョッキを注文する際、
「中生」と呼ぶか、「生中」と呼ぶか。あなたは何と言って注文しますか?

66.8%
生中
16.2%
中生
12.2%
生ビール中ジョッキ
4.9%
ほかの呼び方

Yahoo!ニュース 意識調査

どうでしょう?
こんなグラフが
ショートコードで
出来てしまいます♪

設置方法は
ここでは説明しません。

基本、元記事の解説を
よくお読みになり、
コピペで出来ます。

以下が元記事になります。
【HTML/CSS】割合がわかる積み上げ横棒グラフ【WordPress】

ここでは、
オリジナルの色、
grey を追加する
方法
を説明いたします。

grey の Example

たい焼き、どこから食べる?

たい焼きについて、「頭から食べると頭がよくなる。
しっぽから食べると足が速くなる。
胴体からだと体が丈夫になる」との迷信もあるようですが、あなたはどこから食べますか?

66.7%
26.1%
しっぽ
2.6%
胴体(腹)
1.4%
胴体(背中)
3.1%
割ってあんこから食べる

Yahoo!ニュース 意識調査

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]
[bar] の数は自由です。
解説

  • color:色指定 (この場合 grey)
  • num:割合 (40とか20とかの数字)
  • label:棒上文字 (○%とか○票とか割合の文字)
  • 間の文字:棒下文字 (ここでは 頭とか 胴体とかの文字)

※ あくまで参考例です。

色指定(color="○○")で、
colorを入れないと青になります。
(この場合は color="grey")

他のカラーを入れる場合は

  • ピンク color="pink"
  • 黄色   color="yellow"
  •     color="green"
  •    color="contrast"

こんな感じです。
おつかれさまでした!

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
これは便利! WordPress ショートコードで横棒グラフを表示する