前略、usako20 さん

「見出しに画像 CSS」等のキーワードでググれば、いろいろな記事がヒットするかと思います。

CSSを使って見出しなどに画像やアイコンをつける方法

cssで見出しにアイコン画像を表示させる方法いろいろ

見出しの先頭にアイコン画像を付ける

cssで見出しに画像を表示させる方法「簡単にできる」

でも、それだと、ｈ２の見出しすべてに適用されてしまいます。

usako20 さん

それに、ランキング１位のとき、２位のとき、３位のとき、と、それぞれ別の画像を指定しなくてはなりません。

それには、同じｈ２でも１位のときと２位のとき、３位のときと、同じh2 でも区別がつくように、別の名前をつけなくてはなりません。

見出しブロックを「HTMLとして編集」をクリックして、HTMLとして編集します。

通常は、h2の見出しは、以下のようになっていると思います。

<h2>見出しの文字列</2>

これを、任意のクラス名を付けて、

<h2 class="ichiban">見出しの文字列</2>

このように書き替えます。

h2 と class の間は、半角スペースを入れます。

また、全ての文字や記号は、半角を使います。

クラス名は、半角小文字で、WordPressやCocoonで使われていない名前にします。

既に使われている名前を使ってしまうと、別の箇所にも影響してしまうことがあります。

こうすることによって、同じ h2 でも、付けた名前によって、個別にCSSのコードでデザインを指定することができるようになります。

CSSのコードで名前を付けた見出しを指定するときは、以下のような感じで指定します。

h2.ichiban {
  プロパティ： 値；
}

h2.ichiban:before {
  プロパティ： 値；
}

h2.niban {
  プロパティ： 値；
}

h2.niban:before {
  プロパティ： 値；
}

h2.sanban {
  プロパティ： 値；
}

h2.sanban:before {
  プロパティ： 値；
}

このようにすると、他のｈ２の見出しや、１位のとき、２位のときなどの区別をすることができるかと思います。（別の方法もあるかもしれませんが、良く使われる方法です。）

usako20 さん

HTMLやCSSについては、以下のトピックに有用な情報が沢山あります。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

usako20 さん

また、Cocoonには、ランキングを作成する機能も備わっているので、そちらを利用するという方法もあります。

商品・サービスランキングを作成して配置する方法

ランキングをショートコードで本文中に挿入する方法

usako20 さん

ご自身でCSS等で画像付けられる場合は、見出しに付ける画像については、ご自身で作成されるのが一番無難です。

Photoshop などであれば、比較的簡単に作れます。

ご自身で良く使われていて、慣れているソフト等で作れるのであればそれでもOKですし、画像関連のフリーソフトもあるみたいです。

自分で作ったものは、著作権など気にせずに使えるかと思います。

usako20 さん

試しにローカルのテストサイトで画像をh2に付けてみました。

Cocoonの本文の見出しは、.article というセレクタが付いた　.article h2 { というような指定がなされているので、.article を先頭につけておいた方が良いかもしれません。

画像は、75×55px で作成しました。（かなり雑ですが・・）

.article h2.ichiban {
  padding: 20px 20px 20px 95px;
  border-left: 5px solid #ff61ee;
  position: relative;
}

.article h2.ichiban::before {
  content: url("http://demo.local/wp-content/uploads/2021/01/no-one-01.png");
  margin-right: 20px;
  position: absolute;
  top: 5px;
  left: 10px;
}

usako20 さん

Cocoonのスキンなしのときのｈ２の見出しには、以下のような指定がデフォルトでなされています。

.article h2 {
  font-size: 24px;
  padding: 25px;
  background-color: #f5f6f7;
  border-radius: 2px;
}

ですので、見出しのデザインをカスタマイズするときには、その点にも注意する必要があります。

デフォルトのデザインをCSSで上書きして変更することもできます。

詳しくは、初心者向けのトピックの中にあるリンク先をご参照ください。

usako20 さん

上記の方法だと、スマホ表示のときに、画像が大きすぎるので、スマホ表示のときに少し小さくなるように、書いてみました。（サルワカさんのサイトを参考させていただきました。）

.article h2.ichiban {
  padding: 20px 20px 20px 95px;
  border-left: 5px solid #ff61ee;
  position: relative;
}

.article h2.ichiban::before {
  content: '';
  display: inline-block;
  width: 75px;
  height: 55px;
  background-image: url("http://demo.local/wp-content/uploads/2021/01/no-one-01.png");
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  top: 5px;
  left: 10px;
}

/*スマホでは少し小さく表示*/
@media screen and (max-width:480px) {

  .article h2.ichiban {
    padding-left: 70px;
  }

  .article h2.ichiban::before {
    width: 52.5px;
    height: 38.5px;
    top: 12px;
  }
}

画像を数種類使うとなると、画像の大きさと位置を指定する Class と、画像の url を指定する Classに分けて、Class を２つ設定した方が、CSSのコードは少なくなるかとは思いますが、だんだん複雑になってしまうので、この辺りまでにしておきます。

いずれにしても、ある程度はHTMLとCSSを学ばないと、何をやっているのか わからないかもしれません。

※参考にさせていただいたサルワカさんの記事

【CSS】疑似要素の画像サイズを変更する方法

@leafytree

この度も、とてもご丁寧にご教授いただき、誠にありがとうございます。

(前回操作ミスで、途中で会話が途切れてしまいました。
お礼を送信したのに届かず…、大変申し訳ございません。
改めて、その節もありがとうございました‼)

ググるときに「CSS」などを含めれば良いということもわからなかったので、わけのわからない沼に半日ハマっていました…。

初心者向けの記事もすごくありがたいです。
まずはそこから読んでいこうと思います。

最初にランキングを作成する機能でやってみたところ、
画像や記事のリンクがイメージ通りにいかなくて、この機能は違うのかも…、
と思っていたのですが、ご説明を読んでいくうちに何かわかってきて、
あれ？この機能をシンプルに使ったり、他のものと組み合わせれば良いのでは…？となってきました…。

見出しに付ける画像についても、大変参考になります。
ブログに自分のイラストを使ってみたいと思っていたので…。
著作権にもよく気を付けようと思います。

わざわざテストサイトでお試しいただいてしまい、申し訳ないです。
見本の通りになっていてすごいと思いました…。
HTMLとCSSは挫折したのですが、やはり少しでも学ばないと、すぐに困ってしまうなと実感しています。

お陰様で、イメージ通りのランキングが作れそうな気配です…！
これから地道にがんばってみます。
初歩的な質問を大変失礼いたしました。

この度も、とてもご親切に教えて頂き、本当にありがとうございます‼<(_ _)>

@usako20 さん

初心者向け参考サイトも良いのですが、HTMLやCSSは、書籍での学習もオススメです。

Webで検索すれば、本など必要ない、とおっしゃる方もいらっしゃるので、人によるかとは思いますが、要点をまとめている本もありますので、少し規模の大き目な書店をのぞいてみてもいいかもしれません。

あと、文字コードUTF-8（BOMなし）でプレーンテキストを扱うことができる、テキストエディターをお使いになられることをオススメします。

高機能な無料のテキストエディターはいろいろあるみたいでが、私は、シンプルな Mery をよくオススメしています。（初心者でもベテランでも扱いやすいです。）

テキストエディター「Mery」

Mery 設定方法

Mac環境の場合は、こちら。

CotEditor

文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法