CocoonでCSSを編集する方法

今回は、CocoonでCSSを編集する方法を書いて行きたいと思います。
Cocoonには、スキン設定などブラウザ上から手軽にデザインを変更する機能が既にありますが、人気のあるテーマですので、少しはカスタマイズしておかないと自分と似たようなページが多数存在することになります。

少し、ここを変えたいと思った時にCSSの編集方法を知っておくと変えたい部分を自由にカスタマイズできるようになります。
今回は、CSSを編集してオリジナリティのあるブログを製作してみましょう！

CSSを編集する前に

Cocoonでは、CSSを編集しなくてもスキン設定など手軽にデザインを変更する手段が用意されています。

デザインもの凄く拘りのない方は、スキン設定、キーカラーの設定などで済む範囲ではないかチェックしてからにしましょう！

CSSを編集すると最悪、サイトが真っ白になってしまったりデザインが崩れてしまうこともあります。

編集する前に必ずメモ帳などにバックアップを取っておきましょう

Cocoonでは、親テーマと子テーマ二つのテーマを使っていると思いますが、子テーマを有効化して使うことが推奨されています。

親テーマを有効化していると親テーマをアップデートした際に、編集した内容が消えてしまいます。

「追加のCSS」は親テーマのアップデートの影響を受けませんが、２つ目と３つ目の編集方法である「style.cssの編集」では、子テーマの方をいじりますので編集の際には、子テーマを有効化しておきましょう

まず一つ目の編集方法が追加のCSSに追加する方法です。
大幅に編集を加えない場合は、追加のCSSの方が使いやすいかなと思いました。

ダッシュボードへ入り、「カスタマイズ」をクリックします。

次に、「追加のCSS」をクリックします。

追加のCSSが表示されたらCSSを追加してみます。今回はラベルの色を赤くしてみました。
元々は白のラベルだったのが赤くなっているのが分かると思います。

右側で編集するとその結果が、プレビューとして左側の画面に表示されます。

次に子テーマのstyle.cssを編集したいと思います。

１、「テーマのファイルエディター」をクリック
２、編集するテーマを選択で、「Cocoon Child」を選択
３、「stlye.css」をクリック

後は、/*必要ならばここにコードを書く*/よりも更に下の何も書いていない部分にコードを追加していくだけです。

方法３では、FTPソフトを使ってstyle.cssを編集する方法です。

Cocoonの「style.css」は、
wp-content→themes→cocoon-child-masterの中にあります。

編集方法は、テーマのエディターと同じです。

僕も、たまにやるんですが「あれ？思った通りにならない」と思い試行錯誤していたら原因はCSSではなかったということもあります。

焦らずに以下のような内容を確認してみましょう

CSSに記述ミスがあると思ったような結果が出ません
記述ミスがないかどうか確認しましょう

キャッシュ系のプラグインを入れている場合、CSSの編集結果がすぐに反映されないことがあります。
キャッシュ系プラグインを入れている方は、プラグインを停止するかキャッシュをオフにしてからぺ時をリロードしょう

「Autoptimize」という高速化プラグインは、Cocoonと相性が悪いため非推奨となっています。

「Autoptimize」を使っているとそもそも追加のCSSがソースコード上から消えてしまう場合があるようです。

編集内容が反映されない時は、ブラウザのキャッシュが効いているかもしれません。
ブラウザのキャッシュを削除するか「シークレットモード」「プライベートモード」でアクセスしてみましょう。

Cocoonの場合、編集する際は、事前に「高速化」にある「ブラウザキャッシュの有効化」をオフにすると解決するかもしれません。

追加のCSSに以前編集した内容を保存しているまま、style.cssを編集した場合、追加のCSSの方が後に読み込まれますのでそちらが反映されてしまいます。

セレクタ名が被っている場合などは、追加のCSSの内容を削除しましょう

今回は、CocoonでCSSを編集する方法について記事を書きました。
CSS編集をしたことない方は、是非試してみてください。