Cocoonの評価スター(レーティング)をハートに変更するCSS

Cocoonの評価スター(レーティング)をハートに変更するCSS
2019-12-22: Cocoon2.0から仕様変更に伴いコードを更新しました。
以前のスタイルは修正履歴をご覧ください。

Cocoonにはショートコードを記入するだけで簡単に評価スター(レーティングスター)を表示出来る機能が標準で備わっています。

普通に表示するとこんな感じに可愛く星が表示されます。

3.5

この星をハートに変更したり、カスタマイズするCSSの紹介です。

スポンサーリンク

【予備知識】評価スターを表示する方法

次のようなショートコードを記述する事で評価スターに変換されます。

[star rate="3.5"]
表示サンプル
3.5
ビジュアルエディターをお使いならドロップダウンメニューから「ショートコード>評価スター」を選べば自動で挿入してくれます。

評価スターにはrate以外にもオプションがあります。
例えば次のように記述すると「評価値5」「最大値10」で右の「数値が非表示」になります。

[star rate="5" max="10" number="0"]
表示サンプル
オプション一覧と解説
オプション項目オプション説明記述方法初期値
rate評価値0~100の数値(0.1刻み)5
max評価の最大値1~100の数値(整数)5
number数値の表示切り替え0 / 1 (非表示/表示)1

【コピペでOK】レーティングハートに変更するCSS

この記事のCSSはFontAwesome4をご利用の場合に適用できます。
ご自身のサイトの「Cocoon設定>全体>サイトアイコンフォント」の設定をご確認ください。

子テーマのstyle.cssにコードを追加するだけで変更出来ます。
以下からお好きな表示のコードを選んで追加してください。

ハート(左右分割)

/* 評価スターをハート(左右分割)に変更する */
.rating-star .fa {
    color: #F48FB1; /* 色 */
    font-family:FontAwesome;
    letter-spacing: 0;
    margin-right: 0.1em;
    display: inline-block;    
    line-height: 1;
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .fa-star-half-o:before,
.rating-star .fa-star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
}
.rating-star .fa-star-half-o:before {
    width: .5em;
    overflow: hidden;
}
.rating-star .fa-star-half-o:after {
    text-indent: -.5em;
}
表示サンプル
3.5

ハート(上下分割・上)

/* 評価スターをハート(上下分割・上)に変更する */
.rating-star .fa {
    color: #F48FB1; /* 色 */
    font-family:FontAwesome;
    letter-spacing: 0;
    margin-right: 0.1em;
    display: inline-block;    
    line-height: 1;
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .fa-star-half-o:before {
    height: .5em;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}
.rating-star .fa-star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
    text-indent: -1em;
}
表示サンプル
3.5

ハート(上下分割・下)

/* 評価スターをハート(上下分割・下)に変更する */
.rating-star .fa {
    color: #F48FB1; /* 色 */
    font-family:FontAwesome;
    letter-spacing: 0;
    margin-right: 0.1em;
    display: inline-block;    
    line-height: 1;
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .fa-star-half-o:before {
    height: .5em;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    line-height: 0;
}
.rating-star .fa-star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
    text-indent: -1em;
}
表示サンプル
3.5

カスタマイズする

上記コードをカスタマイズ出来ますので参考にどうぞ!
※デフォルト(スター)のままカスタマイズだけの適用も大体は可能です。

数値の色や文字の太さを変更する

以下のコードを追加すると変更出来ます。

.rating-star .rating-number {
    color: #E8C518; /* 色 */
    font-weight: bold; /* 太字 */
}
表示サンプル
3.5
3.5

ハート/スターの色を変更する

.rating-star .fa {}内のcolor: #F48FB1;の値を変更すればハートの色を変更出来ます。
色選びはこちらのマテリアルデザインカラーが参考になります。

.rating-star .fa {
    color: #FF7043; /* 色 */
}
表示サンプル
3.5
3.5

ハート/スターのサイズを変更する

.rating-star .fa {}内にfont-size: 30px;追加すると大きく出来ます。値はお好みで変更してください。

.rating-star .fa {
    font-size: 30px;
}
表示サンプル
3.5
3.5

ハート/スターの余白を変更する

.rating-star .fa {}内のmargin-right: 0.1em;の値を変更すると字間の余白を変更出来ます。

.rating-star .fa {
    margin-right: 0.5em;
}
表示サンプル
3.5
3.5

 数値左の余白は別で調整したい場合追加

.rating-star .fa:nth-last-of-type(2) {
    margin-right: 0;
}
表示サンプル
3.5
3.5

ハート/スター以外のアイコンに変更する

まず上の「左右分割」「上下分割・上/下」の中から選んでコードをstyle.cssにコピペしてください。
コード内のcontent:'ココ';の記述を変更する事で好きなアイコンに変更できます。

/* 黒塗り */に、/* 白抜き */にのようなアイコンを指定すれば綺麗に表示できます。
※アイコン幅の関係で別途調整が必要になる/調整しても綺麗に表示出来ない場合もあります。

変更例: フラッグ 変更箇所(抜粋)

.rating-star .fa {
    color: #0288D1; /* 色 */
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f024'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f11d'; /* 白抜き */
}
表示サンプル
3.5

黒塗り     
\f111\f0f3\f075\f02e\f024
白抜き     
\f10c\f0a2\f0e5\f097\f11d

使用可能なアイコンはFont Awesome Iconsから選べます。

FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】
WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。2019-07-0...

あとがき

本来、評価スターは3種類のアイコンフォント「」で表現されていますが
ハートは2種類」しか存在しないので、CSSでこの2つを合体させて半分のハートを表現しています。

評価スターもハートにすると少し印象が可愛いらしい感じになります
こんなカスタマイズいかがでしょう?

修正履歴

Cocoon2.0以降仕様に変更がありました。
1.7.6.1~2.0未満をお使いの場合は以下のスタイルで適用できます。

/* 評価スターをハート(左右分割)に変更する */
.rating-star [class^=star]{
    color: #F48FB1; /* 色 */
    letter-spacing: 0;
    margin-right: 0.1em;
}
.rating-star .star:before,
.rating-star .star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .star-half-o:after,
.rating-star .star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .star-half-o:before,
.rating-star .star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
}
.rating-star .star-half-o:before {
    width: .5em;
    overflow: hidden;
}
.rating-star .star-half-o:after {
    text-indent: -.5em;
}
/* 評価スターをハート(上下分割・上)に変更する */
.rating-star [class^=star]{
    color: #F48FB1; /* 色 */
    letter-spacing: 0;
    margin-right: 0.1em;
}
.rating-star .star:before,
.rating-star .star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .star-half-o:after,
.rating-star .star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .star-half-o:before {
    height: .5em;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}
.rating-star .star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
    text-indent: -1em;
}
/* 評価スターをハート(上下分割・下)に変更する */
.rating-star [class^=star]{
    color: #F48FB1; /* 色 */
    letter-spacing: 0;
    margin-right: 0.1em;
}
.rating-star .star:before,
.rating-star .star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .star-half-o:after,
.rating-star .star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .star-half-o:before {
    height: .5em;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    line-height: 0;
}
.rating-star .star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
    text-indent: -1em;
}

Cocoon1.7.6.1以降スタイルに変更がありました。
それ以前をお使いの場合は以下のスタイルで適用できます。

/* 評価スターをハート(左右分割)に変更する */
.rating-star .fa {
    color: #F48FB1; /* 色 */
    letter-spacing: 0;
    margin-right: 0.1em;
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .fa-star-half-o:before,
.rating-star .fa-star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
}
.rating-star .fa-star-half-o:before {
    width: .5em;
    overflow: hidden;
}
.rating-star .fa-star-half-o:after {
    text-indent: -.5em;
}
/* 評価スターをハート(上下分割・上)に変更する */
.rating-star .fa {
    color: #F48FB1; /* 色 */
    letter-spacing: 0;
    margin-right: 0.1em;
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .fa-star-half-o:before {
    height: .5em;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}
.rating-star .fa-star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
    text-indent: -1em;
}
/* 評価スターをハート(上下分割・下)に変更する */
.rating-star .fa {
    color: #F48FB1; /* 色 */
    letter-spacing: 0;
    margin-right: 0.1em;
}
.rating-star .fa-star:before,
.rating-star .fa-star-half-o:before {
    content: '\f004'; /* 黒塗り */
}
.rating-star .fa-star-half-o:after,
.rating-star .fa-star-o:before {
    content: '\f08a'; /* 白抜き */
}
.rating-star .fa-star-half-o:before {
    height: .5em;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    line-height: 0;
}
.rating-star .fa-star-half-o:after {
    display: inline-block;
    vertical-align: bottom;
    text-indent: -1em;
}
「カスタマイズする」にあるスタイルは[class^=star]の箇所を.faに変更、.star .star-o .star-half-o.(ドット)の後にfa-を追加する事で適用できます。(例: .fa-star)

当ブログに掲載されているCSSについて
タイトルとURLをコピーしました