【ミッキー様】HTML構造の確認の仕方 テーマのCSSカスタマイズ方法

WordPressテーマ Twenty Twelveのカスタマイズ方法、余白の調整方法などについてご相談頂きました。

組み方について

先日はありがとうございました。もう一つ、組み方でどうしてもうまくいかず、恐れ入りますがご質問させてくださいませ。
WordPress テーマTwenty Twelve 記事のテンプレートをカスタマイズする方法

添付の画像の左が今の様子で、それを右のように仕上げたいのです。他のブログシステムの記述はもっとわかりやすかったりで出来ていたのですが、wordpressテーマtwentytwelveの組み方がどうなってるのかよくわからず、style.cssをいじってもどうしてもうまくいきません。

デフォルトの色や画像だけいじって、なんとか現在、左の状態まで持っていったのですが、ここから目指してるのが、

ヘッダー上部にあたる余計な部分をとりたい。
ヘッダー幅（現在950px）でコンテンツ幅（ボディ幅？）は下部まで揃えて、そのコンテンツ外の左右は別の背景画像（このサンプル絵では黒部分）に。

それから、各エントリータイトル部分とエントリー本文に少し隙間（茶色部分）を入れる。また、エントリータイトルのbackgroundは白のみにしたい（今はタイトル背景 白部分のフチにこの絵のように色がついてしまってますが、そのフチはなくしてエントリータイトル背景は白のみにしたい）。

各エントリー記事にもそれぞれ隙間を入れて、背景色（茶色部分）が出るようにしたい。

それとこれは書いてもわかりにくいかもしれませんが、各エントリー記事部分の最下部（カテゴリーや日付が表示されてる部分より下の部分）のエントリー背景になる黄色部分が下に伸びすぎていて、伸びすぎてるのを短くして切り上げる（切りあがった部分はこの画像の茶色の背景になる）

こんな風に組みたいのですが、cssをいじっても背景とボディがどんな風に区切られてるのかよくわからず、ヘッダー画像外上部の茶色にあたる部分を取ろうとしても出来ず、ヘッダーと同じ横幅950pxでのコンテンツ（ボディ？）左右の枠外にあたる部分だけを黒くしようとしても茶色のままにしておきたいコンテンツ部分まで黒くなったりでどうしてもうまくいきません。
すみません。どうかご教授いただければと思います。

余白の調整について

多くのご要望は余白の調整のようですね。

まず、レイアウトやデザインについては希望に近いものを探すという選択の方が労力は少ないです。ここにリソースを割くよりも、希望に近いテーマを探してはやくブログを書いた方がメリットが大きいでしょう。（アフィリエイトなら尚更です！）

twentytwelveなどのデフォルトテーマはそれほど機能が充実しているわけではありませんので、敢えてこのテーマをカスタマイズしていくよりも他に目的に合うテーマがあるのではないか･･･と老婆心ながら思ってしまいます。

※こだわったサイトには愛着も出ますので、否定するつもりはありませんし、今やっていることが悪いとは全く思いませんよ！

開発者ツールでHTMLの仕組みを確認しよう

CSSはテーマの組み方がどうなっているのかを理解してからの方がスムーズです。

現状のHTMLソース・レイアウトがどのようになっていて、どの部分にどれくらいCSSで余白が設けられているのか。

これには是非ブラウザの開発者ツールを使ってください。Google Chromeの場合はF12や右クリック＞検証 で開発者ツールを出す事ができます。

調べたい場所で右クリック＞検証

（カテゴリーアーカイブで記事タイトルを調べる場合）

又は、開発者ツールの矢印アイコンをクリックし、任意の要素をクリックでも同じです。

余白の確認

開発者ツールで要素を見てみます。

<section id="primary" class="site-content">
  <div id="content" role="main">
    <header class="archive-header">
    <h1 class="archive-title">Category Archives:</h1>
    </header><!-- .archive-header -->
    <article id="" class="">
    記事タイトルや抜粋部分
    </article>

sectionタグ ＝ 左コンテンツ
articleタグ ＝ 各記事
Twenty Twelveではarticleタグの中に各記事のデータが入るようになっています。

そして、articleの要素にはそれぞれに余白が設定されているというわけですね。

.site-content article {
    border-bottom: 4px double #ededed;
    margin-bottom: 72px;
    padding-bottom: 24px;
}

remという単位についてはややこしいので説明を省かせて頂きますが、この数字を変更・または別にCSSで上書きすることで調整することができます。
開発者ツールではCSSの部分をクリックして数値を書き込み、リアルタイムで見ることができます。
※追記した内容は別途CSSに追記する

構造を理解すればこのような形にすることは難しくありません。正し、あくまでPC画面のみです。
レスポンシブサイトの場合はメディアクエリによって画面サイズが変更されると適用されるCSSが変わったりするので注意しましょう。

参考にして頂ければ幸いです。