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

2019年9月23日

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

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

4.5

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

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

Did you know meter and progress elements?

Simple な CSS chart を探していました。例えば以下のような。 Chrome60.2% IE13.52% Firefox8.54% こ ...

https://neco913.kirara.st/post-7861/

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

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

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

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

59.7%

0ビックリ

9.1%

6.4%

100

5.8%

5.1%

4.5%

2.4%

2.2%

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

解説