僕はワクワクしたい(/・ω・)/

社内であたふたしているSEのメモ帳

【CSS】半分の星を表示する方法【はてなブログでも使えるよ】

商品レビューや書評で星を使って評価するとき、
半分の星ってどう表示するの~って困りますよね。
結構苦労したのでやり方を書いておきます。

サンプル

まずは見てください。
例えば星2.5の場合。
★★☆☆
※色は変えれます。

表にすればこんな感じです。

内観・外観 ★★★
接客 ★★★★☆
お値段 ★★★★
美味しさ ★★★★
やり方

CSS
CSSはこんな感じに書きます。

/* ---------☆マーク------------ */
.half {
position:relative;
white-space: nowrap;
}
.half:before {
content: attr(data-heading);
overflow: hidden;
position: absolute;
width: 50%;
}

はてなブログの場合は、
ブログ設定画面のデザイン -> カスタマイズ -> デザインCSS にコピペしてください。

HTML
記事に書くときはこんな感じで書いてください。

見た目 書き方
☆☆☆☆ <font color="red"><span class="half" contenteditable="false" data-heading="★">☆</span>☆☆☆☆</font>
☆☆☆ <font color="blue">★<span class="half" contenteditable="false" data-heading="★">☆</span>☆☆☆</font>
★★☆☆ <font color="springgreen">★★<span class="half" contenteditable="false" data-heading="★">☆</span>☆☆</font>
★★★ <font color="aqua">★★★<span class="half" contenteditable="false" data-heading="★">☆</span>☆</font>
★★★★ <font color="deeppink">★★★★<span class="half" contenteditable="false" data-heading="★">☆</span></font>

以上です!(/・ω・)/