WordPressテーマをJINからSWELLに変更SWELL公式サイト

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

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

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

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

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

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

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

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

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

もくじ

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

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

style.cssをいじります。

あいうえおLIFE

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

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

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」選択

「親テーマ」内の「style.css」を編集します。

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

背景画像のURLが書かれている「2箇所」だけ書き換えましょう。

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

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

あいうえおLIFE

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

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

背景画像の扱い方

背景画像

背景画像設定のポイントは下記。

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

フリー素材の参考に

画像の圧縮に

サイズの変更に

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

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

作者サイトのコピペしたコードでは、おそらく欠けているのはbody{ }の記述?

今回は荒っぽく、親テーマいじってみたので、本意ではないです笑。

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

ご参考までに。

もくじ
閉じる