【楽天】ポイント最大44倍!ブラックフライデーを今すぐチェク!

今日は「menuアプリ」でデリバリーにしませんか? 今なら1,000円オフクーポンが使えるので超おすすめです!!⇒詳細はコチラ

 

【Cocoon】表組の中に横棒グラフをHTMLとCSSで描く方法! #プラグイン減らそう委員会

この記事は約4分で読めます。
スポンサーリンク
こんにちは!ふるのーと(fullnote)です!(*^^*)

今回は久しぶりにCSS/HTMLのデザインのお話です。

CSSとHTMLを使って表の中に横棒グラフを表示する方法です。

                          
ベンチマーク①2100
ベンチマーク②900
ベンチマーク③300

こういうグラフがワードプレスで作れます。

私が使っているテーマはCocoonですが、テーマによらず使えると思います。

CPU性能ベンチマークの比較表とかによく使われていたりしますよね。

とっても簡単なので是非試してみてください。

スポンサーリンク

プラグインを使えば出来る?

多分今回やりたいことはWordpressのプラグインを使えば、きっと出来るんだと思います。

Visualizerでしたっけ?かっこいいグラフを作れると思います。

でも違うんです。

プラグイン減らそう委員会の私としてはできるだけプラグインは使いたくないんですよね。

プラグイン減らしたくて問い合わせフォームもContactForm7からGoogleフォームに変えました。

横棒グラフの長さと色はCSSで都度指定

早速ですが、方法を紹介します。

まずは横棒グラフの長さと色はCSSで指定します。

ぱんだ先輩
ぱんだ先輩

えー、HTMLだけで出来ないのー。

HTMLだけでやろうと思ったんですが、cssで設定するのものようです。残念無念。。

style.cssに指定しても良いのですが、記事ごとに設定する方法のほうが私はやりやすいと思ったので記事ごとに設定します。

ワードプレスの記事投稿画面の下の方にいくと「カスタムcss」という欄がありますのでそこに今回のcssをコピペします。

記事投稿画面の下の方の「カスタムcss」

CSS内容

コピーするcssは下記です。

/* 横棒グラフここから */
.bar70:before,
.bar30:before,
.bar10:before  {
content: "";
display: inline-block;
height: 20px;
margin-right: 1em;
vertical-align: middle;
}
 
.bar70:before {
width: 70%; /* グラフの長さ */
background: #92CEFF; /* グラフの色 */
}

.bar30:before,
.bar10:before {
background: #F88080; /* グラフの色 */
}

.bar30:before {
width: 30%;/* グラフの長さ */
}
.bar10:before {
width: 10%;/* グラフの長さ */
}
/* 横棒グラフここまで */

今回は、

  • 70%の長さの「bar70」(色は青)
  • 30%の長さの「bar30」(色は赤)
  • 10%の長さの「bar10」(色は赤)

の3パターンを用意しました。

勘のいい人は分かったと思いますが、長さごとに名前を用意します。

色はまとめて設定してしまっても大丈夫です。

まあ、数が多いとちょっと面倒なのが難点です。

投稿画面に入力するHTML

記事投稿画面には、HTMLで表を記入します。

コードを以下に記載します。

<table>
 <tr>
   <th width="20%">ベンチマーク①</th>    
  <td class="bar70">2100</td>
 </tr>
 <tr>
   <th>ベンチマーク②</th>
  <td class="bar30">900</td>
 </tr>
 <tr>
   <th>ベンチマーク③</th>
  <td class="bar10">300</td>
 </tr>
</table>

thには幅の割合を設定します。今回は20%に設定しています。

横棒グラフを表示したい箇所には「td class=”bar70″」のようにclassを指定します。

これで完成です。お疲れさまでした。

ワードプレスのCocoonユーザーは活用してみてください

今回のカスタマイズはちょっとニッチな内容だったかもしれませんね。

ただ簡単に出来ますので、どなたかこのやり方を探している人に届けば幸いです。

もし、この記事が役に立ちましたら、是非シェアやコメントお願いします。

それでは今日はこの辺で!ふるのーと(fullnote)でした!(*^^*)

美味しい食事と音楽に囲まれて毎日笑顔を大切に過ごしています。
ブログもYoutubeものんびりとやっています。(*^^*)

fullnoteをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Wordpress
スポンサーリンク
ふるのーとさんのブログ

コメント

タイトルとURLをコピーしました