Cocoon2.0から仕様変更に伴いコードを更新しました。以前のスタイルは修正履歴をご覧ください。Cocoonにはショートコードを記入するだけで簡単に評価スター(レーティングスター)を表示出来る機能が標準で備わっています。普通に表示するとこんな感じに可愛く星が表示されます。3.5この星をハートに変更したり、カスタマイズするCSSの紹介です。使い方を知ってる人は[コピペCSS]へスキップ次のようなショートコードを記述する事で評価スターに変換されます。rate="3.5"]表示サンプル3.5ビジュアルエディターをお使いならドロップダウンメニューから「ショートコード>評価スター」を選べば自動で挿入してくれます。評価スターにはrate以外にもオプションがあります。次のように記述すると「評価値5」「最大値10」で右の「数値が非表示」になります。1レーティングスター(評価スター)ショートコードの利用方法レビューページなどで便利な「評価スター」ショートコードのコード入力例です。wp-cocoon.com目次に戻る【コピペでOK】レーティングハートに変更するCSSこの記事のCSSはFontAwesome4をご利用の場合に適用できます。ご自身のサイトの「Cocoon設定>全体>サイトアイコンフォント」の設定をご確認ください。子テーマのstyle.cssにコードを追加するだけで変更出来ます。以下からお好きな表示のコードを選んで追加してください。-1em;}表示サンプル3.5目次に戻るカスタマイズする上記コードをカスタマイズ出来ますので参考にどうぞ!※デフォルト(スター)のままカスタマイズだけの適用も大体は可能です。数値の色や文字の太さを変更する以下のコードを追加すると変更出来ます。#F48FB1;の値を変更すればハートの色を変更出来ます。色選びはこちらのマテリアルデザインカラーが参考になります。30px;を追加すると大きく出来ます。値はお好みで変更してください。0.1em;の値を変更すると字間の余白を変更出来ます。/下」の中から選んでコードをstyle.cssにコピペしてください。コード内のcontent:'ココ';の記述を変更する事で好きなアイコンに変更できます。*/にのようなアイコンを指定すれば綺麗に表示できます。※アイコン幅の関係で別途調整が必要になる/調整しても綺麗に表示出来ない場合もあります。Iconsから選べます。WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。201...web.monogusa-note.com2019-02-19目次に戻るあとがき本来、評価スターは3種類のアイコンフォント「」で表現されていますがハートは2種類「」しか存在しないので、CSSでこの2つを合体させて半分のハートを表現しています。Cocoon1.7.6.1~2.0未満版Cocoon2.0以降仕様に変更がありました。1.7.6.1~2.0未満をお使いの場合は以下のスタイルで適用できます。Cocoon1.7.6以前版Cocoon1.7.6.1以降スタイルに変更がありました。それ以前をお使いの場合は以下のスタイルで適用できます。.star-half-oの.(ドット)の後にfa-を追加する事で適用できます。.fa-star)当ブログに掲載されているCSSについてCocoonのデフォルトスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れた場合は追加したコードを削除してください。Edge、iPhone8/Safariで行っています。CSSが反映されない場合は以下のページをご確認ください。