cocoonの便利な機能の1つにランキング作成機能があります。
グログでランキングサイトを作ってみたい
Cocoonのランキングってどうやって作るの？
このような疑問を解消します。
Cocoonは簡単にランキングを作成できる機能がついています。
この記事を読めばCocoonでランキングを作成できるようになります。
誰でもわかるように図解付きで解説しますので、最後までみてください。
本記事は以下の方におすすめです。
・Cocoon初心者の方
・Cocoonの便利な機能を知りたい方
・ブログでランキングを作りたい方
それでは、以下で詳しく解説します。
当サイトはWordPress有料テーマ「SWELL」を使用しています。
テーマ移行を考えているなら初心者の場合はSWELLがオススメです！
【 SWELLはこんなに使いやすい！ 】
- シンプルで飽きのこないデザイン
- 初心者が使いやすいブロックエディター
- 吹き出しなどの装飾が簡単！
- アフィリエイトボタンの設置もラクラク
- 記事作成の時間が大幅にカット！
＼有料テーマで迷っているならコレで決まり！／
Cocoonでランキングは簡単にできる
Cocoonではあらかじめランキングをつくるための機能が備わっています。
例えばこんなアフィリエイトの本のランキングを作成できます。
ブロガーのあいだでは「ルカルカ本」として知られている超有名なアフィリエイトやブログで稼ぐための本です。
著者：亀山ルカ 染谷昌利
ブログやアフィリエイトをやっている人なら必ず読んだことのある本です。
初心者がブログやアフィリエイトを始めるために必要なことはこの本1冊でほぼ完結します。
・ブログの記事の書き方
・アフィリエイト業者の選び方
・検索サーチにかかるようにする為の方法
・ブログデザインのコツ
など初心者でもわかりやすく解説してくれています。
Google AdSense マネタイズの教科書[完全版]
著者：のんくら(早川 修）, a-ki, 石田 健介 , 染谷 昌利
AdSenseでメシを食べてきた(マネタイズしてきた)その道のプロ4人による、「10年先も稼ぎ続ける」ための実践的なノウハウと考え方が紹介されています。
ブロガーの間では「のんくら本」として知らgoogle adsenseで稼ぐためには必須の本です。
●収益が安定して伸び続ける「テーマ」とは?
●AdSenseは「SEO戦略」が鍵!
●アクセスが一気に集まる具体的な「サイト構築法」
●収益が劇的にアップする「マネタイズ戦略」
●「オーソリティーサイト」で固定客を呼び込め!
●10年先も安定して稼ぐために……e AdSenseの収益化でつまずく部分を熟練者が詳しく解説してくれています。
人を操る禁断の文章術
著者：DaiGo
メンタリストで有名なDaigoさんによる文章術に関する本です。
アフィリエイターらブロガーにとっては書き方や文章の言い回しなど参考になることが間違いなし。
読み手の心を自在に操る「メンタリズム文章術」を大公開。
人間の感情をゆさぶる7つ引き金(トリガー)と、今すぐ文章にそのまま応用できるテクニックが紹介されています。
本書を読むことで相手の心理を先回りした「想像力を刺激する」書き方のテクニックをマスターすることができます。
人間の感情をゆさぶる7つ引き金(トリガー)と、今すぐ文章にそのまま応用できるテクニックを紹介。
これが簡単に作成できます。
それではCocoonを使ってランキングを作成する方法を解説します。
Cocoonでのランキングの作り方
Cocoonのランキングの作り方は非常に簡単です。
大きくわけて５つのSTEPの工程で作成できます。
- Cocoon設定からランキング作成ボタンをクリック
- ランキングの新規作成をしてランキング自体の名前をつける
- 各タイトル、画像、内容 URLを入力する（アフィリエイトのリンクでもOK）
- ランキングので紹介するものが複数ある場合はそれぞれ入力
- 作成したランキングをショーコードで貼り付けして完了
それでは以下で詳しく解説します。
まずはワードプレスのCocoon設定のランキング作成をクリックします。
そしてランキング作成画面の上部の新規作成ボタンをクリックします。
新規でランキングを作成する画面があわられますのでそこに必要な情報を入力していきます。
まずはタイトルを入力します。
今回は「アフィリエイト おすすめ本 ベスト３」と入力しました。
次に①～⑤の各項目を入力していきます。
①は「商品名」をいれます。文字で入力しても構いませんがアフィリエイトのテキストコードをスのまま入力するとそのままサイトへジャンプするようにできます。
②が「画像」をいれます。自分で用意した写真を張り付けても良いし、アフィリエイトサイトから取得した画像付きバナーのリンクを貼っても問題ありません。
自分で用意した画像を入れる際に注意点がありますので、こちらについては後ほど詳しく解説します。
③「商品の説明文」をいれます。
ご自身がランキングで紹介したい文章をわかりやすく簡潔に書いた方が良いです。
④と⑤は商品の詳細な説明がされているURLや公式サイトのURLを入れて下さい。
⑤のリンクタグの方にアフィリエイトのテキストバナーをそのまま貼り付けることもできます。
各項目を入力しました。
終わったら、左下の「変更を保存」を押してください。
同じ操作をランキング2位 3位と続けて入力します。
すべて入力が完了したら、「変更を保存」をおしてランキングの作成は終了です。
次にランキングを貼り付けたい投稿画面に移動します。
メニューバー中央のランキングのタブをクリックすると過去に作成したランキングのリストが出てきます。
先ほど「アフィリエイト おすすめ本 ベスト３」を作成したので投稿画面でビジュアルモードのまま自分の貼りたい位置にランキングのショートコードを貼り付けます。
無事に貼り付けました。
これでプレビューを押してサイトをみてみると見事にランキングが作成されています。
あとはご自身のサイトに合うように補足説明などして頂ければOKです。
Cocoonランキングの画像の貼り方の注意点
ランキングの画像の部分で１つ注意点があります。
画像バナーのリンクをそのまま貼る場合には特に問題ないのですが、ご自身で用意した画像の貼り付けがちょっと難しいので解説します。
まずはランキングや記事が作成途中であれば一旦「下書きとして保存」をして作業を中断してください。
次に左上の「メディアの追加」もしくはダッシュボードの左側のメニュー欄の「メディア」をクリックしてアップロードしたい画面を開きます。
アップロードが完了したらその画像をクリックします。
右側の下に「リンクのコピー」という欄でその画像のURLが記されているのでこれをコピーします。
そのURLをランキングの画像の欄に入力するのですが、コピーしてそのまま入力してしまうと上手く画像が表示されません。
ここで少しコードを書き加えます。とても簡単な作業なので安心してください。
まずランキングの画像のところに以下の文章を入れてください。
そして「用意した画像のURL」のところに貼り付けたい画像のURLを入力します。
これでうまく画像が表示されてるはずです。
Cocoonランキング作成 （まとめ）
いかがでしたでしょうか？
Cocoonでのランキングの作り方のまとめ
- Cocoon設定→ランキングの作成をクリック
- 新規作成を押すと簡単にランキングを作成できる
- タイトル、画像、サイトのURLに直接アフィリエイトのバナーを貼れる
- 自分で用意した画像の添付にはHTMLの書き加えが必要
- 画像の所に<img src=”用意した画像のURL” alt=”画像の説明文を入力”>を入力
以上でCocoon設定から簡単にランキングが作成できます。
画像の添付がわかりにくい面もありますが、全体的にとても簡単ランキングが作成できてしまいます。
ぜひランキングサイトを作ってみてください。
本記事がみなさまのお役に立てれば幸いです。
Cocoon初心者はこちらの記事もおすすめです。
【Cocoon初心者】箇条書きをボックスで囲む方法（ブログ）
【Cocoonの設定】親テーマから子テーマに移行する方法（ブログ）
ブログを始めたばかりの方はこちらもあわせてお読みください。
Cocoonから有料テーマに変えたい方はSWELLが断然オススメです！
ブロックエディターが不安な方でもSWELLなら１発で解決します。
当サイトはWordPress有料テーマ「SWELL」を使用しています。
テーマ移行を考えているなら初心者の場合はSWELLがオススメです！
【 SWELLはこんなに使いやすい！ 】
- シンプルで飽きのこないデザイン
- 初心者が使いやすいブロックエディター
- 吹き出しなどの装飾が簡単！
- アフィリエイトボタンの設置もラクラク
- 記事作成の時間が大幅にカット！
＼有料テーマで迷っているならコレで決まり！／
