Cocoonを使用していて自分好みにスタイルを装飾してみたいと思ったとき、初心者には、どこにどのように設定をすればいいのか全くわかりません。そこで、備忘を兼ねて詳しく纏めてみました。
設定を記述する場所はどこ？
CSSは、style.cssというファイルに記述されています。そのCSSファイルは、親テーマと子テーマがあります。変更するのは、子テーマです。style.cssは、テーマエディターで編集をします。
「テーマエディター」を開く
管理画面の画面左側にあるメニューから選択していきます。
「外観」⇒「テーマエディター」をクリックします。
これで、テーマエディターが開きます。
子テーマを開く
次は、テーマエディターで子テーマのstyle.cssを開きます。
選択する場所は2箇所
「編集するテーマを選択」：”Cocoon Child”を選択
「テーマファイル」：”スタイルシート（style.css）”を選択
子テーマ（Cocoon Child）のstyle.cssが開きます。
CSSを追加する
「子テーマ用のスタイルを書く」の下にCSSを記述する
「必要ならばここにコードを書く」と書かれている場所があります。ここの下に、実際のCSSを記述していきます。
これで、どこにCSSを記述するのかはわかりました。
次は、装飾するための具体的なコードについてです。
見出しを変更したい、サイドバーを装飾したいなどあると思います。まず、記述するためには、現在どのような記述になっているのかを調べる必要があります。
どこを装飾したいか調べる
例えば、サイドバーを装飾したと思ったとき、どのようにCSSを追加すればいいかわからないと思います。ブラウザGoogleChromeを例に調べ方を説明していきます。
特定の場所を見つける
サイドバーを装飾する場合を例にしていきます。
調べたい場所で「右クリック」して「検証」を選択します
画面の右側に次のようなコードが表示されます
サイドバーのコードを特定する
コードにマウスを当てるとホームページ内の該当の場所の色が変わります。
ここでは、「アーカイブ」の部分が選択されています。
コード欄「h3」の前にある「▶」は、更に階層となっていることを表していて、クリックすると開きます。
コードエリアの左下には、適用されているCSSが表示されます。
ここでは、サイドバーエリアとして「.sidebar h3」で設定されていることがわかります。
Cocoonの親スタイルで現在の設定を調べる
次に、実際にCSSでどのように現在設定されているかを調べます。
「テーマエディター」を開きます。
先ほどと同じように「外観」⇒「テーマエディター」をクリックします。
今度は以下のように選択します
「編集するテーマを選択」：”Cocoon“を選択
「テーマファイル」：”スタイルシート（style.css）”を選択
これで、親テーマのCSSが開きます。
次に、該当の設定箇所を探します。
検索窓を開きます
mac：「command＋F」
windows：「ctl＋F」
検索文字列を入力し検索します
親テーマでは、設定内容の確認のみで、変更はしない
実際に変更内容を入れるのは、子テーマです。
ここでは、あくまで、現在の設定内容を確認するのみです。
装飾するCSSを探す
CSSは、初心者では、どのように記述したらいいのかわかりません。
なので「グーグル先生」に教えてもらいましょう。
「CSS 装飾」で検索すれば、いろいろと見つかりますよ。
私の場合は、ほとんど「サルワカ」さんを参考にさせてもらってます。
コードを追加する
次のコードを実際にいれました。
（このコードは、「サルワカ」さんからではありません）
.sidebar h3{
color: #fff;
background-color: #fe4647;
padding: 16px 10px;
margin: 16px 0;
position: relative;
}
.sidebar h3:first-letter {
font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
content:"";
display: block;
height: 4px;
background: -moz-linear-gradient(to right,rgb(255,186,115),#ffb2b2);
background: -webkit-linear-gradient(to right,rgb(255,186,115),#ffb2b2);
background: linear-gradient(to right,rgb(255,186,115),#ffb2b2);
}サイドバーが以下のように装飾されました。
あゆすた
