みなさんCocoonのランキング機能って使っています?
Cocoonに標準で装備されています。先にランキングを作っておいて、それを超簡単に記事中にセットすることができます。
複数の記事にランキングを配置しても、その元のランキングページを変更すれば全てに反映しますので便利すぎます。
やはりCocoonは神テーマです。
Cocoon設定のメニューにあります。
私は「釣りブログ」と「ポイ活ブログ」を運営していて、このランキング機能にはかなりお世話になっています。
- メバルにおすすめのロッドベスト5
- 今一番おいしいポイ活ランキング
みたいな感じです。

今回紹介するのは、このランキングに画像をいれる方法です!
もともと、画像をいれる枠があるのに、どうやって入れるのかがわからなかった。
おそらく今後もランキングは作成していくだろうし、その度にどうやって画像いれるんだっけ?となることが予想できます。
未来の自分に向けた記事でもあります。
もし、同じ悩みをお持ちの方がいれば、即解決しますのでぜひご確認ください。
ランキングに画像をいれる方法
ランキング作成をスタートすると、1位から順番に情報を入力していきますよね。
赤枠で囲った場所に画像のタグを入力します。

結論からいうと
<img src=”◆◆◆◆” alt=”画像説明文”>
- 上記の◆に写真URLをいれる
- 商品説明文に、日本語でOKなのでなんの写真かわかるテキストをいれる
簡単でしょ?上のタグをコピーして、◆の部分を変更してください。
↓コピーして使ってください
<img src="◆◆◆" alt="○○○">
◆画像のURLはここからもってくる!
使いたい画像をメディアライブラリにいれておいてください
↓
ライブラリの中の画像をクリック
↓
右下にURLがあります。コピーも簡単にできるようになっています。

このURLを先ほどの◆◆◆に部分にいれるわけです。
○の部分には、日本語でなんの画像かわかるようにテキストをいれる
<img src=”https://turiguyasan.happy-333.com/wp-content/uploads/109-2.jpg” alt=”画像を入れる説明“>
これでランキングに画像をいれることができます。

詳しい意味は理解できてないけど、別にいいんです!求めてた結果になってるので!
今回はランキングに画像をいれられなくて困るだろう未来の自分にむけて、解決方法を残しておきました。
皆様の参考になれば幸いです。
コメント