Bloggerに星評価を表示させる

1. デザインのタイプ

【星評価（5段階・ハーフ刻み対応）表示デザイン】
CSSのみで制御され、HTMLのデータ属性を書き換えるだけで直感的に評価を表示できる軽量なレーティングデザインです。

評価：4.5

2. デザインの特徴

• CSSのみで完結
  JavaScriptを使用せず、HTMLのアトリビュート（data-rate）の値を読み取って星の幅を調整するため、軽量でBloggerの表示速度を落としません。
• 文字化け対策済み
  BloggerのXMLエディタ上で発生しやすい「★」記号の文字化けを、CSS内でのユニコード指定（\2605）により回避しています。
• ハーフ（0.5）刻みに対応
  0.5刻みで11パターンのクラス設定を行い、直感的な数値指定で細かい評価を視覚化できます。

3. 紹介コード

  
<style>
/* 5段階評価の星表示CSS */
.star5_rating {
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー */
}

.star5_rating:before, .star5_rating:after {
    /* 文字化け防止のため実体参照を使用 (★5つ) */
    content: '\2605\2605\2605\2605\2605';
}

.star5_rating:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー */
}

/* 5段階評価に応じた幅の設定 */
.star5_rating[data-rate="5"]:after{ width: 100%; }
.star5_rating[data-rate="4.5"]:after{ width: 90%; }
.star5_rating[data-rate="4"]:after{ width: 80%; }
.star5_rating[data-rate="3.5"]:after{ width: 70%; }
.star5_rating[data-rate="3"]:after{ width: 60%; }
.star5_rating[data-rate="2.5"]:after{ width: 50%; }
.star5_rating[data-rate="2"]:after{ width: 40%; }
.star5_rating[data-rate="1.5"]:after{ width: 30%; }
.star5_rating[data-rate="1"]:after{ width: 20%; }
.star5_rating[data-rate="0.5"]:after{ width: 10%; }
.star5_rating[data-rate="0"]:after{ width: 0%; }
</style>

<!-- 表示用HTML -->
<p><span class="star5_rating" data-rate="5"></span> 星5</p>
<p><span class="star5_rating" data-rate="4.5"></span> 星4.5</p>
<p><span class="star5_rating" data-rate="4"></span> 星4</p>
<p><span class="star5_rating" data-rate="3.5"></span> 星3.5</p>
<p><span class="star5_rating" data-rate="3"></span> 星3</p>
<p><span class="star5_rating" data-rate="2.5"></span> 星2.5</p>
<p><span class="star5_rating" data-rate="2"></span> 星2</p>
<p><span class="star5_rating" data-rate="1.5"></span> 星1.5</p>
<p><span class="star5_rating" data-rate="1"></span> 星1</p>
<p><span class="star5_rating" data-rate="0.5"></span> 星0.5</p>
<p><span class="star5_rating" data-rate="0"></span> 星0</p>