cocoonスキンカスタマイズ【m-tomato】背景画像の変更ってどうやるの？【解決策】

2022 1/22

2020年3月8日 2022年1月22日

URL Copied!

WordPress無料テーマの「Cocoon」のスキン「m-tomato」の背景画像の「トマト」からどうやって変更するの？

作者サイトに載ってるQ＆Aにあるけど、そのまま追加CSSコード書くと「エラー」になっちゃうけど。。

「ぜんぜん出来ん！」って方のみチャレンジしてみてください。

~~現在（2020/03/08時点）、当ブログテーマは「cocoon」を使わせていただいています。~~

使い勝手や初めにスキンがたくさん入っていますので、CSSの細かい知識がなくても、ある程度のレベルまで構築できるのが有難いです。

スキンは一周回って、「m-tomato」を使っています笑

背景画像が透けていたり、目次のデザイン、ミドルメニューと記事一覧のバランスがお気に入り。

テーマ「Cocoon」のスキン「m-tomato」を作りました。

ブログテーマ的に「野菜の背景画像」でも悪くなかったのですが、オリジナリティに欠けるかなーと思い、背景画像の変更に挑戦しました。

どうぞ最後まで、お読みくださいね。

運営者：あいうえおLIFE

HTML名刺とプロフ（日々メンタルアップ）
モッピーでコインチェックをセルフバックし、元手5万円を取引後、報酬1万円GET
ブログをWordPressで始め、ブログ運営、カスタマイズ、登録販売者、動画編集にまつわる記事をアップ
ブロックエディタ完全対応テーマSWELLに変更後、収益UP（レビュー記事）
鬼滅の刃の記事が上位表示されSEOに自信をもつ

こんにちは

親テーマいじります！私でもできました！

cocoon【親テーマ】→　【skin】m-tomato

style.cssをいじります。

あいうえおLIFE

本来は、子テーマで修正できれば1番なんだけど、うまくいかないので、いったん「親テーマ修正」で対応します。

テーマのアップデートかかると、元に戻るので、修正箇所を覚えておくとヨシ。

１２行目〜３０行目あたりになります。

黄色のアンダーラインの２カ所に背景画像の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設定】背景画像設定も出来ないので、３ステップで挑戦

普通に、【外観】の背景画像や【cocoon設定】背景画像設定でも変更してみても、ずっと【野菜背景】でした

作者のまりんさんと質問者様のやりとりでは理解しきれない内容もあったので、とりあえず下記をコピペしました。

よしコレでいけると思いました。

background:#fff url("./images/bg-m-tomato.jpg") no-repeat;
/*上記のURLの部分をWordPressのメディア内に保存してある背景画像を指定*/
background-size: cover;
background-attachment: fixed;

なぜか上記を「追加CSS」や「子テーマのstyle.css」にコピペするとエラーが出ます。。