子テーマ 準備編は読みましたか？では、早速、気になるところをカスタマイズしていきましょう。ここで記載しているやり方は、私のやり方です。他にもっと効率的な方法もあると思うので、あくまでも参考ということで・・・。
ヘッダー部分、サイト名とサイト副題の間に縦線が入っており、その縦線との間隔が気にいりません。ここを、もうちょっと詰めたい。あれ？誰も気にしませんか？そうですか？（笑）
テーマカスタマイズの流れ
①ソースを表示する。
まずは、変更したい箇所のタグをstyle.cssの中から見つける必要があります。ソースを見て、該当箇所を見つけましょう。やり方は色々あると思いますが、そのうちの２つを記載しておきます。
確認する方法 その１ 「要素を検証」
chromeやfirefoxの拡張機能をいれれば、簡単に該当箇所のソースが確認できます。
私の場合は、chromeを使っていて、該当箇所の上で右クリックすると【要素を検証】がありますので、これをクリックします。
該当箇所が、青く選択されています。ソースも青く選択されています。この選択された場所は、サイト名部分だけで右側の余白部分まで含まれていません。
余白部分を含むのはどこか？ってことで、ソース側の上にカーソルを持っていくと、該当箇所がどんどん変わります。↓h1 class="alpha ・・・ の部分にカーソルを持っていくと、余白部分がオレンジ色となり、ここのソースが余白部分を指定していることがわかりました！
確認する方法 その２ 「ソースを表示」
画面上で、右クリックし【ページのソースを表示する】をクリック。IEやfirefoxでも、同じようにすれば見れると思います。
別画面で開きました！
上から順番に見て、ロゴ部分を探します。あった！
↓のheaderところに、サイト名とサイト副題がありますね！
それぞれのやり方で、サイト名、サイト副題は、id=headerの中にあるのがわかりました。では、idのheaderがstyle.cssのどこに書かれているか探します。
②親テーマのstyle.cssを開いて、該当箇所を探す！
開いてみました・・・が、コードがないーーー！通常、style.cssの中に、細かいデザイン設定がされているんですが、このテーマ、別ファイルに置いているようです。文言を見ると、オリジナルＣＳＳファイルは、data/css folder の中にあるって！
date/css のフォルダを開いてみました。げげっ！たくさん、cssファイルがあるよーー。（涙）
※私が使っているテーマは、海外の有料サイトから購入したテーマで、海外の人が作ったテーマは、こうしたように、たくさんのファイルで指定されていることが多々あります。
大変ではありますが、このCSSの中から、headerのことを書いてあるファイルを探さなくてはなりません。がしがしと開いて、headerで検索をしていって見つけました！赤線のとろこで、余白を設定しています。
③子テーマのstyle.cssに修正タグを記入！
該当箇所は、【website】の【data】フォルダの中の【CSS】フォルダの中の、【structure.css】の中に記載がありました。しかし、子テーマでは、このフォルダ階層まで真似る必要はありません。該当の変更したい箇所のタグを、子テーマのstyle.cssに記載です！
子テーマを有効化しているので、管理画面 ⇒ 外観 ⇒ テーマ編集 から編集できます。
サイト名は、margin-rightで設定されており、サイト副題は、padding-leftで設定されてました。サイト名は、画像に置き換わる場合もあるので、marginとなっているようですね。見た目には同じ余白なのに、タグは違っていましたから、手間であっても、元のタグを確認しないとね！
④子テーマのstyle.cssを上書きして、修正が反映されたかチェック！
子テーマのstyle.cssに、カスタマイズ分を記載したら【ファイルを更新】をクリックして、上書き保存！さぁ変わったかな？元は、↓こんな感じです。
これが、↓のように空白が詰まりました！
やった！できたできた！他人にとっては、ほんとうにどうでも良い部分のカスタマイズができました！（笑）こんな感じで、どんどん気になる部分をカスタマイズしていきましょー！
