WordPress

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

追記 2020/03/10

↓の記事のように普通に背景画像変更できた方はよみとばしてください笑

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

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

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

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

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

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

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

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

style.cssをいじります。

12行目〜30行目あたりになります。

黄色のアンダーラインの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 とかのことなので、コピペ自体に少し欠けている内容があるかもと思いました。

とりあえず親テーマ探ってみたら解決しました!

  1. 親テーマ「cocoon」選択
  2. 「skin」→「m-tomato」→「style.css」選択
  3. 13行目と27行目あたりのURLを変更する
  4. エラーの正体は、body{} の記述がコピペでは欠けていたから?

画像付きで解説します!

①親テーマ「cocoon」選択

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

③13行目と27行目あたりのURLを変更する

お疲れ様です!これで上手く変更できたはずです!

④エラーの正体は、body{} の記述がコピペでは欠けていたから?

※ただ親テーマだとWordPress更新や、テーマ更新の際に、直接追記した部分が消える可能性があるので、修正した箇所をメモしておくことをお勧めします。

背景画像の扱い方

背景画像設定のポイント

URL設定とリサイズ・画像圧縮は必須

  • フリー素材などから大きめのGETする(1860×1240以上)
  • 画像圧縮する
  • サイズを変更する(1860×1240以上)
  • メディア内から背景画像のURL取得

フリー素材の参考に

画像の圧縮に

サイズの変更に

まとめ|本来は子テーマでやりたい

  1. 親テーマ「cocoon」選択
  2. 「skin」→「m-tomato」→「style.css」選択
  3. 13行目と27行目あたりのURLを変更する

コピペしたコードでは、おそらく欠けていたのはbody{ }の記述でしたね。

しかし、背景画像ごと変えるので、親テーマいじってみた方が、わかりやすいかなと思い挑戦してみた次第です。

CSSの記述の仕方に問題がありそうです。本来は追加CSSに記述して、解決するのがベストなので勉強してみます。

ご参考までに。

こちらも読まれてます