ども！あき山です。
WordPressテーマ「Cocoon（コクーン）」、とても高機能なテーマなので私も利用させてもらってます。更新頻度も高く、作者の「わいひら」さんが積極的にユーザーとやり取りをしていて、無料で使用できる今最も熱いWordpressテーマです。
そんなCocoonには、ランキング機能というのがあります。（下の画像）
Cocoon公式 商品・サービスランキングを作成して配置する方法
こんな風にCocoonではランキングを作成することができるのですが、詳細ページへのリンク（青色のボタン）に表示させるべきページがない場合は、下部にページURLリンク（赤色のボタン）が横一面に表示されます。
また、ボタンの性質上アフィリエイトリンクを作りにくく、画像部分にアフィリエイトリンク設定した場合、１つ（例えばAmazonだけ）しか作れません。普段の商品リンクのようにAmazon、楽天、Yahooなどのボタンを配置したい場合もあります。
なので、ランキングページのような「王冠」と「星」の表示さえできれば、普通のページ構成の方が作りやすいということもあると思います。
そこで今回は、Cocoonのランキング表示でも使われている王冠と星の表示方法を利用しながら、Cocoonで王冠と星を表示させる方法を紹介します。
王冠と星の表示する
１位の場合
まずは、１位の金の王冠の表示のさせ方です。
これを表示する場合は、以下のhtmlをビジュアル入力ではなくテキスト入力でコピペします。
<div class="ranking-item-name">
<div class="ranking-item-name-crown">
<div class="g-crown">
<div class="g-crown-circle"></div>
</div>
</div>
<div class="ranking-item-name-text">1位：A商品</div>
</div>
「1位：A商品」の部分は、好きな文字を入れて下さい。
☆の表示のところは、Cocoonに用意されている以下のショートコードを直接入力すればOKです。
[star rate="4.5"]詳しくはCocoonの公式サイトの以下のページを参照してください。星の数や横に入れる数字など、色々カスタマイズできます。
２位の場合
次に、２位の銀の王冠の表示のさせ方です。
これを表示する場合は、以下のhtmlをビジュアル入力ではなくテキスト入力でコピペします。
<div class="ranking-item-name">
<div class="ranking-item-name-crown">
<div class="s-crown">
<div class="s-crown-circle"></div>
</div>
</div>
<div class="ranking-item-name-text">2位：B商品</div>
</div>
「2位：B商品」の部分は、好きな文字を入れて下さい。
☆の表示のところは、Cocoonに用意されている以下のショートコードを直接入力すればOKです。
[star rate="4"]３位の場合
最後は、3位の銅の王冠の表示のさせ方です。
これを表示する場合は、以下のhtmlをビジュアル入力ではなくテキスト入力でコピペします。
<div class="ranking-item-name">
<div class="ranking-item-name-crown">
<div class="c-crown">
<div class="c-crown-circle"></div>
</div>
</div>
<div class="ranking-item-name-text">3位：C商品</div>
</div>
「3位：C商品」の部分は、好きな文字を入れて下さい。
☆の表示のところは、Cocoonに用意されている以下のショートコードを直接入力すればOKです。
[star rate="3.5"]実際に表示させた例
上の方法で作成した「王冠と星」にCocoonの商品リンクを組み合わせれば、ランキング表示の記事が簡単にできます。
例えばこんな感じです。
どうでしょう？王冠と星のところ以外は自由にレイアウトを変えられるので結構便利だと思います。
実際に私が商品紹介で使っている記事はこちらです。
関連 【Bluetooth対応】スマホで管理できるおすすめの体重計は？【2018年秋】
関連 運動会にも使える高倍率なAPS-C用の望遠レンズを比較してみた
記事中では１位～３位までランキングを表示しつつ、コメントを入れたりしています。こんな感じで王冠と星を使うといい感じのランキングを作れるのではないでしょうか？
まとめ
Cocoonのランキング表示でも使われている王冠と星の表示方法を利用しながら、Cocoonで王冠と星を表示させる方法を紹介しました。
Cocoonに実装されている機能（CSSなど）を利用したので、htmlを上記のように書けば簡単に表示させることができます。
ただし、王冠表示のほうは、今後Cocoonのランキング表示の仕様が変更されたら（class名などが再構築されたら）、今回の表示方法は使えなくなるので注意が必要です。
ではまた！