notenotennoote

これで全てその部分が赤くなります。

#page {
    background: red;
}

で特定のページを緑ならこうですね。

body.page-id-683 #page {
    background: green;
}

<div class=’add’>をどこに足したら良いかな？

.addはわざわざ追加しなくても、今ある要素のクラス名を指定すればいいと思います。

つまり

.add {
clear:both;
}

じゃなくて

.今ある要素のクラス名 {
clear:both;
}

でOKです。

では、今ある要素のクラス名はなんですか？F12を押して見てみて(ㆁωㆁ*)

キャッシュレス事業の文言と画像は、並べたsquareとApple Payの画像の下 (squareの画像の真下部分) に配置したいのですが、それはどの様にしたら良いでしょうか？

flex版でなくてfloat版のお話ですよね？あれ？すでに書いたと思いますが、何をした結果できませんでしたか？

数ある画像の中で、この画像！という時

サイトを開いて、F12をクリックしてください。開発ツールが開きます。あとは目的の要素にカーソルを合わせてクリックすると、開発ツールにその要素のクラス名が表示されます。これでまず「この画像！」のクラス名がわかります。

もし「この画像！」を唯一のものとして指定したければ、次のようにクラス名に唯一の名前を追加すればOKです。

<div class="figure wp-block-image size-large">
↓
<div class="figure wp-block-image size-large yuiitunogazodayo">

あとはCSSでこう指定すると、.yuiitunogazodayoを指定した方だけが表示できるはずです。

figure.wp-block-image.size-large{
    display: none; /* 非表示 */
}
figure.wp-block-image.size-large.yuiitunogazodayo{
    display: block; /* 表示 */
}

以上でおしまいです。長くってすみません。。

まず先ほどのfloatをなくします。

figure.wp-block-image.size-large {
    /*float: left;*/
}

でHTMLをこうです。

<section class="site-main fullwidth">
    <h1 class="entry-title">priceテスト</h1>
    <div class="entry-content">
        <!-- 料金リスト -->
    </div>
    <div class="entry-payment">
        <figure><!-- Square等の画像 --></figure>
        <figure><!-- ApplePayの画像 --></figure>
    </div>
</section>

CSSはこう。

.entry-payment {
    display: flex;
    align-items: center;
}

つまり、横並びにしたい部分を.entry-paymentなどの要素で囲み、そこにflexを指定するわけです。

floatの場合だとスマホなどへの対応も困難ですが、flexなら次のようにすれば横幅がいくら変化しても自動調整してくれますから便利ですよ。

.entry-payment {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 横幅が入りきらなかったが次の行へ自動調整 */
}

あれ？投稿したのに「この投稿は自動化システムにより承認待ちとなっています。モデレーターが手動でレビューします。」と表示されてしまいました。ちょっと長文だったからかな。分割してもう一度投稿してみます。ご質問の件少しおまちください。