>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

Cocoonのランキング作成機能の使い方・設定方法を詳細に解説

Cocoon・使い方
この記事は約4分で読めます。

Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。

以下のようなものです。

商品ランキングサンプル

※画像です。 商品ランキングサンプル

 

 

上記のサンプルで言うと、必須項目は商品名の部分だけですので、これを使って他の用途にも使えそうです。

たとえば以下のような画像と説明文だけのリストなど。

商品ランキングサンプル

※画像です。 商品ランキングサンプル

 

特徴

  • アフィリエイトバナーやテキストリンクを貼るだけでランキング形式のリストが作成可能
  • バナーや商品名などはショートコード入力も可能なので「アフィリエイトタグ機能」を使って一元管理可能
  • 順位はいくつまででも登録可能
  • 登録できるリストの数も無限

 

とりあえず、機能通りの基本的な商品ランキングの作成から。

商品ランキング作成

Cocoon設定ランキング作成

商品ランキング設定

 

新規作成」を押します。

商品ランキング設定

1つ目の商品項目を作成

ショートコードでも入力可能な項目は以下の通り
  • 商品名などのタイトル部分
  • 画像バナー
  • 説明文
  • ページURL(公式サイト)

※公式サイトURL部分は「タグ入力」をクリックして入力エリアを表示後、ショートコードを入力します。

商品ランキング設定

 

以下の必須項目をまず入力します。

下図の赤囲み部分を入力

ランキング自体のタイトルを入力
1つ目の商品名または見出しを入力
評価の★を選択(なし 可)

商品ランキング設定

続けて任意項目を入力します。

上図の青囲み部分を入力

画像バナー画像のURLではなくタグで入力する必要があります。

アフィリエイトバナータグなどであれば、コピーして貼り付ければOKですし、「アフィリエイトタグ」に登録しているショートコードでもOK。

そうでない自サイト内の画像などを貼りたい場合はHTMLタグで入力します。

<img src="https://XXXX/XXX.jpg" alt="XXXX">
<a href=""><img src="https://XXXX/XXX.jpg" alt="XXXX"></a>

 

詳細ページURL公式サイトURLは省略も可なので、どちらか1つでも大丈夫ですし、両方入れなくても問題ありません。

詳細ページのみ入力した場合は、ボタンが全幅で1つ出ます。

ボタン1つの例

商品ランキングサンプル

※画像です。 商品ランキングサンプル

ボタン2つの例

商品ランキングサンプル

以上を入力したら一旦「保存」を押します。

商品ランキング設定

2つ目以降を順次作成

1つ目の登録(保存)がうまくいくと、2つ目の入力エリアが表示されます。

1つ目と同様に入力していきます。

商品ランキング設定

 

1つずつ登録していく形になるので、以下を繰り返していきます。

1つの商品入力完了→保存→次の商品入力

 

いくつまででも登録可能です。

 

保存時オプション

商品ランキング設定

作成したランキングリストは、ウィジェットとして好きなエリアに表示が可能ですが、投稿中に挿入したい場合などは、

「保存」の上にある「ビジュアルエディターのリストに表示」オプションをチェックします。(デフォルトでチェックが入っています)

記事本文中では利用しない場合は、チェックを外します。

※ちなみに、チェックしていなくても直接ショートコードを記述すれば投稿内に挿可能。

商品ランキング挿入

 

編集する

一覧の「編集」から修正や追加が出来ます。

商品ランキング編集

 

カスタマイズする

文字や★の色やサイズ、ボタンの色のカスタマイズについては以下をご覧下さい。

Cocoonのランキング機能をデザインカスタマイズ
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示するランキング機能の文字やボタンの色を変える簡単なカスタマイズをしてみます。 初期表示は以下のような感じで、枠線の色はサイトごとのキーカラーです。 ランキン...

 

作成したランキングを表示する

ウィジェット挿入

Cocoonのオリジナルウィジェット「[C]ランキング」を表示したいエリアに追加します。

商品ランキング挿入

 

ランキングが複数ある場合は、プルダウンで選択します。

商品ランキング挿入

 

投稿内に挿入

ビジュアルエディタの「ランキング」をプルダウンして選択し挿入します。

商品ランキング挿入

以上です。

 

コメント

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