MENU
  1. ホーム
  2. ブログ運営
  3. WordPress
  4. [WPカスタマイズ] レーティング円グラフ ブロック

[WPカスタマイズ] レーティング円グラフ ブロック

広告
WordPress
アイキャッチ

WordPressで製品やサービスの評価のためのグラフを追加するカスタマイズです。

以前同じカスタマイズを紹介しましたが、さらに使いやすくしました。

このようなグラフを作成できます。

デモ

以前の記事

あわせて読みたい
サービス・商品のレビューに使えるレート付きボックス【WordPress】 下記の記事で新しい方法を紹介しています。 総合評価の数値と項目別の数値を自由に設定できるレビューボックスです。 リストにはグラデーションを使っているため直感的…

コードの仕様を変更したので、以前の記事を使ってカスタマイズして頂いた場合は新たに設定する必要があります。また、Internet Explorer では正しく表示されないので注意して下さい。

改良ポイント
  • 投稿画面にもデザインを反映
  • グラフ単独でも使える
  • グラフの色は数値によって変えられる

表示確認したテーマは「THE SONIC」、「SWELL」です。他テーマでもブロックエディタを利用していれば微調整で使えると思います。

レンタルサーバーを「ConoHa WINGパック」にするとTHE SONICが通常 7,980円/ 年 が 5,980円になります！

ConoHa を見てみる

ブロックエディターに完全対応の高機能テーマ。柔軟にブロックをカスタマイズできるのが魅力です。

SWELL を使ってみる
目次
  1. カスタマイズの手順
  2. style.css を編集
  3. editor-style.css を編集
    1. functions.php
  4. 投稿画面にコードを貼り付け
  5. グラフの使い方
    1. グラフの数値を指定
  6. スマホでの横並びの数を指定
    1. THE SONIC の場合のカラム設定
    2. SWELL の場合のカラム設定
    3. その他のテーマの場合
  7. グラフをカスタマイズ
    1. 色の指定方法
    2. 数値でグラフの色を変更
    3. グラフの色を一色だけにする
    4. グラフのグラデーションを指定
    5. 数値の背景色を指定
    6. 数値の色を変更
  8. 総合評価ラベルをつける
  9. グラフ単体で使う場合

カスタマイズの手順

  1. style.css を編集
  2. editor-style.css を編集
  3. ブロックのコードをコピー&貼り付け
  4. グラフの数値とラベルを変更・追加CSSクラスを修正

style.css を編集

子テーマ内の style.css に以下のコードを追記します。

/*--------------------------------------
レーティンググラフ
--------------------------------------*/
[class^="rating-val"] {
  /*グラフ色*/
  --yellow: #f7d202;
  --red: #f08080;
  --green: #63ff14;
  --blue: #3c7ef1;
  /*空のグラフ色*/
  --bg-blank: #ddd;
  /*内側グラデーション*/
  --grad: 0.8; /*グラデーションなしは 1 にする*/
  --bg-grad: radial-gradient(
    rgba(255, 255, 255, var(--grad)) 60%,
    transparent 60%
  );
  /*数字背景色*/
  --num: 1; /*背景色をつけるには 0 にする*/
  --bg-num: radial-gradient(
    rgba(255, 255, 255, var(--num)) 40%,
    transparent 40%
  );
  border-radius: 50%;
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin: 1rem auto;
  font-size: larger;
  font-weight: 700;
  text-align: center;
  color: #555;
  -webkit-transition: 300ms;
  transition: 300ms;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.rating-val__0 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--bg-blank) 0%, var(--bg-blank) 0%);
}
.rating-val__1 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--red) 10%, var(--bg-blank) 10%);
}
.rating-val__2 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--red) 20%, var(--bg-blank) 20%);
}
.rating-val__3 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--yellow) 30%, var(--bg-blank) 30%);
}
.rating-val__4 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--yellow) 40%, var(--bg-blank) 40%);
}
.rating-val__5 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--blue) 50%, var(--bg-blank) 50%);
}
.rating-val__6 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--blue) 60%, var(--bg-blank) 60%);
}
.rating-val__7 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--blue) 70%, var(--bg-blank) 70%);
}
.rating-val__8 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--green) 80%, var(--bg-blank) 80%);
}
.rating-val__9 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--green) 90%, var(--bg-blank) 90%);
}
.rating-val__10 {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--green) 100%, var(--bg-blank) 100%);
}
[class^="rating-val"]:hover {
  -webkit-transform: scale(1.2) rotate(15deg);
  transform: scale(1.2) rotate(15deg);
}
/*ラベル*/
[class^="rating-val"] + p {
  text-align: center;
  margin: 1rem auto;
}
/*総合評価*/
.rating-ttl {
  border: 4px solid #ddd;
  border-radius: 28px;
  padding: 4px 24px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 1rem auto;
  font-size: larger;
  font-weight: 700;
  color: #555;
  background: #fff;
  -webkit-box-shadow: inset 0 0 0 8px #f7f7f7;
  box-shadow: inset 0 0 0 8px #f7f7f7;
}
トップへ戻る

editor-style.css を編集

editor-style.css (ファイル名はテーマによる) はWordPressの投稿画面の見た目をカスタマイズするためのスタイルシートです。 

/*--------------------------------------
レーティンググラフ (エディター)
--------------------------------------*/
[class*="rating-val"] {
  /*色を指定*/
  --red: #f08080;
  --yellow: #f7d202;
  --green: #63ff14;
  --blue: #3c7ef1;
  /*数字背景色*/
  --bg-num: radial-gradient(#fff 60%, transparent 60%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  line-height: 70px !important;
  margin: auto !important;
  font-weight: 700;
  text-align: center;
  color: #555;
}
.rating-val__ttl {
  background: var(--bg-num), conic-gradient(#ddd 100%, transparent 100%);
}
.rating-val__0,
.rating-val__1,
.rating-val__2 {
  background: var(--bg-num), conic-gradient(var(--red) 100%, transparent 100%);
}
.rating-val__3,
.rating-val__4 {
  background: var(--bg-num),
    conic-gradient(var(--yellow) 100%, transparent 100%);
}
.rating-val__5,
.rating-val__6,
.rating-val__7 {
  background: var(--bg-num), conic-gradient(var(--blue) 100%, transparent 100%);
}
.rating-val__8,
.rating-val__9,
.rating-val__10 {
  background: var(--bg-num), conic-gradient(var(--green) 100%, transparent 100%);
}
[class*="rating-val"] + p {
  text-align: center;
}
.rating-ttl {
  border: 4px solid #888;
  border-radius: 8px;
  padding: 4px 12px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 1rem auto;
  font-size: 1.2rem;
  font-weight: 700;
}

editor-style.css はなくても問題ないですが、見たまま編集ができます。

エディタ画面

functions.php

functions.phpの編集を間違えると、WordPressの表示ができなくなりますので必ずファイルのバックアップをとってください。(記述を削除すれば直ります。)

editor-style.css を利用していない場合は、投稿画面にデザインが反映されません。

その場合は、functions.php に以下のコードを記述して、子テーマ内に editor-style.css を作成してコードを貼り付けましょう。

add_action( 'enqueue_block_editor_assets', function() {
	// エディター用のスタイル
	wp_enqueue_style( 'theme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css' );
} );

投稿画面にコードを貼り付け

こちらに投稿画面用のテンプレートを用意しました。

以下のコードをコピーして、使いたいところで Ctrl + Shift +V (⌘ + Shift + V) で貼り付けましょう。

コピペ

貼り付けるコード

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__2"} -->
<p class="rating-val__2">2</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>ラベルA</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__4"} -->
<p class="rating-val__4">4</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>ラベルB</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__6"} -->
<p class="rating-val__6">6</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>ラベルC</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__8"} -->
<p class="rating-val__8">8</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>ラベルD</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

さきほどのコードを投稿画面へコピペすると、数値とラベルなどを変更できます。

使うたびに貼り付けるのは大変なので、自分が使いやすいようにカスタマイズしたらWordPressの「パターン」に登録しておきましょう。

好きな形式で入力できます

数値の指定
トップへ戻る

グラフの使い方

基本的に数値とラベルと入力したら、円グラフ表示のための追加CSSクラス rating-val__x の数値を変更するだけで使えます。

グラフの数値を指定

投稿画面内の数値を入力しただけでは、実際の記事表示画面のグラフ描写には反映されません。

別途クラス名の修正・指定が必要です。

グラフの数値を表示しているブロックを選択しましょう。

  • WPダッシュボード
  • 編集したいブロックを選択
  • 右上の歯車マークをクリック
  • 文書・ブロック
  • 高度な設定
  • 追加CSSクラス
ブロック
色の変更

グラフの数値に合わせて下のようなクラス名にしてください。「rating-val__8」

  • rating-val__0 (0、または数値がない場合)
  • rating-val__4 (4の場合)
  • rating-val__10 (10の場合)

rating-val__ (アンダースコア2つ)のあとに0〜10までの数字を入力します。すでに入力済みの場合は数値のみ変更すればOKです。

グラフの最大値を 5 にする場合は、数値が 4のときは rating-val__8 としましょう。

スマホでの横並びの数を指定

THE SONIC の場合のカラム設定

モバイルで表示したときに縦に1列に並んでしまうので、こちらの設定が必要です。親のカラムブロック(全体)を選択して右サイドメニューから設定します。

カラム設定

カラムのモバイル表示を2列または3列に

SWELL の場合のカラム設定

SWELL も同様に カラムブロック(全体)を選択して右サイドメニューのカラム設定をします。

SWELLカラム

カラムのモバイル表示を2列に

SWELLで3列にしたい

WordPressからの設定ではスマホ表示で2列までしか変更できませんが、追加でCSSを追加することで3列表示も可能です。

style.css に以下のコードを追加して下さい。

/*SWELL モバイル3カラム*/
@media
 (max-width: 959px) {
    .wp-block-columns.sp_column2.sp_col3 > .wp-block-column {
        flex-basis: 32% !important;
    }
    .wp-block-columns.sp_column2.sp_col3 > .wp-block-column:nth-child(2n) {
    margin-left: 0;
    }
}

投稿画面で「カラム設定 > スマホでの列数設定」 を2列にすると、一番下の追加CSSクラスに「sp_column2」が挿入されるので、半角スペースを一つ開けて「sp_col3」を追加しましょう。

その他のテーマの場合

テーマでモバイルのカラム列数が設定できない場合は以下のコードを style.css に追記します。

/*モバイルカラム列数*/
@media (max-width: 959px) {
    .wp-block-columns.sp_col2,
    .wp-block-columns.sp_col3 {
        justify-content: space-around;
        margin-top: 0;
    }
    .wp-block-columns.sp_col2 > .wp-block-column {
        flex-basis: 48% !important;
    }
    .wp-block-columns.sp_col3 > .wp-block-column {
        flex-basis: 32% !important;
    }
}
  • sp_col2 モバイル2列表示
  • sp_col3 モバイル3列表示

カラム全体を選択して、追加CSSクラスに 「sp_col2」または「sp_col3」を入力して下さい。

トップへ戻る

グラフをカスタマイズ

色の指定方法

style.css に貼り付けたコードを編集することでグラフの色を変更できます。

  • –red: カラーコード
  • –yellow: カラーコード
  • –blue: カラーコード
  • –green: カラーコード

カラーコードが分からない場合は、HTMLカラーピッカー を使いましょう。

数値でグラフの色を変更

0 〜 10 の数値によってグラフの色を変更することができます。

style.css の .rating-val__X(1〜10) の conic-gradient(var(–red)

redの部分をそれぞれ blue、yellow、green などに指定しましょう。

.rating-val__X {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--red) XXX, var(--bg-blank) XXX);
}

標準では以下のように指定しています。

  • 0 はグレー
  • 1〜2 は 赤 (red)
  • 3〜4 は 黄 (yellow)
  • 5〜7 は 青 (blue)
  • 8〜10 は 緑 (green)
数値ごとの色

グラフの色を一色だけにする

グラフを一色だけにしたい場合は、rating-val__X (1〜10) の conic-gradient(var(–red) の部分を すべて 同じにします。青一色にするなら var(–blue) にしましょう。

同一色

グラフのグラデーションを指定

標準ではグラフ内側にグラデーションがつきます。枠線のみにしたい場合は style.css を以下のように指定します。

  • –grad: 1
グラデーションなし

数値の背景色を指定

標準では数値の背景色は白になっています。背景色をグラフの色にしたい場合は style.css を以下のように指定します。

  • –num: 0

数値の色を変更

数値の色をグラフの色と同一にしたい場合は以下のようにそれぞれ color: var(–red) を追加します。

/* 数値の色の変更 */
.rating-val__X {
  background: var(--bg-grad), var(--bg-num),
    conic-gradient(var(--red) XXX, var(--bg-blank) XXX);
    color: var(--red);
}

総合評価ラベルをつける

こちらのコードを投稿画面に Ctrl + Shift +V (⌘ + Shift + V)で貼り付けて下さい。

<!-- wp:paragraph {"className":"rating-ttl"} -->
<p class="rating-ttl">総合評価：8 / 10</p>
<!-- /wp:paragraph -->
トップへ戻る

グラフ単体で使う場合

好きな場所に段落ブロックを2つ追加しましょう。

1つめの段落ブロックの追加CSSクラスを 「rating-val__数字」

2つめの段落ブロックがラベルとなります。追加CSSクラスは不要です。

レンタルサーバーを「ConoHa WINGパック」にするとTHE SONICが通常 7,980円/ 年 が 5,980円になります！

ConoHa を見てみる

ブロックエディターに完全対応の高機能テーマ。柔軟にブロックをカスタマイズできるのが魅力です。

SWELL を使ってみる
WordPress
WordPress カスタマイズ
アイキャッチ

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

ZIMA

気になるガジェットやサービスをレビュー！日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

関連記事

目次
  1. カスタマイズの手順
  2. style.css を編集
  3. editor-style.css を編集
    1. functions.php
  4. 投稿画面にコードを貼り付け
  5. グラフの使い方
    1. グラフの数値を指定
  6. スマホでの横並びの数を指定
    1. THE SONIC の場合のカラム設定
    2. SWELL の場合のカラム設定
    3. その他のテーマの場合
  7. グラフをカスタマイズ
    1. 色の指定方法
    2. 数値でグラフの色を変更
    3. グラフの色を一色だけにする
    4. グラフのグラデーションを指定
    5. 数値の背景色を指定
    6. 数値の色を変更
  8. 総合評価ラベルをつける
  9. グラフ単体で使う場合