WordPressテーマCocoonで評価用の星マークを使ってレビュー表示する方法【プラグインなし】

WordPressテーマCocoonで評価用の星マークを使ってレビュー表示する方法【プラグインなし】 スキル

こんにちは。kasumiです!

悩んでいる人
悩んでいる人

ブログ記事の商品レビューで見かける星マークってどうやってするんだろう?

このような悩みを解決します。

この記事では、WordPressテーマCocoonを使ってこのような星マークで評価する方法を紹介します。

使いやすさ5.0
コスパ4.0
総合評価4.5

プラグインや難しいコードなしの簡単な方法を紹介します!

ブログ初心者でもわかりやすく画像付きで解説するのでとっても簡単です。

今回の記事はこんな人にオススメ!
  • 星マークを使って評価する方法を知りたい
  • ブログ記事の見た目を良くしたい
  • レビュー記事をわかりやすくしたい

評価用の星マークを使えるようになると、読者の方が直感的に理解しやすくなります。

ブログでレビュー系の記事や商品比較系の記事を書く方には欠かせないテクニックです。

ぜひ、最後までみて下さいね!

WordPressで星マークの評価を使う方法【プラグインなし】

Cocoonには専用のショートコーが入っているので、それを選択するだけで使うことができます。

さっそくその手順を見ていきましょう!

①段落ブロックを追加します。


②上のメニューの中からショートコード[/]を選択します。


③ショートコードの中から『[/]評価スター』を選択します。


④このようなショートコードが表示されます。

このように、簡単に星マークができました。

星マークの表示を変える【Cocoon】

先ほど紹介した星マークは

  • 数値
  • 段階
  • 数字を非表示

などを変えることができます。

星の評価を変える

星マークの評価数値を変更します。

star rate=”3.7” max=”5″ number=”1″

star rateの部分の数字を変更します。

star rate=”3” max=”5″ number=”1″3.0
star rate=”1” max=”5″ number=”1″1.0
star rate=”0” max=”5″ number=”1″0.0
kasumi
kasumi

0も表示することができます。

後ろについている数値は小数点も表示することができます。

star rate=”3.5” max=”5″ number=”1″3.5
star rate=”4.7” max=”5″ number=”1″4.7
star rate=”1.4” max=”5″ number=”1″1.4

0.1刻みで表示することができます。

ただし、上記の表のように星マークは0.5単位でしか表示はできません。

星マークの評価の段階を変更

星マークの数はデフォルトでは5段階です。

段階を増やしたり、減らしたりすることができます。

「max」の部分の数字を変更します。

star rate=”2″ max=”3” number=”1″2.0
star rate=”2″ max=”7” number=”1″2.0
star rate=”2″ max=”10” number=”1″2.0

最大で100までできます。

80.0

数字を消すこともできる

赤ラインを引いている数字の部分を消したい場合もありますよね。

デフォルトではnumber=1」の数字が入っていますが、「number=0」にすると数字を消すことができます。

star rate=”3.7″ max=”5″ number=”13.7
star rate=”3.7″ max=”5″ number=”0
kasumi
kasumi

シンプルになりました。

星の評価の色を変更

星マークの色を変えることもできます。

star rate=”3.7″ max=”5″ number=”1″ color=”#ff0000″

追加したショートコードの後ろにcolorを追加します。

3.7

#の部分を変えれば好きな色に変えることができます。

star rate=”3.7″ max=”5″ number=”1″ color=”#ff1493″3.7
star rate=”3.7″ max=”5″ number=”1″ color=”#0000ff”3.7
star rate=”3.7″ max=”5″ number=”1″ color=”#ffa500″3.7
  • 深いピンク
  • オレンジ

カラーコードはこちらから参考にしてくださいね。

HTMLカラーコード: WEB色見本 原色大辞典

WordPressで星マーク評価の実用例【Cocoon】

星マークを実際に使った事例を紹介します。

レビュー記事に使う

星マークとテーブルブロックを組み合わせてレビュー表を作ります。

使いやすさ4.0
コスパ5.0
総合評価5.0

記事の内容を初めに紹介する

解説記事の内容について見出しボックス内に星マークを使っています。

この記事のレベル

重要度 3.7
初心者 3.7
難しさ 3.7

レシピ記事に使う

当サイトのブログ内レシピ記事に星評価マークを使っています。

実際に使っているサイトの例はこちら↓

まとめ

今回はWordpressのテーマCocoonを使って、簡単に評価用の星マークを表示する方法を紹介しました。

  • ショートコードを使えば簡単に星マーク表示することができる
  • 段階や色など表示方法も変えることができる
  • 星マークを使うことで読者が見やすい記事になる

評価用の星マークを使って、商品や自分の記事の魅力をわかりやすく読者の方に伝えて下さい。

最後までご覧いただきありがとうございした。

この記事を書いた人
kasumi

管理栄養士のkasumiです。
病院で管理栄養士として7年携わっています。
普段の仕事では、肥満、糖尿病、脂質異常症の方などに栄養指導を行っています。

ただ、自分が出産後にダイエットを始めて、働きながら、子育てをしながらのダイエットの難しさを実感しました。

そのため、忙しいママでも楽に作れて、楽しく続けることができるダイエットレシピを紹介しています。

また、ワーママであっても仕事・子育て・家族・美容・趣味・副業と興味のあることはすべてを楽しみたいと思い日々生活を送っています。

そんな日常も誰かのお役にたてればと思い紹介しています。
-------------------------------------------------------
web上での活動としては、YouTube、ブログにてダイエットレシピや食に関する様々な情報を発信。
また医療健康系サイトでの記事執筆活動も行っており、レシピ考案およびレシピ記事の執筆、健康食品の商品開発なども行う。

kasumiをフォローする
スキル
kasumiをフォローする
ワーママよくばりLife

コメント

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