Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonで評価・ランキングの★を好きな場所で表示する方法

スポンサーリンク
カスタマイズ
この記事は約8分で読めます。

Cocoonにはランキング機能があり、評価の★を5段階(0.5刻み)に表示する機能があります。

ランキング機能のサンプル

ランキングサンプル

 

この機能で設定されている★を使って、好きな場所で5段階評価を表示する方法です。

使い方サンプル

評価の★使い方サンプル

 

スポンサーリンク

手順

手順
  • STEP1
    テンプレート登録
    テンプレートに★1~5のHTMLを登録する
  • STEP2
    記事内に挿入
    記事内に挿入する

 

Cocoonのテンプレート機能を利用し、登録しておけば簡単に可能です。

早速やり方とソースを。

 

テンプレート登録

Cocoon設定 → テンプレート を開きます。

 

テンプレート機能

 

新規追加」を押します。

テンプレート新規追加

 

テキスト入力画面にします。

わかりやすいタイトルを入れ、内容部分にコードをコピペで貼付けます。

 

テンプレート新規追加

コードは少し下にあります。

 

エディターのリストに表示」にチェックを入れ「保存」します。

 

テンプレート新規追加

 

テンプレート一覧で、各テンプレートのショートコードが確認出来ます。

テンプレート一覧

「エディターのリストに表示」にチェックを入れていれば、ショートコードを直接入力しなくても簡単に挿入可能です。

 

コードサンプル

Cocoonのランキングで利用している★部分のクラス名を利用しています。

 

コードは改行せずに記述する

 

★1

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span></span></p>

 

★1.5

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star-half" aria-hidden="true"></span></span></p>

 

★2

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span></span></p>

 

★2.5

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star-half" aria-hidden="true"></span></span></p>

 

★3

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span></span></p>

 

★3.5

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star-half" aria-hidden="true"></span></span></p>

 

★4

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span></span></p>

 

★4.5

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star-half" aria-hidden="true"></span></span></p>

 

★5

<p><span class="rating-star"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star" aria-hidden="true"></span></span></p>

 

 

記事内に挿入する

記事編集画面で、「テンプレート」メニューを開くと登録したものが表示されますので、簡単に挿入出来ます。

 

テンプレートを記事に挿入

 

挿入すると以下のようにショートコードで表示されます。

 

テンプレートを記事に挿入

 

「評価」などの文字を並列表示したい場合

普通に以下のように並べて記述しても

テンプレートを記事に挿入

 

表示は以下の通り、2行になってしまいます。

評価の表示サンプル

 

Cocoonのカラムレイアウトを利用する事で、横並びにする事が出来ます。

 

タグ」メニューを開き、好きなカラムを選択します。

 

カラムレイアウト挿入

レイアウト的には 2カラム(1:3)が良いかと思いますがお好みで。

カラム挿入すると以下のように表示されるので、

カラムレイアウト挿入

 

それぞれを編集します。

テンプレートを記事に挿入

 

上記での表示例

編集画面ではわかりやすいように背景に色がついていますが、実際には色はありません。記事での表示は以下の通り。

評価の表示サンプル

 

★のカスタマイズ

★の色やサイズを変えたい場合は、

一つ目の<span>タグで指定するクラス名を任意に変更し、その設定をCSSで追記すれば可能です。

ランキング機能で表示される★も同様に変わって良い場合は、クラス名を変更せずに「rating-star」にデザイン設定CSSを追記。

 

具体例

ランキング機能での★も同じ表示の場合

.rating-star { /*★*/
color: #0095d9; /*色*/
font-size:14px; /*サイズ*/
}

 

記事内利用時

評価の表示サンプル

 

ランキングウィジェット表示

ランキングサンプル

 

 

記事内で利用する★だけ変える場合は、上記CSSの「rating-star」部分を任意のクラス名に変更し、そのクラス名でテンプレート登録時のHTMLを書きます。

<p><span class="任意のクラス名"><span class="fa fa-star" aria-hidden="true"></span><span class="fa fa-star-half" aria-hidden="true"></span></span></p>

 

ランキング機能自体の使い方については以下をご覧ください。

Cocoonのランキング作成機能の使い方・設定方法を詳細に解説
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。 以下のようなものです。 上記のサンプルで言うと、必須項目は...
Cocoonのランキング機能をデザインカスタマイズ
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示するランキング機能の文字やボタンの色を変える簡単なカスタマイズをしてみます。 初期表示は以下のような感じで、枠...

コメント

タイトルとURLをコピーしました