CocoonでCSSを編集する方法

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

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

 

CSSを編集する前に

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

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

 

Cocoonのサイトデザインを手軽に変える方法
Cocoonを使っている方も最近凄く増えてきました。 CSSやHTMLを触りたくはないけど、サイトデザインで個性を出したいという方も多いと思います。 そこで今回は、Cocoonのサイトデザインを手軽に変える方法を紹介していきたいと思いま...

 

バックアップを取っておく

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

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

 

Cocoon childを有効化

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

 

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

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

 

CSS編集方法

方法1.追加のCSS

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

 

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

 

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

 

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

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

 

方法2.style.cssの編集

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

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

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

 

方法3.FTPソフトを使ってstyle.cssの編集

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

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

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

 

編集内容が反映されない時

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

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

 

CSSの記述ミス

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

 

キャッシュ系プラグインの利用

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

 

プラグインの無効化

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

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

 

ブラウザのキャッシュ

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

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

 

追加のCSSの方が優先される

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

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

 

まとめ

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

コメント

タイトルとURLをコピーしました