ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
CocoonでCSSカスタマイズの編集場所はどこなのか、またCSSの記述方法についてもまとめました。
CSSとは？
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、WEBページのデザインを整えるためのスタイルシート言語です。
マークアップ言語のHTMLと一緒に使われることが多いです。
ワードプレスのデザインカスタマイズでは、HTMLはあんまり使わないよ！
CSSの記述方法
CSSの記述方法にはルールがあります。
セレクタ{
プロパティ:値;
}最初にセレクタを指定し、中かっこでプロパティと値をかこみます。コロンとセミコロンも重要なので、忘れないように入力してください。
セレクタ？プロパティ？値？
この後詳しく説明するよ！
セレクタ（タグ・ID・Class）とは？
セレクタ{
プロパティ:値;
}「セレクタ」には、３種類のセレクタを指定できます。
- タグ
- 特定のHTMLタグにスタイルを適用します。
- ID名
- ページ内で唯一の要素にスタイルを適用します。
- ID名の前に「#」をつけて定義します。
- 同じID名を複数の要素に付けることはできません。
- クラスセレクタよりも優先順位が高いです。
- クラス名
- 複数の要素に共通のスタイルを適用します。
- クラス名の前に「.」をつけて定義します。
- 複数の要素に使用できます。
プロパティ・値とは？
セレクタ{
プロパティ:値;
}セレクタにどういう変化を与えるかを「プロパティ」「値」で指定します。
- プロパティ
- スタイルの種類を指定します。
- 値
- スタイルの具体的な設定を指定します。
以下のCSSでは、「h2見出しのフォントの色を#333333（カラーコード）の色に変更します」という意味になります。
h2{
color:#333333;
}コードが増えるとよくわからなくなってくるから、プロパティの前に半角スペースを入れるのがおすすめだよ！
CocoonでCSSを追加する場所
CocoonでCSSを追加する場所は３つあります。
追加場所１：カスタマイズの追加CSSに記述する → ブログ全体に適用
追加場所１つめは、カスタマイズの追加CSSに記述する方法です。ブログ全体に適用されます。
CSSを追加するおすすめの場所で、ブログ全体に適用したい場合は特別な理由がなければここに記述すれば間違いありません。
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
【外観】→【カスタマイズ】→【追加CSS】にCSSを追加します。
追加場所２：テーマファイルエディターに記述する → ブログ全体に適用
追加場所２つめは、テーマファイルエディターに記述する方法です。ブログ全体に適用されます。
テーマファイルエディターは誤った記述などを行うとエラーでワードプレスが動かなくなったりするので気をつけてください。
【外観】→【テーマファイルエディター】を選択します。
右上にある【編集するテーマを選択】を「Cocoon Child」にして、【テーマファイル】の「style.css」を開きます。
【必要ならばここにコードを書く】の下の行（写真なら17行目）にCSSを追加します。
【レスポンシブデザイン用のメディアクエリ】には、タブレットやスマホで見る画面でのみ適用するCSSコードを追加できます。
追加場所３：記事の下部カスタムCSSに記述する → その記事にのみ適用
追加場所３つめは、記事の【下部カスタムCSS】に記述する方法です。この記述は、その記事にのみ適用されます。
ヒビラボでは、フロントページ（トップページ）記事のみ【下部カスタムCSS】にCSSを追加してデザインを整えています。
CSSを追加したい記事を開く（固定ページもOK）
下部にある【カスタムCSS】にCSSを追加する。
CSSが作動しないとき
CSSが作動しないときは、以下のような原因と解決策があります。
- スペル・記述方法が間違っている
- 別のセレクタ、プロパティ、値で試してみて原因を探る
- 半角スペースではなく全角スペースを使っている
- 半角スペースに変更する
- 中かっこ、コロン、セミコロンが抜けている
- 正しいルールで記述する
- 横並びにしたいのにできないなど位置関係が上手くいかない
まとめ
慣れてくると、CSSで自由にカスタマイズできるようになります。
最初はコピペで学んで、どんどん自分の技術にしていきましょう！
ヒビラボでは、CocoonのCSSカスタマイズ方法を公開していますので、ぜひ見てみてください。
