cocoonのスキン「m-tomato」の背景画像を変更方法【ブログカスタム】

アフィリエイト

ブロガーさんに人気のワードプレスのテーマcocoon。
cocoonはスキンを変更することで、好みのデザインを選ぶことが出来るので、初心者ブロガーさんには特におすすめのワードプレスのテーマです。

スキンのなかでもおしゃれなスキンがm-tomatoというスキンなのですが、そのまま使うとスキン名通り、背景画像は画像のように野菜の画像になってしまします。

このm-tomatoの背景画像を変更することさえできれば、いろいろなジャンルのブログに使用できますよね。しかも結構おしゃれに決まり、他のブログと差をつけられるのでおすすめ!

検索したら、わかりやすい記事が上がってこなかったので、ここで簡単な変更方法をお伝えします。

スキンm-tomatoの背景画像の変更の手順

まずは、ワードプレスにログインをしてください。

ワードプレスでブログをまだ作ってない方はこちらの手順で作成
「サーバーの準備から記事を書けるまで」ブログ副業の始め方

ログインしましたら、「ダッシュボードの外観→カスタマイズ→追加CSS」に下記をコピペして貼ってください。

body{
background:#fff url(“https://サイトURL.com/wp-content/uploads/2022/10/haikei-1860-1240.png“) no-repeat;
/*上記のURLの部分をWordPressのメディア内に保存してある背景画像を指定*/
background-size: cover;
background-attachment: fixed;
}
body::before{
background:#fff url(“https://サイトURL.com/wp-content/uploads/2022/10/haikei-1860-1240.png“) no-repeat;
/*上記のURLの部分をWordPressのメディア内に保存してある背景画像を指定*/
background-size: cover;
background-attachment: fixed;
}

貼れましたら、赤文字になっている画像の指定先URLを変更する必要がありますので。
次の手順に進みます。

画像のアップロードの方法とURLのコピペの方法

「ダッシュボードのメディア→新規追加→背景画像をアップロード→」

画像右下の、黄色の枠の「URLをクリップボードにコピー」をクリックすると、画像のURLがコピーできます。それを先ほどの追加CSSの赤文字の部分のURLと差し替えて公開をクリックで、画像の変更は完了です。

これでほかのブロガーさんとは一歩先を行くデザインの完成です。
m-tomatoのスキンは、ワードプレスの機能で背景画像が変えられないので、なかなかを使う人はいないかもしれませんが、背景画像が変更できると非常におしゃれなスキンになりますので是非やってみください。

ワードプレス初心者がつまづきがちなところ
この記事を書いた人
setungo
setungoをフォローする