今回は、CocoonでCSSを編集する方法を書いて行きたいと思います。
Cocoonには、スキン設定などブラウザ上から手軽にデザインを変更する機能が既にありますが、人気のあるテーマですので、少しはカスタマイズしておかないと自分と似たようなページが多数存在することになります。
少し、ここを変えたいと思った時にCSSの編集方法を知っておくと変えたい部分を自由にカスタマイズできるようになります。
今回は、CSSを編集してオリジナリティのあるブログを製作してみましょう!
CSSを編集する前に
Cocoonでは、CSSを編集しなくてもスキン設定など手軽にデザインを変更する手段が用意されています。
デザインもの凄く拘りのない方は、スキン設定、キーカラーの設定などで済む範囲ではないかチェックしてからにしましょう!
バックアップを取っておく
CSSを編集すると最悪、サイトが真っ白になってしまったりデザインが崩れてしまうこともあります。
編集する前に必ずメモ帳などにバックアップを取っておきましょう
Cocoon childを有効化
Cocoonでは、親テーマと子テーマ二つのテーマを使っていると思いますが、子テーマを有効化して使うことが推奨されています。
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編集をしたことない方は、是非試してみてください。
コメント