Cocoonのショートコードで星評価を入れる方法｜ブログでレビューをわかりやすく

ブログで商品やサービスを紹介するとき、文章だけでなく「星」で評価を見せると、とても伝わりやすくなります。

特に、以下のような場面で星評価が活躍します：

「商品レビュー記事で総合評価を一目でわかるようにしたい」「比較記事で複数商品の評価を並べて表示したい」「映画や本の感想で満足度を視覚的に伝えたい」「アプリやサービスの使用感を星で表現したい」

WordPressテーマの Cocoon（コクーン） には、簡単に星評価を入れられるショートコードが標準で用意されているのをご存知ですか？プラグインを追加したり、複雑なHTMLを書いたりする必要がありません。

この記事では、Cocoonのショートコードを使って星（★）の評価を表示するやり方を、初心者の方でもすぐに実践できるよう、わかりやすく解説します。

Cocoonの星評価ショートコードとは？

ショートコードの基本概念

ショートコードって何？

WordPressのショートコードとは、記事に [〇〇] のような短いコードを書くだけで、ボタンやボックス、装飾などを簡単に表示できる仕組みです。

ショートコードのメリット：

HTMLやCSSの知識が不要
統一されたデザインを簡単に使用
コードが短くて覚えやすい
テーマの機能として安定動作

Cocoonのショートコードの特徴

豊富な種類：

星評価（レビュー用）
ボタン（リンク用）
吹き出し（会話風表現）
ボックス（情報整理）
タブ（コンテンツ切り替え）

簡単な操作：

エディタ画面で直接入力
プレビューで即座に確認
カスタマイズオプションも豊富

Cocoonの星評価ショートコードの仕組み

基本的な表示例

星評価を表示するショートコードは以下のように書きます：

[star rate="4.5"]

実際の表示： ★★★★☆ (4.5)

このように、5つ星の評価システムで、指定した数値に応じて星が塗りつぶされ、数値も併せて表示されます。

評価の表現方法

星の塗りつぶし：

整数部分：完全に塗りつぶされた星
小数部分：半分塗りつぶされた星
残り部分：空の星（アウトライン）

数値表示：

星の後ろに括弧付きで数値表示
読者にとってより具体的な評価がわかる

基本的な使い方

整数での評価

シンプルな星評価

[star rate="3"]

表示結果：★★★☆☆ (3)

用途例：

「普通」レベルの評価
5段階評価の中間点
合格ラインギリギリの商品

[star rate="5"]

表示結果：★★★★★ (5)

用途例：

最高評価の商品
強くおすすめしたいサービス
満点の満足度

小数点を使った詳細評価

より細かい評価表現

[star rate="4.5"]

表示結果：★★★★☆ (4.5)

[star rate="3.7"]

表示結果：★★★☆☆ (3.7)

小数点評価のメリット

より正確な評価：

4点と5点の間の微妙な差を表現
レビューサイト風の詳細評価
複数項目の平均値表示

読者への配慮：

「ほぼ満点だけど少し惜しい」感を表現
過度に完璧すぎない誠実な評価
比較時の細かな差別化

数値を非表示にする方法

星マークのみの表示

[star rate="4" number="off"]

表示結果：★★★★☆

数値非表示が適している場面

デザイン重視の場合：

スッキリとした見た目にしたい
星マークだけで十分伝わる内容
テキストが多い記事での視覚的なアクセント

感覚的な評価の場合：

数値よりも印象を重視
おおまかな満足度の表現
複数項目を並べる際の統一感

実践的な活用例

商品レビュー記事での使用

総合評価の表示

【総合評価】

4.2

とても使いやすく、コストパフォーマンスも良い商品です。

項目別評価の詳細表示

【詳細評価】
・デザイン性：[star rate="4.5" number="off"]
・使いやすさ：[star rate="4.0" number="off"]  
・コスパ：[star rate="3.5" number="off"]
・耐久性：[star rate="4.0" number="off"]
・総合評価：[star rate="4.0"]

このように項目別に評価を分けることで、読者が重視するポイントに応じて判断材料を提供できます。

比較記事での活用

複数商品の評価比較

## 商品A
[star rate="4.5"]

高性能で操作も簡単。価格はやや高めですが満足度は高いです。

## 商品B
[star rate="3.8"]

価格は手頃ですが、一部機能に物足りなさを感じます。

## 商品C
[star rate="4.1"]

バランスの取れた良い商品。初心者にもおすすめです。

サービスレビューでの使用

体験談と評価の組み合わせ

【利用期間】3ヶ月
【満足度】[star rate="4.3"]

実際に使ってみて感じたのは、サポート対応の丁寧さです。
初心者でも安心して利用できました。

書籍・映画レビューでの活用

エンターテイメント系コンテンツの評価

【ストーリー】[star rate="4.5" number="off"]
【演技・演出】[star rate="4.0" number="off"]
【映像・音響】[star rate="4.8" number="off"]
【総合】[star rate="4.4"]

感動的なストーリーで、最後まで飽きることなく楽しめました。

カスタマイズとデザイン調整

星のデザインを調整する方法

CSSでの色変更

Cocoonの星評価は、CSSで色をカスタマイズできます：

/* 星の色を変更 */
.star-rating .star-fill {
    color: #ff6b6b; /* 赤系の色に変更 */
}

/* 空の星の色を変更 */
.star-rating .star-empty {
    color: #ddd; /* 薄いグレーに変更 */
}

追加CSSの設定方法

WordPress管理画面にログイン
**「外観」→「カスタマイズ」**を選択
**「追加CSS」**をクリック
上記のCSSコードを貼り付け
**「公開」**をクリックして保存

サイズの調整

星のサイズを大きくする

.star-rating {
    font-size: 1.2em; /* 標準より20%大きく */
}

特定の場所だけサイズを変更

.review-section .star-rating {
    font-size: 1.5em; /* レビューセクションのみ大きく */
}

レスポンシブ対応

モバイル表示の最適化

@media (max-width: 768px) {
    .star-rating {
        font-size: 1.1em; /* スマホでは少し小さめに */
    }
}

よくあるトラブルと解決方法

星が表示されない場合

確認すべきポイント

ショートコードの記述確認：

// 間違った例
[star rate=4.5]        // クォート忘れ
[star rate:"4.5"]      // コロンを使用
[star rate-"4.5"]      // ハイフンを使用

// 正しい例  
[star rate="4.5"]      // 正しい記述

Cocoonの有効化確認：

**「外観」→「テーマ」**でCocoonが有効になっているか確認
子テーマを使用している場合は親テーマも確認

星の色やデザインがおかしい場合

スキン設定の確認

スキンとの競合：

**「Cocoon設定」→「スキン」**を開く
「スキンなし」に変更して確認
問題が解決すれば、他のスキンを試す

プラグインとの競合

一時的にプラグインを無効化：

「プラグイン」→「インストール済みプラグイン」
すべてのプラグインを一時無効化
星評価が正常表示されるか確認
1つずつ有効化して原因を特定

数値が正しく表示されない場合

レート値の設定確認

有効な数値範囲：

0.0 ～ 5.0の範囲で指定
5.0を超える値は5.0として表示
負の値は0.0として表示

小数点の記述：

[star rate="4.5"]  // 正しい（ピリオド）
[star rate="4,5"]  // 間違い（カンマ）

応用テクニック

評価グラフとの組み合わせ

視覚的に魅力的なレビューセクション

<div class="review-summary">
  <h3>総合評価</h3>
  <div class="overall-rating">
    [star rate="4.2"]
  </div>
  
  <div class="detailed-ratings">
    <div class="rating-item">
      <span>デザイン</span>
      [star rate="4.5" number="off"]
    </div>
    <div class="rating-item">
      <span>機能性</span>
      [star rate="4.0" number="off"]
    </div>
    <div class="rating-item">
      <span>価格</span>
      [star rate="3.8" number="off"]
    </div>
  </div>
</div>

SEO効果とユーザビリティ

構造化データとの連携

レビューの構造化マークアップ

星評価を使う際は、構造化データも併せて設定することで、検索結果での表示を向上させることができます：

<div itemscope itemtype="http://schema.org/Review">
  <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <meta itemprop="ratingValue" content="4.5">
    <meta itemprop="bestRating" content="5">
    [star rate="4.5"]
  </span>
</div>

アクセシビリティの考慮

スクリーンリーダー対応

<span class="sr-only">5つ星中4.5の評価</span>
[star rate="4.5"]

まとめ

今回は「Cocoonのショートコードで星評価を入れる方法」について、基本的な使い方から応用テクニックまで詳しく解説しました。

基本的な使い方：

4.5：数値付きの星評価
4.0：星マークのみ
小数点対応：より細かい評価表現が可能
5段階評価：0.0～5.0の範囲で指定

実践的な活用場面：

商品レビュー記事での総合評価
項目別評価の詳細表示
比較記事での複数商品評価
サービス体験談での満足度表示

カスタマイズのポイント：

CSSで色やサイズを調整可能
スキンとの競合に注意
レスポンシブ対応で全デバイス対応
アニメーション効果で視覚的魅力向上

トラブル対応：

ショートコードの記述ミスをチェック
Cocoonテーマの有効化確認
プラグインとの競合を調査
数値範囲の適切性を確認