Cocoonでは、簡単にランキングを作成することができます。完成したランキングは、ウィジェットやショートコードで本文記事やサイドバーなど好きな位置に設定します。繰り返し何度でも利用することもできてとても便利な機能です。
また、アフィリエイトのバナー広告やオリジナル画像も表示させることができます。Cocoonのランキングの作成と画像の挿入、サイトへの設定方法を説明します。
Cocoonのランキングとは
Cocoonでは、商品（サービス）をランキングで紹介できる便利な機能があります。
プラグインを使用しないので、サイトが重くなる心配もありません。簡単におすすめ商品や商品比較などのランキングが作成できるので、たくさんの記事に役立ちます。
Cocoonのランキングでは、商品説明だけではなく、内部リンクや外部リンクも貼り付けられます。サイトの回遊率を高めることやアフィリエイトにもつなげることができるので便利です。
例として「おすすめのASPベスト3」のランキングを作成しました。
A8.netは、会員数と広告主が国内最大級のASPです。登録サイト数は累計310万サイト以上で、アフィリエイト満足度12年連続1位（2022年）に選ばれています。
会員登録時に審査がないので、すぐにアフィリエイトが始められます。必ず登録しておきたいASPです。
バリューコマースは、Yahoo!ショッピングやAmazon、楽天など多くの人が知っている大手広告主が多数参加しているASPです。
Yahoo!の関連会社であり、報酬料率がお得に設定されています。Yahoo!のアフィリエイトを行うなら登録しておきたいASPです。
afbは、美容や健康食品の広告が充実してているASPです。報酬は確定報酬に消費税10％をプラスして支払われといううれしいメリットがあります。
また、オリジナル通販サイト「ClubT」のアフィリエイトができる唯一のASPです。オリジナルグッズに興味がある方はおすすめです。
ランキングの作成方法
1．「Cocoon設定」→「ランキング作成」をクリックします。
2．「新規作成」をクリックします。
3．ランキングの設定画面が表示されます。ランキングのタイトルを入力します。
自分以外は見ないので、自分が管理しやすいタイトルで大丈夫です。
4．商品名や見出しを入力します。
5．画像・バナータグと説明文を入力します。
商品画像はタグ（HTMLタグ）で入力することが必要です。画像URLでは表示されません。
- アフィリエイトのバナータグ（広告コード）を貼り付ける場合はASPから取得します。
- アフィリエイトのバナータグ以外の画像を貼り付ける場合は、画像のHTMLタグを入力します。画像のHTMLタグの作成方法はこちら
6．詳細ページのURL、「公式ページのURL」または「リンクダグ」があれば入力します。どちらか1つでも、入力しなくても問題ありません。
リンクタグには、ASPから取得したアフィリエイトリンクタグ（広告コード）を貼り付けます。
7．ランキングを続ける場合は「追加」をクリックします。同じように入力していくと5位まで作成することができます。ランキング作成が完成すれば、1位のクラウン（王冠）上にある「保存」をクリックします。
ランキングの設定方法
Cocoonのランキングを設定する方法は2つあります。好みに合わせて、設定しやすい方法で行ってください。
- ウィジェットを利用して設定する方法
- ショートコードを利用して本文中に設定する方法
ウィジェットで設定する方法
ウィジェット機能を利用すると、サイドバーや本文記事下などに固定してランキングを設定することができます。
1．「外観」→「ウィジェット」をクリックします。
2．「ランキング」を表示したいエリアへドラッグ＆ドロップします。
3．タイトルを入力して、ランキングを複数作成している場合はプルダウンの中から表示させるランキングを選び→「保存」をクリックします。
ランキングが正しく表示されているか、サイト（プレビュー）で確認してください。
ショートコードで設定する方法
ショートコードを利用すると、本文中にランキングを設定することができます。
1．「ブロック挿入ツールを切り替え」をクリックします。
2．ブロックにある「クラシック」をクリックします。
3．ランキングのプルダウンの中から表示させるランキングを選びます。
4．ランキングのショートコードが挿入されます。
ランキングが正しく表示されているかサイト（プレビュー）で確認してください。
ランキング画像のHTMLタグを作成する
Cocoonのランキングで画像を表示させるには、HTMLタグを入力することが必要です。
アフィリエイトのバナータグ（広告コード）を貼り付ける場合はASPから取得することができます。しかし、アフィリエイトのバナータグ以外の画像（オリジナル画像やインターネット上の画像）を貼り付ける場合は、自分でHTMLタグを作成することが必要です。
ランキング画像のHTMLタグの作成方法
1．ランキングに設定する画像のURLを取得します。
- メディアファイルの画像を設定する方法
- インターネット上の画像を設定する方法
2つの方法があるので、設定したい方法を選んで設定してください。
メディアファイルに画像をアップロードします。
（1）メディア→新規作成をクリックします。
（2）画像をアップロード→「URLをクリップボードにコピー」をクリックします。
画像のカーソルを合わせて右クリック→「画像のアドレスをコピー」をクリックします。
≫≫画像はMiジンコさんの手描きイラスト「ピンクヒョウ」をお借りしています。
※インターネット上の画像を使用する場合は著作権に注意してください。
2．以下のHTMLタグをコピペして、画像・バナータグに貼り付けます。
<img src="ここに画像のURLを入力" alt="ここに代替テキストを入力">
3．「img src」は画像ファイルを指定するタグです。先ほどコピーしておいた画像のURLを黄色い部分に貼り付けます。
※コピーしておいたURLは、クリップボード（Windowsマーク＋Ｖを同時に押す）から選ぶことができます。
4．「alt」は画像の代替となるテキストを表示するためのタグです。黄色い部分に代替テキスト（画像の説明）を入力します。
- 代替テキストは、画像の情報をユーザーや検索エンジンに伝えるためのテキスト（説明文）です。画像の意味が正しく伝わるテキストを簡潔に入力します。
5．画像のHTMLタグの設定ができました。「画像・バナータグと説明文」に戻って、ランキングの続きを完成させましょう。
Cocoonのランキング作成まとめ
Cocoonでは、オリジナルのランキングを簡単に作成することができました。画像の設定もできるので、分かりやすい商品（サービス）説明につなげることができます。内部リンクや外部リンクを設定することで、サイトの回遊率向上やアフィリエイトにも役立つ便利な機能です。
ぜひ、おすすめのランキングを作成するのに利用してください。
コメント