【cocoonカスタマイズ⑦】固定ページごとにテーマ画像を変える方法｜テーマ画像=アピールエリアの画像

伝えたいこと

写真のように各トップページごとに、別々の背景画像を設定する方法を紹介します。

僕のブログは web3.0 School , web3.0 University , Coccon など、複数のトピックスを扱おうと思っています。そして、トピックスごとに固定ページを作成しました。この時、固定ページごとに背景にする画像を変えようと思いました。この方法を紹介している記事は少ないと思うので、ぜひ参考にしてみてください。

背景画像の設定手順

① 画像を表示させたい固定ページのIDを覚える
今後の設定で必要になってきます。

「外観」→「カスタマイズ」

追加CSSの欄に以下のプログラムをコピー&ペースト

.page-id-576 .appeal {
  background-image: url('https://r2m.tokyo/wp-content/uploads/2024/05/web30_university_3.png');
}

「メディア」→「ライブラリ」→ アピールエリアに表示させたい画像を選択

「URLをクリップボードにコピー」をクリック

「外観」 → 「カスタマイズ」

⑦「追加 CSS」をクリック

⑧ コードの中にあるURLを⑦でコピーしたものに変更
　 page-idを ① で覚えたものに変更

⑨ 「公開」をクリック

「Cocoon設定」→「Cocoon設定」→「アピールエリア」

スクロールし…
アピールエリアの高さを指定します。ここの高さはそれぞれに合った値を見つけてください…

アピールエリアの以下の項目はこのようになっています。僕の場合は テキストメッセージエリア は表示しないように設定しています。