ブログを開設して運営を進めていくと、デザインなどの見た目を変更したくなることがあります。
そんな時には、デザインを変えるCSSを追加すれば解決できます！
この記事では、CocoonでCSSを追加できる3つの方法を詳しく解説していきます。
また、後半では同じCSSを同時に指定した場合、どこに追加したCSSが優先して適用されるのかを詳しく解説しているので、ぜひ参考にしてください！
好きな場所に好きなアイコンフォントを表示させる方法は、以下の記事が参考になります。
※リンクをクリックすると、姉妹サイトの「コクーンブログ」に転送されます。
CocoonでCSSを追加する
CocoonでCSSを追加する方法（箇所）は、以下の3つあります。
テーマファイルエディタにCSSを追加する
「テーマファイルエディタ」が、CSSを追加する方法としては最も一般的な方法です。
WordPress管理メニューの「外観」→「テーマファイルエディタ―」とクリック。
「注意！」画面が出た場合、「理解しました」をクリック。
「Cocoon Child」のStylesheet（style.css）を開いていることを確認し、編集画面の一番下にCSSコードを追加して「ファイルを更新」をクリック。
Cocoonには親テーマと子テーマの2つありますが、どちらのテーマもインストールして子テーマを有効化した状態で、使いましょう。
子テーマにCSSを追加しないと、Cocoonがバージョンアップした時にCSSが消えてしまいますよ！
子テーマを使った方がいい理由については、以下の公式サイトのページを参考にしてください。
親テーマのみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。子テーマをインストールすることで、テーマカスタマイズを保持したままアップデートができます。CSSやテンプレートをカスタマイズしない場合でも、子テーマを利用することをおすすめします。
Cocoonテーマをインストールする方法
カスタマイザーにCSSを追加する
「カスタマイザー」を使ったCSSの追加方法です。
WordPress管理メニューの「外観」→「カスタマイズ」とクリック。
「追加CSS」をクリック。
CSSコードを貼り付けて、「公開」をクリック。
カスタムCSS（投稿画面）にCSSを追加する
「カスタムCSS」では、投稿または固定ページのの編集画面（投稿画面）にCSSを追加します。
特徴は、追加した投稿ページまたは固定ページのみにCSSが反映されることです。
つまり、「特定の記事だけにCSSを追加したい！」という場合に便利なんですよ！
WordPress管理メニューの「投稿」（①）をクリックし、CSSコードを追加したい投稿（②）をクリック。
※固定ページも同様です。
投稿画面の一番下に「カスタムCSS」というフィールドがあるので、ここにCSSコードを追加します。
CSSが適用される優先順位
ここまでCSSを追加する3つの方法を紹介しましたが、同じCSSコードを3つの方法（箇所）で追加したら、どれが優先して適用されると思いますか？
例えば、H2見出しの背景色に3つとも違う色のCSSを追加した場合、当然ですが適用（反映）される背景色は1つです。
つまり、3つ方法の中でもCSSが適用される順番があるってことです。
今から解説する優先順位をしっかり理解しておくと、「追加したCSSが適用されない！」なんてトラブルも解決できますよ。
以降では、H2の見出しの背景色を変更するCSSを例に、適用される優先順位を解説していきます。
↓は、CSSで変更する前のサンプルのH2見出しです。
背景色を変えるとH2見出しの文字がみづらくなるので、以降では別途文字を白くするCSSが適用されています。
テーマファイルエディタにCSSを追加
最初は、「テーマファイルエディタ」に背景が青のCSSを追加します。
| CSSの追加箇所 | 追加CSS | 追加CSSの背景色 |
|---|---|---|
| テーマファイルエディタ | background-color: blue; |  |
すると、H２の見出しの背景色が青になります。
ま、これは当たり前ですね。
カスタムCSSにCSSを追加
次に、「カスタムCSS」で背景色が緑のCSSをカスタムCSSに追加します。
| CSSの追加箇所 | 追加CSS | 見出し（H2）の色 |
|---|---|---|
| テーマファイルエディタ | background-color: blue; | |
| カスタムCSS（投稿画面） | background-color: green; |  |
すると、H２の見出しの背景色が青から緑になります。
つまり、「テーマファイルエディタ」より「カスタムCSS」の方が優先されて適用されていることがわかります。
カスタマイザーにCSSを追加
最後に、背景色が赤のCSSを「カスタマイザー」に追加します。
これで、全ての方法でCSSを追加したことになります。
| CSSの追加箇所 | 追加CSS | 見出し（H2）の色 |
|---|---|---|
| テーマファイルエディタ | background-color: blue; | |
| カスタムCSS（投稿画面） | background-color: green; | |
| カスタマイザー | background-color: red; |  |
すると、H２の見出しの背景色が赤になります。
つまり、「カスタマイザー」は他のどれよりも優先されて適用されていることになります。
CSSの優先順位をまとめると
以上のことから、各CSS追加方法で適用される優先順位は以下の通りとなります。
- 「優先順位：高」カスタマイザー
- 「優先順位：中」カスタムCSS（その記事のみ適用）
- 「優先順位：低」テーマファイルエディタ―
念のため書いておきますが、CSSを追加した順番は優先順位には一切関係ありません。
追加したCSSが適用（反映）されない！
追加したCSSが適用（反映）されないという場合は、先に書いた優先順位を確認しましょう。
新しく追加したCSSより、優先順位の高い方が適用されている可能性があります。
結局、CSSはどの追加方法がいいの？
CSSを追加する方法を3つ紹介しましたが、結局どれを使えばいいのか？ということですが。
一番いいのは「テーマファイルエディタ」です。
なぜかというと、特定記事だけにCSSを追加したい場合に「カスタムCSS」を使えば、「テーマファイルエディタ」より「カスタムCSS」の方が優先されるからです。
「テーマファイルエディタ」や「カスタムCSS」で追加したCSSを打ち消したい場合のみ、「カスタマイザー」を使えばいいでしょう。
編集画面が大きくて修正がしやすい、「テーマファイルエディタ」がおすすめですよ。
コメント