Twitterはこちら仕事依頼はこちら

【5段階評価】評価グラフの作り方【HTML・CSS】

【5段階評価】評価グラフの作り方【HTML・CSS】

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

正式名称が分からないのですが5段階の評価グラフをHTMLとCSSで作りました。

WordPressユーザー向けの記事ですが、どんな環境でも使えます。

こちらがサンプルです。

  • コスパ
    悪い
    1
    2
    3
    4
    5
    良い

入力・変更できる要素は以下の通り。

要素
  • 左上のタイトル
  • 左右のテキスト
  • 下のテキスト

任意のテキストを非表示にすることも。

  • 男性的
    女性的

該当項目を増やすこともできます。

  • 年齢層
    20代
    30代
    40代
    50代
    60代

アイコン（fontawesome）も設定可能。

  • シンプル
    機能的

画像も設定できます。

  • 静か
    賑やか

もちろん全て一つにまとめることも！

  • コスパ
    悪い
    1
    2
    3
    4
    5
    良い
  • 年齢層
    20代
    30代
    40代
    50代
    60代
  • シンプル
    機能的
  • 静か
    賑やか

仕様はこんな感じですがカスタマイズ難易度はちょっと高めです。

HTMLが特に複雑になってしまったので、慣れてないと難しいかもしれません。

簡単に実装するには…

WordPressのグーテンベルクエディターをお使いの方はプラグイン「Useful Blocks」での実装をお待ちください！

評価グラフをHTMLとCSSで作る方法

手順は以下の通りです。

手順

STEP1:CSSコピペ

CSSをコピペしていきます。

メモ

「外観→カスタマイズ→追加CSS」。もしくは、「外観→テーマエディター→style.css(子テーマ)」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
  1. /************************************
  2. ** 評価グラフ
  3. ************************************/
  4. .pb-rating-graph {
  5. box-shadow: 0 3px 5px rgba(0, 0, 0, .07);
  6. max-width: 700px;
  7. margin: 0 auto 2em !important;
  8. padding: 2.5em 2em!important;
  9. color: #333;
  10. background: #fafafa;
  11. }
  12. .pb-rating-graph ul {
  13. margin: 0!important;
  14. padding: 0!important;
  15. border: none!important;
  16. }
  17. .pb-rating-graph ul li {
  18. list-style: none!important;
  19. margin: 0 !important;
  20. padding: 0 !important;
  21. }
  22. .pb-rating-graph ul li:before {
  23. content: unset !important;
  24. }
  25. .pb-rating-graph__label {
  26. background: #71828A;
  27. color: #fff;
  28. display: inline-block;
  29. padding: 6px 15px;
  30. font-weight: 600;
  31. font-size: 14px;
  32. line-height: 1.2;
  33. }
  34. .pb-rating-graph__wrap {
  35. display: flex;
  36. margin: 20px 0;
  37. }
  38. .pb-rating-graph li:last-child .pb-rating-graph__wrap {
  39. margin: 20px 0 0;
  40. }
  41. .pb-rating-graph__axis {
  42. width: 70%;
  43. margin-top: 10px;
  44. position: relative;
  45. display: flex;
  46. justify-content: space-between;
  47. }
  48. .pb-rating-graph__axis:before {
  49. content: "";
  50. display: inline-block;
  51. height: 5px;
  52. background: #E3E6E7;
  53. width: 100%;
  54. position: absolute;
  55. }
  56. .pb-rating-graph__basis {
  57. width: 15%;
  58. color: #71828A;
  59. font-weight: 600;
  60. font-size: 16px;
  61. line-height: 1.5;
  62. }
  63. .pb-rating-graph__basis-inner {
  64. display: inline-block;
  65. text-align: left;
  66. }
  67. .pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
  68. text-align: right;
  69. padding-right: 15px;
  70. }
  71. .pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
  72. text-align: left;
  73. padding-left: 15px;
  74. }
  75. .pb-rating-graph__scale {
  76. display: flex;
  77. flex-direction: column;
  78. align-items: center;
  79. z-index: 1;
  80. width: 20px;
  81. margin-top: 0 !important;
  82. }
  83. .pb-rating-graph__scale:before {
  84. content: "";
  85. display: block;
  86. width: 20px;
  87. height: 20px;
  88. border-radius: 50%;
  89. margin-top: -7px;
  90. margin-bottom: 10px;
  91. background: #E3E6E7;
  92. }
  93. .pb-rating-graph__axis:after, .pb-rating-graph__scale:after {
  94. content: unset !important;
  95. }
  96. .pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
  97. width: 42px;
  98. display: block;
  99. font-weight: 600;
  100. font-size: 14px;
  101. color: #777;
  102. text-align: center;
  103. padding-top: 5px;
  104. margin-top: -10px !important;
  105. }
  106. @media screen and (max-width:600px) {
  107. .pb-rating-graph {
  108. padding: 2em 1em !important;
  109. }
  110. .pb-rating-graph__axis {
  111. width: 60%;
  112. }
  113. .pb-rating-graph__basis {
  114. width: 20%;
  115. font-size: 13px;
  116. letter-spacing: 0px;
  117. line-height: 1.8;
  118. }
  119. .pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
  120. padding-right: 7px;
  121. }
  122. .pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
  123. padding-left: 7px;
  124. }
  125. .pb-rating-graph__scale {
  126. width: 16px;
  127. }
  128. .pb-rating-graph__scale:before {
  129. width: 16px;
  130. height: 16px;
  131. }
  132. .pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
  133. font-size: 12px;
  134. }
  135. .pb-rating-graph__scale[data-check='true']:before {
  136. font-size: 20px;
  137. }
  138. }
/************************************
** 評価グラフ
************************************/
.pb-rating-graph {
  box-shadow: 0 3px 5px rgba(0, 0, 0, .07);
  max-width: 700px;
  margin: 0 auto 2em !important;
  padding: 2.5em 2em!important;
  color: #333;
  background: #fafafa;
}
.pb-rating-graph ul {
  margin: 0!important;
  padding: 0!important;
  border: none!important;
}
.pb-rating-graph ul li {
  list-style: none!important;
  margin: 0 !important;
  padding: 0 !important;
}
.pb-rating-graph ul li:before {
  content: unset !important;
}
.pb-rating-graph__label {
  background: #71828A;
  color: #fff;
  display: inline-block;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.pb-rating-graph__wrap {
  display: flex;
  margin: 20px 0;
}
.pb-rating-graph li:last-child .pb-rating-graph__wrap {
  margin: 20px 0 0;
}
.pb-rating-graph__axis {
  width: 70%;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.pb-rating-graph__axis:before {
  content: "";
  display: inline-block;
  height: 5px;
  background: #E3E6E7;
  width: 100%;
  position: absolute;
}
.pb-rating-graph__basis {
  width: 15%;
  color: #71828A;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.pb-rating-graph__basis-inner {
  display: inline-block;
  text-align: left;
}
.pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
  text-align: right;
  padding-right: 15px;
}
.pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
  text-align: left;
  padding-left: 15px;
}
.pb-rating-graph__scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 20px;
  margin-top: 0 !important;
}
.pb-rating-graph__scale:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -7px;
  margin-bottom: 10px;
  background: #E3E6E7;
}
.pb-rating-graph__axis:after, .pb-rating-graph__scale:after {
  content: unset !important;
}
.pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
  width: 42px;
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #777;
  text-align: center;
  padding-top: 5px;
  margin-top: -10px !important;
}
@media screen and (max-width:600px) {
  .pb-rating-graph {
    padding: 2em 1em !important;
  }
  .pb-rating-graph__axis {
    width: 60%;
  }
  .pb-rating-graph__basis {
    width: 20%;
    font-size: 13px;
    letter-spacing: 0px;
    line-height: 1.8;
  }
  .pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
    padding-right: 7px;
  }
  .pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
    padding-left: 7px;
  }
  .pb-rating-graph__scale {
    width: 16px;
  }
  .pb-rating-graph__scale:before {
    width: 16px;
    height: 16px;
  }
  .pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
    font-size: 12px;
  }
  .pb-rating-graph__scale[data-check='true']:before {
    font-size: 20px;
  }
}

次に好きなスタイルを選んでCSSを追記してください。一番下に足せばOKです。

スタイル：シンプル

  • 年齢層
    20代
    30代
    40代
    50代
    60代
Copy
  1. .pb-rating-graph__scale[data-check='true']:before {
  2. background:#ee8f81;
  3. }
.pb-rating-graph__scale[data-check='true']:before {
  background:#ee8f81;
}

スタイル：アイコン

  • 年齢層
    20代
    30代
    40代
    50代
    60代
Copy
  1. .pb-rating-graph__scale[data-check='true']:before{
  2. font-family: "Font Awesome 5 Free";
  3. font-weight: 900;
  4. content: "\f6d3";
  5. color: #71828A;
  6. background: none;
  7. font-size: 24px;
  8. line-height: 20px;
  9. margin-right: 4px;
  10. }
.pb-rating-graph__scale[data-check='true']:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f6d3";
    color: #71828A;
    background: none;
    font-size: 24px;
    line-height: 20px;
    margin-right: 4px;
}

fontawesomeバージョン5限定です。

fontawesomeのFreeの中から好きなアイコンを選びます。

f6d3のようなfから始まるコードをコピーして、content: “\f6d3”;のコードを変えてください。



JINユーザーはJINのオリジナルアイコンが使えます。

サイトの読み込み速度的にこっちの方法がオススメです。

Copy
  1. .pb-rating-graph__scale[data-check='true']:before{
  2. font-family: 'jin-icons';
  3. font-weight: 900;
  4. content: "\e92b";
  5. color: #71828A;
  6. background: none;
  7. font-size: 24px;
  8. line-height: 20px;
  9. margin-right: 4px;
  10. }
.pb-rating-graph__scale[data-check='true']:before{
    font-family: 'jin-icons';
    font-weight: 900;
    content: "\e92b";
    color: #71828A;
    background: none;
    font-size: 24px;
    line-height: 20px;
    margin-right: 4px;
}

contentのコードはJIN公式でお調べください！

スタイル：画像

  • 年齢層
    20代
    30代
    40代
    50代
    60代
Copy
  1. .pb-rating-graph__scale[data-check='true']:before{
  2. content: '';
  3. display: inline-block;
  4. background-color: unset;
  5. background-image: url(ここに画像URL);
  6. background-size: contain;
  7. background-repeat: no-repeat;
  8. transform: scale(1.75, 1.75);
  9. border-radius: 0;
  10. }
.pb-rating-graph__scale[data-check='true']:before{
  content: '';
  display: inline-block;
  background-color: unset;
  background-image: url(ここに画像URL);
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1.75, 1.75);
  border-radius: 0;
}

画像URLは「メディア」のリンクをコピーから取得できます。

STEP2:HTMLコピペ

あとは使いたい記事のHTMLにコピペをすれば使えるようになります。

コピペ場所
  • グーテンベルク：カスタムHTML
  • クラシックエディタ：テキストタブ

HTMLの視認性がめちゃ悪くなってしまったことを深くお詫び申し上げます。

まずはこちらのHTMLを。

  • タイトル
    左文字
    1
    2
    3
    4
    5
    右文字
  • タイトル
    左文字
    1
    2
    3
    4
    5
    右文字
  • タイトル
    左文字
    1
    2
    3
    4
    5
    右文字
Copy
  1. <div class="pb-rating-graph">
  2. <ul>
  3. <li>
  4. <div class="pb-rating-graph__label">タイトル</div>
  5. <div class="pb-rating-graph__wrap">
  6. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
  7. <div class="pb-rating-graph__axis">
  8. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
  9. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
  10. <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
  11. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
  12. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
  13. </div>
  14. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">右文字</span></div>
  15. </div>
  16. </li>
  17. <li>
  18. <div class="pb-rating-graph__label">タイトル</div>
  19. <div class="pb-rating-graph__wrap">
  20. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
  21. <div class="pb-rating-graph__axis">
  22. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
  23. <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
  24. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
  25. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
  26. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
  27. </div>
  28. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">右文字</span></div>
  29. </div>
  30. </li>
  31. <li>
  32. <div class="pb-rating-graph__label">タイトル</div>
  33. <div class="pb-rating-graph__wrap">
  34. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
  35. <div class="pb-rating-graph__axis">
  36. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
  37. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
  38. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
  39. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
  40. <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
  41. </div>
  42. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">右文字</span></div>
  43. </div>
  44. </li>
  45. </ul>
  46. </div>
<div class="pb-rating-graph">
  <ul>
    <li>
      <div class="pb-rating-graph__label">タイトル</div>
      <div class="pb-rating-graph__wrap">
        <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
        <div class="pb-rating-graph__axis">
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
          <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
        </div>
        <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">右文字</span></div>
      </div>
    </li>
    <li>
      <div class="pb-rating-graph__label">タイトル</div>
      <div class="pb-rating-graph__wrap">
        <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
        <div class="pb-rating-graph__axis">
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
          <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
        </div>
        <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">右文字</span></div>
      </div>
    </li>
    <li>
      <div class="pb-rating-graph__label">タイトル</div>
      <div class="pb-rating-graph__wrap">
        <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
        <div class="pb-rating-graph__axis">
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
          <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
          <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
        </div>
        <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">右文字</span></div>
      </div>
    </li>
  </ul>
</div>

わかりにくすぎ！！

解説します。

グラフを増やす・減らす

グラフは<li>から</li>までが1つです。サンプルコードは3つあるので3本グラフができます。

数を増やしたい、減らしたい人は<li>から</li>までを<ul></ul>内でコピペor削除してください。

該当箇所に色やアイコン等をつける

1つのグラフ内に<div class=”pb-rating-graph__scale”>が5つあります。

これがグラフの5つ丸い部分です。左から順に並んでいます。

<div class=”pb-rating-graph__scale”>にdata-check=”true”を入れると色やアイコン、画像が表示されるようになります。

Before：

  1. <div class="pb-rating-graph__scale">
<div class="pb-rating-graph__scale">

After：

  1. <div data-check="true" class="pb-rating-graph__scale">
<div data-check="true" class="pb-rating-graph__scale">

半角スペースで区切って入れてください。

タイトルを消す

  • 左文字
    1
    2
    3
    4
    5
    右文字

タイトルを消すには一行まるまる消してください。

Before：

  1. <li>
  2. <div class="pb-rating-graph__label">タイトル</div>
  3. <div class="pb-rating-graph__wrap">
    <li>
      <div class="pb-rating-graph__label">タイトル</div>
      <div class="pb-rating-graph__wrap">

After：

  1. <li>
  2. <div class="pb-rating-graph__wrap">
    <li>
      <div class="pb-rating-graph__wrap">

左右の文字を消す

  • タイトル
    1
    2
    3
    4
    5

<span class=”pb-rating-graph__basis-inner”></span>までを削除してください。

Before：

  1. <div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>
<div class="pb-rating-graph__basis"><span class="pb-rating-graph__basis-inner">左文字</span></div>

After：

  1. <div class="pb-rating-graph__basis"></div>
<div class="pb-rating-graph__basis"></div>

下の文字を消す

  • タイトル
    左文字
    右文字

<span class=”pb-rating-graph__item”></span>までを削除してください。

Before：

  1. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
  2. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
  3. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
  4. <div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
  5. <div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>
<div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">1</span></div>
<div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">2</span></div>
<div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">3</span></div>
<div class="pb-rating-graph__scale"><span class="pb-rating-graph__item">4</span></div>
<div data-check="true" class="pb-rating-graph__scale"><span class="pb-rating-graph__item">5</span></div>

After：

  1. <div class="pb-rating-graph__scale"></div>
  2. <div class="pb-rating-graph__scale"></div>
  3. <div class="pb-rating-graph__scale"></div>
  4. <div class="pb-rating-graph__scale"></div>
  5. <div data-check="true" class="pb-rating-graph__scale"></div>
<div class="pb-rating-graph__scale"></div>
<div class="pb-rating-graph__scale"></div>
<div class="pb-rating-graph__scale"></div>
<div class="pb-rating-graph__scale"></div>
<div data-check="true" class="pb-rating-graph__scale"></div>

HTML・CSSを使わずに実装するには

プラグインUseful BlocksがあればHTML・CSSを使わずに、インストールするだけで実装できます。（予定）

基本的にWordPressテーマ問わず、ご利用いただけます。

本カスタマイズはまだ未実装ですが記事作成に役立つカスタマイズがいくつか同梱しています。（グーテンベルクエディター限定）

以上、ご覧いただきありがとうございます！

コメント

  1. 名前:あいちゃん :投稿日：2021/08/12(木) 22:12:26 ID：YyMjUxNzM

    コメント失礼します。
    大変有用な情報有難うございます。

    一点質問なのですが、
    当方、クラシックエディターにて記載の通りにコピペしたところ、
    値の丸い5の部分から灰色の線が右に突き抜けておりました。
    本来であれば、記事のように値丸5のところで灰色の横線は止まっているはずかと思います。
    画像を添付します。
    https://36.gigafile.nu/0819-da0c62ad1c4ac6c3a2478517dd0d14c13
    この修正方法などおわかりであればご教授いただきたいです。
    よろしくお願い致します。

    返信

ページトップへ