【図解】Cocoonでもしもアフィリエイトを使用してランキングを作成する方法を画像付きで解説します。

スポンサーリンク
ブログ関連

ブログを書いていると気になってくるのが、収益化ですよね。

特にプロモーション案件ではなく、物販メインの場合、オススメしたい商品の魅力が読者に上手く伝わるか不安になりませんか?

そんなとき、とっても役に立つのがランキング表示です。

ランキングは町中の至るところで目にします。定食屋さんのメニュー、人気のスマホ、最新の音楽など。

Cocoonで作成したランキングメニューの写真の引用
wp-cocoon.comよりランキング写真引用

この画像のように、感覚的に読者に商品の魅力を伝えやすく、自分のオススメしたい順番をわかりやすく表示できるので、収益化には必須の機能と言えるでしょう。

しかし、ランキング表示をするためには、専用のプラグインを入れたり、スタイルシートを触ったりと、なんだか敷居が高く感じてしまいますよね(^_^;)))

でも、大人気の無料テーマ、Cocoonにはランキング機能が標準搭載されています。

Mnn
Mnn

確かにランキングは格好良いけど、なんや横文字だらけでギブアップや…

ダチョウはん
ダチョウはん

説明したるから、ちょっと勉強しなはれ!

スポンサーリンク

ランキング機能の作成方法を画像付きで解説

今回は、初心者ブロガーに大人気の、大手アフィリエイトASPもしもアフィリエイトを使った、ワードプレスのテーマCocoonでのランキング作成方法を画像付きでわかりやすく説明します。

スマホ画面の画像を使用していますので、スマホを使ってブログを書いている方には参考になると思います。

ダチョウはん
ダチョウはん

もしもアフィリエイトに未登録なら、すぐに下のリンクからとりあえず登録したほうが良いで!

楽天もAmazonも、もしもアフィリエイト経由なら審査に通りやすいんや!

Cocoonを使用したランキング機能の具体的な作成方法

無料のブログテーマであるCocoon。

無料とは思えない程機能が充実しており、大変人気のあるテーマです。

スタイルシートとか意味わかりませんし、プラグインを入れたらブログが重くなるって聞くし…

Cocoonはそんな悩みを解決してくれます。

ブログテーマに迷ったらとりあえずCocoon!というくらい優れたテーマです。

そのCocoonを使用したランキングの詳しい作成方法を今から解説しますね。

①まずはランキングメニューを作成

ワードプレスダッシュボードのCocoon設定のスクリーンショット
ダッシュボードのCocoon設定です。わかりやすい!

Cocoon設定をタップして展開し、ランキング作成をタップ。

まずはテーマにCocoonを導入しているブログの管理画面にログインし、ダッシュボードを開きます。

ランキング作成ページのスクリーンショット
ランキングは何個でも無料で作れます!

新規追加をタップすると、ランキングメニューが作成できますので、ランキング名をつけてください。

ランキング名を入力するページ
ランキング名はわかりやすくしましょう!

このランキング名は記事内に表示されることになるので、読者が見てもわかりやすいように入力しましょう。

※ここまでのまとめ

ダッシュボード→Cocoon設定→ランキング作成→ランキング名入力

②ランキング表示したい商品を探す

今回はもしもアフィリエイトで楽天の商品を選択します。

Amazonの商品を使用する場合でも、することは同じですので、見て下さいね(*^^*)

もしもアフィリエイトトップページ、提携中プロモーションの画面スクリーンショット
否認されたプロモーション…ショック…

まずはもしもアフィリエイトにログインし、トップページのプロモーション検索より、提携中プロモーションを選択。

もしもアフィリエイト提携中プロモーションより、楽天市場のページスクリーンショット
Amazonも楽天も商品への直接リンクが出来ます!

楽天市場の商品リンクを選択します。

どこでもリンクももちろん使用可能ですが、ランキング機能の特性から、直接その商品にリンクしたほうが良いと思います。

商品リンクページから紹介したい商品を検索しているページのスクリーンショット
簡単に商品が探せます!

このように、紹介したい商品を検索します。

今回は、過去にこちらの記事でも紹介している中国製の激安釣竿を商品として選択します。

該当する商品の下の商品リンクを作るボタンをタップします。

商品リンク作成ページのスクリーンショット
格好良い釣竿だなぁ!

種別、画像、画像サイズを選択し、ソースコードをコピーします。

後々、ランキング機能の中で商品の説明は書けますので、種別は【画像】を選択しておくと良いでしょう。

Mnn
Mnn

な、なんとかここまで出来たで!

ダチョウはん
ダチョウはん

あと一歩や!もうちょっとだけ頑張れ!

※ここまでのまとめ

プロモーション検索→提携中プロモーション→商品リンクへ→商品検索→商品リンクを作成→ソースコードのコピー

③ランキングとして商品紹介部分を作成する

今までの過程で、もしもアフィリエイト経由での楽天市場の商品を紹介するリンクコードを作成しましたので、ここからは、Cocoonのランキングメニューにそのリンクを貼っていきます。

商品名入力部分のスクリーンショット
王冠がわかりやすく演出してくれますね!

まずはその商品の名前を入力します。

長々と入力するよりも、わかりやすく具体的な商品名を入力しましょう。

また、その商品の評価も入力できます。

評価があることによって、感覚的に商品価値を判断出来るようになりますので便利な機能ですよ(*^^*)

商品内容入力ページのスクリーンショット
なんだか急に難しくなった!

ここからが今回のポイントです。

もしもアフィリエイトの商品リンクを使用したランキング作成ですので、画像・バナータグも、詳細ページURLにも入力はしません。

とりあえず、わかりやすく説明文のみ記載しておきましょう。

入力が終わったらさらに下へスクロールします。

ソースコードをどこに、入力するかを説明するための画像
機械音痴には理解でき~ん!

もちろんここのページURLにも入力しません。

Mnn
Mnn

え!さっき、もしもアフィリエイトでコピーしたソースコードはどこに入力するの?

ダチョウはん
ダチョウはん

落ち着け!今から説明するからな!

では、どこにソースコードを入力するかと言うと、上の画像下部に【タブで入力】と色がついている文字がありますよね。

そこをタップすると、もうひとつ入力する部分が展開されます。

タグを入力する場所を示したスクリーンショット
なんともうひとつ入力する場所がありました!

ここまで来たらさらにその下の追加をタップ。

ランキング1位の商品を入力することが出来ました。

※ここまでのまとめ

商品名入力→評価入力→タグで入力→ソースコードの貼り付け

1位の商品を入力し終えると、2位以下を入力できるようになります。

同じ手順で5位まで追加できますので、簡単にランキングページを作ることができます。

Mnn
Mnn

私でも簡単にできたー!

ありがとう!ダチョウはん!

ダチョウはん
ダチョウはん

思ったよりも簡単やったやろ~?

よく頑張ったな!

もしもアフィリエイトでソースコードを作る際、画像ではなく文字にすればその文字がリンクボタンに表示されます。

あえて画像をボタンではなく、別枠で載せるということも可能ですので、色々な形でランキング作成をすることが出来ます(*^^*)

物販の場合、ランキングページはかなり有効な手段になります。Cocoonでは無料で使えるので、使いこなせるようにしておくと良いでしょう(*^^*)