cocoonの便利な機能の1つにランキング作成機能があります。

グログでランキングサイトを作ってみたい
Cocoonのランキングってどうやって作るの?
このような疑問を解消します。
Cocoonは簡単にランキングを作成できる機能がついています。
この記事を読めばCocoonでランキングを作成できるようになります。
誰でもわかるように図解付きで解説しますので、最後までみてください。
本記事は以下の方におすすめです。
・Cocoon初心者の方
・Cocoonの便利な機能を知りたい方
・ブログでランキングを作りたい方
それでは、以下で詳しく解説します。
当サイトはWordPress有料テーマ「SWELL」を使用しています。
テーマ移行を考えているなら初心者の場合はSWELLがオススメです!
【 SWELLはこんなに使いやすい! 】
- シンプルで飽きのこないデザイン
- 初心者が使いやすいブロックエディター
- 吹き出しなどの装飾が簡単!
- アフィリエイトボタンの設置もラクラク
- 記事作成の時間が大幅にカット!
\有料テーマで迷っているならコレで決まり!/
Cocoonでランキングは簡単にできる
Cocoonではあらかじめランキングをつくるための機能が備わっています。
例えばこんなアフィリエイトの本のランキングを作成できます。
これが簡単に作成できます。
それではCocoonを使ってランキングを作成する方法を解説します。
Cocoonでのランキングの作り方
Cocoonのランキングの作り方は非常に簡単です。
大きくわけて5つのSTEPの工程で作成できます。
- Cocoon設定からランキング作成ボタンをクリック
- ランキングの新規作成をしてランキング自体の名前をつける
- 各タイトル、画像、内容 URLを入力する(アフィリエイトのリンクでもOK)
- ランキングので紹介するものが複数ある場合はそれぞれ入力
- 作成したランキングをショーコードで貼り付けして完了
それでは以下で詳しく解説します。
まずはワードプレスのCocoon設定のランキング作成をクリックします。


そしてランキング作成画面の上部の新規作成ボタンをクリックします。


新規でランキングを作成する画面があわられますのでそこに必要な情報を入力していきます。


まずはタイトルを入力します。
今回は「アフィリエイト おすすめ本 ベスト3」と入力しました。
次に①~⑤の各項目を入力していきます。


①は「商品名」をいれます。文字で入力しても構いませんがアフィリエイトのテキストコードをスのまま入力するとそのままサイトへジャンプするようにできます。
②が「画像」をいれます。自分で用意した写真を張り付けても良いし、アフィリエイトサイトから取得した画像付きバナーのリンクを貼っても問題ありません。
自分で用意した画像を入れる際に注意点がありますので、こちらについては後ほど詳しく解説します。
③「商品の説明文」をいれます。
ご自身がランキングで紹介したい文章をわかりやすく簡潔に書いた方が良いです。
④と⑤は商品の詳細な説明がされているURLや公式サイトのURLを入れて下さい。
⑤のリンクタグの方にアフィリエイトのテキストバナーをそのまま貼り付けることもできます。


各項目を入力しました。
終わったら、左下の「変更を保存」を押してください。
同じ操作をランキング2位 3位と続けて入力します。
すべて入力が完了したら、「変更を保存」をおしてランキングの作成は終了です。
次にランキングを貼り付けたい投稿画面に移動します。


メニューバー中央のランキングのタブをクリックすると過去に作成したランキングのリストが出てきます。
先ほど「アフィリエイト おすすめ本 ベスト3」を作成したので投稿画面でビジュアルモードのまま自分の貼りたい位置にランキングのショートコードを貼り付けます。


無事に貼り付けました。
これでプレビューを押してサイトをみてみると見事にランキングが作成されています。
あとはご自身のサイトに合うように補足説明などして頂ければOKです。
Cocoonランキングの画像の貼り方の注意点
ランキングの画像の部分で1つ注意点があります。
画像バナーのリンクをそのまま貼る場合には特に問題ないのですが、ご自身で用意した画像の貼り付けがちょっと難しいので解説します。
まずはランキングや記事が作成途中であれば一旦「下書きとして保存」をして作業を中断してください。
次に左上の「メディアの追加」もしくはダッシュボードの左側のメニュー欄の「メディア」をクリックしてアップロードしたい画面を開きます。
アップロードが完了したらその画像をクリックします。


右側の下に「リンクのコピー」という欄でその画像のURLが記されているのでこれをコピーします。
そのURLをランキングの画像の欄に入力するのですが、コピーしてそのまま入力してしまうと上手く画像が表示されません。
ここで少しコードを書き加えます。とても簡単な作業なので安心してください。
まずランキングの画像のところに以下の文章を入れてください。
そして「用意した画像のURL」のところに貼り付けたい画像のURLを入力します。
これでうまく画像が表示されてるはずです。
Cocoonランキング作成 (まとめ)
いかがでしたでしょうか?
Cocoonでのランキングの作り方のまとめ
- Cocoon設定→ランキングの作成をクリック
- 新規作成を押すと簡単にランキングを作成できる
- タイトル、画像、サイトのURLに直接アフィリエイトのバナーを貼れる
- 自分で用意した画像の添付にはHTMLの書き加えが必要
- 画像の所に<img src=”用意した画像のURL” alt=”画像の説明文を入力”>を入力
以上でCocoon設定から簡単にランキングが作成できます。
画像の添付がわかりにくい面もありますが、全体的にとても簡単ランキングが作成できてしまいます。
ぜひランキングサイトを作ってみてください。
本記事がみなさまのお役に立てれば幸いです。
Cocoon初心者はこちらの記事もおすすめです。
【Cocoon初心者】箇条書きをボックスで囲む方法(ブログ)
【Cocoonの設定】親テーマから子テーマに移行する方法(ブログ)
ブログを始めたばかりの方はこちらもあわせてお読みください。




Cocoonから有料テーマに変えたい方はSWELLが断然オススメです!
ブロックエディターが不安な方でもSWELLなら1発で解決します。

