【Cocoon】『イノセンス』スキン・背景の網模様を消す方法(解説付き)／CSS

ブログ関連

2022.07.23 2022.06.02

WordPressのCocoonテーマをお使いのみなさま、スキンは何をご利用ですか？？

わたしのオススメは『イノセンス』(おはようポテトさん作) 。ほっこり優しい使い心地 が気に入っています。

さて今回は、イノセンスをよりシンプルに使いたい方のために「背景の網模様を消す方法」についてご紹介します。

この方法は、『ほんわかライトニング』の背景模様を消したい時にも有効です。

CSSを加えるだけ。操作はとっても簡単です！

CSS何それ？美味しいの？と不安な場合は、後半の仕組み(解説) も参考にしてみてくださいね。

サイトの編集作業なので、念のため事前にバックアップをとっておいてくださいね。

Cocoonスキン『イノセンス』背景の網模様を消す方法

まずはWordPressの左メニューから『外観』⇒『テーマファイルエディター』を開きます。

Cocoon Child: スタイルシート (style.css)というページにうつります。
CSSファイルの編集ページ。サイトの見た目を変えることができるところです。

「子テーマ用のスタイルを書く」の下にこんな感じで次のコードを加えてみてください。

.body{ background-image : none;}

なんと、作業は以上です！

あとは、ページ下部にある「更新」をクリックすればOK！
すぐに反映されるので、早速確認してみましょう。

ちょっと待って！！！
CSS？一体何してるの？！が知りたい方に向けて、仕組みを解説しますね。

CSS (Cascading Style Sheets) とは、サイトの見た目を装飾できる言語のことです。

言語！？
といわれると難しい感じがしますが大丈夫！
コードの成り立ちはとても簡単です★

.(サイトの装飾したい部分の){(何を):(どんな風に装飾するか);}

さきほど加えたコードの場合は、こんな意味になります。

.body(サイトのbodyといわれる部分の){ background-image(背景画像を):none(無しにする);}

イノセンスの初期設定では、サイトのbodyというところに背景画像(background-image)として「網模様の画像」が設定されていました。

具体的にはこんな感じ↓

.body{background-image:url("images/squ_ten2.png");

なので、「背景無し(none)」へ上書きすれば、網模様を非表示にすることができるわけです。

Cocoonテーマの「イノセンス」スキンは、優しい使い心地がとってもオススメです。

背景の網模様を消したい場合は、子テーマのCSSに次のコードを加えるだけ。

.body{ background-image : none;}

機能はそのままにシンプルな見た目に変えたいときは、ぜひお試しくださいね～。

ではまた！