
WordPress無料テーマの「Cocoon」のスキン「m-tomato」の背景画像の「トマト」からどうやって変更するの?
作者サイトに載ってるQ&Aにあるけど、そのまま追加CSSコード書くと「エラー」になっちゃうけど。。
「ぜんぜん出来ん!」って方のみチャレンジしてみてください。
現在(2020/03/08時点)、当ブログテーマは「cocoon」を使わせていただいています。
使い勝手や初めにスキンがたくさん入っていますので、CSSの細かい知識がなくても、ある程度のレベルまで構築できるのが有難いです。
スキンは一周回って、「m-tomato」を使っています笑
ブログテーマ的に「野菜の背景画像」でも悪くなかったのですが、オリジナリティに欠けるかなーと思い、背景画像の変更に挑戦しました。
どうぞ最後まで、お読みくださいね。
親テーマいじります!私でもできました!


cocoon【親テーマ】→ 【skin】m-tomato
style.cssをいじります。



本来は、子テーマで修正できれば1番なんだけど、うまくいかないので、いったん「親テーマ修正」で対応します。
テーマのアップデートかかると、元に戻るので、修正箇所を覚えておくとヨシ。
黄色のアンダーラインの2カ所に背景画像のURL(管理画面のメディア内にアップしたもの・サイズ1860×1240)を指定します。
/* Cocoon skin m-tomato */
body {
background:#fff url("https://背景画像のURL.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
}
body::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url("https://背景画像のURL.jpg") center no-repeat;
background-size: auto;
background-size: cover;
}
アフター


「野菜」の背景画像から無事変更できました!いい感じ!
下記からは、奮闘記を紹介します笑。
【外観】の背景画像は出来ず【cocoon設定】背景画像設定も出来ないので、3ステップで挑戦


普通に、【外観】の背景画像や【cocoon設定】背景画像設定でも変更してみても、ずっと【野菜背景】でした
作者のまりんさんと質問者様のやりとりでは理解しきれない内容もあったので、とりあえず下記をコピペしました。
よしコレでいけると思いました。
background:#fff url("./images/bg-m-tomato.jpg") no-repeat;
/*上記のURLの部分をWordPressのメディア内に保存してある背景画像を指定*/
background-size: cover;
background-attachment: fixed;
なぜか上記を「追加CSS」や「子テーマのstyle.css」にコピペするとエラーが出ます。。
expected a function or ident after colon エラー
と出ます。function とかのことなので、コピペ自体に少し欠けている内容があるかもと思いました。
とりあえず親テーマ探ってみたら解決しました!
- 親テーマ「cocoon」選択
- 「skin」→「m-tomato」→「style.css」選択
- 13行目と27行目あたりのURLを変更する
- エラーの正体は、body{} の記述がコピペでは欠けていたから?
画像付きで解説します!
①親テーマ「cocoon」選択


②「skin」→「m-tomato」→「style.css」選択




「親テーマ」内の「style.css」を編集します。
③13行目と27行目あたりのURLを変更する


背景画像のURLが書かれている「2箇所」だけ書き換えましょう。
お疲れ様です!これで上手く変更できたはず!
④エラーの正体は、body{} の記述がコピペでは欠けていたから?





考察ですが、作者サイトの「コード」のままだと、「クラス?」指定がされてなかったからじゃないでしょうか?
背景画像の扱い方


背景画像設定のポイントは下記。
- URL設定
- リサイズ
- 画像圧縮
- フリー素材などから大きめのGETする(1860×1240以上)
- 画像圧縮するサイズを変更する(1860×1240以上)
- メディア内から背景画像のURL取得
フリー素材の参考に
画像の圧縮に
サイズの変更に
まとめ|本来は子テーマでやりたい
- 親テーマ「cocoon」選択
- 「skin」→「m-tomato」→「style.css」選択
- 13行目と27行目あたりのURLを変更する
作者サイトのコピペしたコードでは、おそらく欠けているのはbody{ }の記述?
CSSの記述の仕方に問題がありそうです。本来は追加CSSに記述して、解決するのがベストなので勉強してみます。
ご参考までに。
cocoonからJINへ乗り換えを検討している方は下記の記事もどうぞ。
今日は最後まで、お読みいただきありがとうございます!