子テーマでのカスタマイズ 実践編

投稿日:2013/07/28 更新日: -ワードプレス -

子テーマ 準備編は読みましたか?では、早速、気になるところをカスタマイズしていきましょう。ここで記載しているやり方は、私のやり方です。他にもっと効率的な方法もあると思うので、あくまでも参考ということで・・・。

ヘッダー部分、サイト名とサイト副題の間に縦線が入っており、その縦線との間隔が気にいりません。ここを、もうちょっと詰めたい。あれ?誰も気にしませんか?そうですか?(笑)

20130728_5

スポンサーリンク
スポンサーリンク

テーマカスタマイズの流れ

  1. ソースを確認する。
  2. 親テーマのstyle.cssを開いて、該当箇所を探す!
  3. 子テーマのstyle.cssに修正タグを記入!
  4. 子テーマのstyle.cssを上書きして、修正が反映されたかチェック!

①ソースを表示する。

まずは、変更したい箇所のタグをstyle.cssの中から見つける必要があります。ソースを見て、該当箇所を見つけましょう。やり方は色々あると思いますが、そのうちの2つを記載しておきます。

確認する方法 その1 「要素を検証」

chromeやfirefoxの拡張機能をいれれば、簡単に該当箇所のソースが確認できます。
私の場合は、chromeを使っていて、該当箇所の上で右クリックすると【要素を検証】がありますので、これをクリックします。
20130728_17-min

該当箇所が、青く選択されています。ソースも青く選択されています。この選択された場所は、サイト名部分だけで右側の余白部分まで含まれていません。
20130728_16-min

余白部分を含むのはどこか?ってことで、ソース側の上にカーソルを持っていくと、該当箇所がどんどん変わります。↓h1 class="alpha ・・・ の部分にカーソルを持っていくと、余白部分がオレンジ色となり、ここのソースが余白部分を指定していることがわかりました!
20130728_18-min

確認する方法 その2 「ソースを表示」

画面上で、右クリックし【ページのソースを表示する】をクリック。IEやfirefoxでも、同じようにすれば見れると思います。
20130728_6-min

別画面で開きました!
20130728_7

上から順番に見て、ロゴ部分を探します。あった!
↓のheaderところに、サイト名とサイト副題がありますね!
20130728_8-min

それぞれのやり方で、サイト名、サイト副題は、id=headerの中にあるのがわかりました。では、idのheaderがstyle.cssのどこに書かれているか探します。

②親テーマのstyle.cssを開いて、該当箇所を探す!

開いてみました・・・が、コードがないーーー!通常、style.cssの中に、細かいデザイン設定がされているんですが、このテーマ、別ファイルに置いているようです。文言を見ると、オリジナルCSSファイルは、data/css folder の中にあるって!
20130728_9-min

date/css のフォルダを開いてみました。げげっ!たくさん、cssファイルがあるよーー。(涙)
※私が使っているテーマは、海外の有料サイトから購入したテーマで、海外の人が作ったテーマは、こうしたように、たくさんのファイルで指定されていることが多々あります。
20130728_10

大変ではありますが、このCSSの中から、headerのことを書いてあるファイルを探さなくてはなりません。がしがしと開いて、headerで検索をしていって見つけました!赤線のとろこで、余白を設定しています。
20130728_11-min

③子テーマのstyle.cssに修正タグを記入!

該当箇所は、【website】の【data】フォルダの中の【CSS】フォルダの中の、【structure.css】の中に記載がありました。しかし、子テーマでは、このフォルダ階層まで真似る必要はありません。該当の変更したい箇所のタグを、子テーマのstyle.cssに記載です!

子テーマを有効化しているので、管理画面 ⇒ 外観 ⇒ テーマ編集 から編集できます。
20130728_19-min

サイト名は、margin-rightで設定されており、サイト副題は、padding-leftで設定されてました。サイト名は、画像に置き換わる場合もあるので、marginとなっているようですね。見た目には同じ余白なのに、タグは違っていましたから、手間であっても、元のタグを確認しないとね!

④子テーマのstyle.cssを上書きして、修正が反映されたかチェック!

子テーマのstyle.cssに、カスタマイズ分を記載したら【ファイルを更新】をクリックして、上書き保存!さぁ変わったかな?元は、↓こんな感じです。
20130728_5

これが、↓のように空白が詰まりました!
20130728_20

やった!できたできた!他人にとっては、ほんとうにどうでも良い部分のカスタマイズができました!(笑)こんな感じで、どんどん気になる部分をカスタマイズしていきましょー!

Copyright© ちょこヘル! , 2017 AllRights Reserved Powered by AFFINGER4.