以前のスタイルは修正履歴をご覧ください。
Cocoonにはショートコードを記入するだけで簡単に評価スター(レーティングスター)を表示出来る機能が標準で備わっています。
普通に表示するとこんな感じに可愛く星が表示されます。
この星をハートに変更したり、カスタマイズするCSSの紹介です。
【予備知識】評価スターを表示する方法
次のようなショートコードを記述する事で評価スターに変換されます。
[star rate="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
子テーマの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; }
ハート(上下分割・上)
/* 評価スターをハート(上下分割・上)に変更する */ .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; }
ハート(上下分割・下)
/* 評価スターをハート(上下分割・下)に変更する */ .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; }
カスタマイズする
上記コードをカスタマイズ出来ますので参考にどうぞ!
※デフォルト(スター)のままカスタマイズだけの適用も大体は可能です。
数値の色や文字の太さを変更する
以下のコードを追加すると変更出来ます。
.rating-star .rating-number { color: #E8C518; /* 色 */ font-weight: bold; /* 太字 */ }
ハート/スターの色を変更する
.rating-star .fa {}
内のcolor: #F48FB1;
の値を変更すればハートの色を変更出来ます。
色選びはこちらのマテリアルデザインカラーが参考になります。
.rating-star .fa {
color: #FF7043; /* 色 */
}
ハート/スターのサイズを変更する
.rating-star .fa {}
内にfont-size: 30px;
を追加すると大きく出来ます。値はお好みで変更してください。
.rating-star .fa {
font-size: 30px;
}
ハート/スターの余白を変更する
.rating-star .fa {}
内のmargin-right: 0.1em;
の値を変更すると字間の余白を変更出来ます。
.rating-star .fa {
margin-right: 0.5em;
}
数値左の余白は別で調整したい場合追加
.rating-star .fa:nth-last-of-type(2) { margin-right: 0; }
ハート/スター以外のアイコンに変更する
まず上の「左右分割」「上下分割・上/下」の中から選んでコードを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'; /* 白抜き */ }
黒塗り | |||||
\f111 | \f0f3 | \f075 | \f02e | \f024 | |
白抜き | |||||
\f10c | \f0a2 | \f0e5 | \f097 | \f11d |
使用可能なアイコンはFont Awesome Iconsから選べます。
あとがき
本来、評価スターは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; }
- Cocoonのデフォルトスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れた場合は追加したコードを削除してください。
- 表示確認はWindows/Chrome, Firefox, Edge、iPhone8/Safariで行っています。
- CSSが反映されない場合は以下のページをご確認ください。
WordPressテーマ設定(CSS等含む)を変更しても反映されない場合のトラブルシューティング方法 | Cocoon
CSSが効かない・反映されないときの対処法まとめ - 不具合を発見しましたらお手数ですが該当記事のコメント欄へご連絡おねがいします(返信にはお時間をいただく場合があります)