スタイルシート（子テーマ）への記述内容

全てに共通する記述

html {
 overflow: auto;
}
body {
 overflow: hidden;
}
@media screen and (min-width: 600px) {
 .site {
  overflow: visible;
 }
}

横幅を広げたい部分に関する記述

#example {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveの基本となるパーツのセレクタはこちら

注）グローバルメニューのセレクタについて

グローバルメニューのデザインを指定しているセレクタは、上記の id や class 以外にもいくつもあります。メニューをどのようにカスタマイズしているかで、指定すべきセレクタが変わってくるようです。
特に Twenty Twelve のグローバルナビメニューは、上下に 1px のボーダーが引かれていますが、実は上記の 2 つのセレクタでは、このボーダーまで横に伸ばすことができません。
ボーダーも横に伸ばしたい場合は、以下のセレクタを、左右のマージン、パディングともに引き延ばす必要があります。

デフォルト状態のグローバルナビメニュー

デフォルト状態のグローバルナビは、作成した固定ページへのリンクが順番に表示されるようになっています。1460 行目からの記述にマージンやパディングを追記すると、ボーダーも含めて横幅を広げることが可能です。

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .main-navigation ul.nav-menu,
 .main-navigation div.nav-menu > ul {
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  display: inline-block !important;
  text-align: left;
  width: 100%;
  margin-right: -500%;
  margin-left: -500%;
  padding-right: 500%;
  padding-left: 500%;
 }
}

カスタムメニューで変更した場合のグローバルナビメニュー

カスタムメニューで独自のメニューを作成し、グローバルナビに適用させた場合は、上記のセレクタ以外にも以下のセレクタが使えます。

#menu-global-nav {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveでの注意点とは？

Twenty Eleven の記事でもお伝えしたように、基本的な考え方は変わりません。なので、別に Twenty Eleven でなくても Twenty Twelve でなくても使えるテクニックです。
ただ、Twenty Twelve の場合はデフォルトの CSS で影響で、うまくいかず、ちょっとした工夫が必要になります。
以下は上記設定の考え方になりますので、興味のある方はどうぞ・・・。

グローバルナビゲーションメニューだけ広がらない

Twenty Eleven の場合と同じようにスタイルシートを記述した場合、グローバルメニューの部分がブラウザいっぱいに広がってくれません。以下のようにある範囲までしか広がらないのです。

その範囲はというと、どうやら【 .site 】というセレクタで指定されている部分のようです。

なぜ、グロナビはサイトの範囲内までしか横に広がってくれないのか？

その原因はスタイルシートに記述されている【 overflow 】の値にありました。デフォルトでは以下のように記述されています。

/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .site {
  margin: 0 auto;
  max-width: 960px;
  max-width: 68.571428571rem;
  overflow: hidden;
 }

この【 overflow 】ははみ出た部分をどうするか、ということを指定しています。デフォルトの指定は【 hidden 】なので、はみ出た部分は非表示になります。つまりこれが原因で横に広がった部分が表示されず、サイトの範囲内に収まったように見えていたわけです。
この部分を表示させるには、【 overflow 】の値を【 hidden 】から【 visible 】へ変更する必要があります。これで、グローバルナビゲーションメニューも左右横にちゃんと広がってくれます。

連絡先公開にはリスクもある

しかし、連絡先情報を公開したいけど、色々不安な点もあると思います。例えばメールアドレスをそのまま記載すると、メールアドレス回収ロボットに拾われてしまう可能性があります。するとスパムメールや営業メールが届きやすくなってしまいます（なのでロボットに拾われないようにアドレスの@を、★などの記号で表示させている人も多いですよね）。
また、電話番号や住所だって回収されないとも限りません。ビジネスをするからには連絡先の公開は当然ですが、それをそのまま公開すると検索対象にもなりますし、小さな個人商店やフリーで活動している方、または副業でビジネスをしている方など、公開をためらう人もいると思います。

連絡先情報を検索されないようにする方法

そこで、電話番号や住所などを文字（テキスト情報）としてではなく、画像として公開することで、検索対象やロボットの回収対象から逃れようという方法があります。画像なので、ファイル名から連絡先だと分かってしまったり、alt などでテキスト情報と関連づけていない限り、今のところ Google 先生にも発見されませんし、人の目でしか確認できないということになります。

Twenty Elevenのヘッダーに画像を用いる時の注意点

ただ、Twenty Eleven のヘッダー部分に、ヘッダー画像以外の画像を挿入すると、ちょっと困ったことになるかと思います。
ポイントは “ヘッダー画像以外の画像” という部分。普通はヘッダーに 2 つ以上の画像を挿入することなんてないかもしれません。しかし今回のようにお問い合わせ情報を画像で表示させる場合、その画像にはお問い合わせページへのリンクなど、本来ヘッダー画像がリンクしているトップページとは違うリンクを貼らなければなりません。

その際に困った事にならないように CSS を整える必要があります。この記事は主にその話題です。

とりあえずヘッダー部分に画像を埋め込んでみる

ヘッダー部分に画像を表示させようとするとどうなるのか？
ここでは、いわゆるデフォルトで設定できる画像とは別に、ヘッダー部分に直接イメージタグを書き込んだ場合、という意味です。例えば以下のように【 header.php 】を開いて、タイトル部分の下にでもイメージタグを書き込んでみましょう。

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
/* ▼ hgroupの下にイメージタグを挿入 */
<img alt="" src="（イメージのURL）" />

イメージは 240×180 の大きさで、こちらの画像を用意しました。

すると・・・

使用している画像は、240×180 の大きさです。にも関わらず、サイトの横幅（1000px）に合わせてかなり拡大されています。
なぜ、こんなことになってしまうのでしょうか？

ヘッダー画像は CSS でどのように指定されているのか？

ヘッダー部分に挿入した画像は、みな一様に横幅 1000px に矯正されてしまうみたいですが、これはどこで指定されているのでしょうか？　親テーマの CSS を見てみると、545 行目辺りに【 #branding img 】という項目があります。

#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}

これは、【 #branding 】という id で指定されている範囲にある img タグに該当するもの全てに適用されます。img ってことはイメージファイル全てってことですね。そのため、100% とか、マージンの値とか、デフォルトのヘッダー画像だけでなく、自分でタグ打ちして挿入した画像にも適用されてしまい、サイトの横幅 1000px（100%）に合わせて画像が拡大表示されてしまっているわけです。
まぁヘッダーは画像を 1 枚しか使わない場合がほとんどだと思いますので、あまり問題に感じた事のある方も少ないかもしれません。しかし、これはロゴだろうがなんだろうが、ヘッダー内で画像（img タグ）を使う際は影響を受けてしまう記述なので、気をつけておかないといけません。

ヘッダーに挿入した２枚目の画像のレイアウトを整える

さて、原因は分かりましたが、問題はどう解決するかです。いくつか方法はあると思いますが、今回は【 #branding img 】の記述はいじらずに、新たに追加した画像（連絡先情報用の画像）だけに別途スタイルを指定する方法で行きたいと思います。

(1) イメージタグを<div>で囲む

まずはイメージタグに id を指定しましょう。【 header.php 】に追記したイメージタグを、以下のように<div>で囲ってしまえば OK ですね。あと、別にお問い合わせフォームのページを用意している場合は、リンクタグを埋め込んでおきましょう。

<header id="branding" role="banner">
		<hgroup>
			<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
			<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
/* ▼ divで囲ってidを指定する */
	<div id="contact"><a href="（お問い合わせフォームページのURLなど）"><img alt="" src="（イメージのURL）" /></a></div>

(2) 追記したidのレイアウトを CSS で調整する

指定した id をスタイルシート側で調整していきましょう。右上に表示させたいので、回り込み（float）を使ったり、大きさの指定をしたり、余白の調節をしたりします。

#contact {
	float: right; /* 回り込み指定 */
	width: 24%; /* イメージのサイズに合わせて */
	margin-right: 7.6%; /* お好みで余白を指定 */
	padding-top: 3.65625em; /* お好みで余白を指定 */
}

横幅はピクセル値に合わせてパーセンテージで指定した方がいいと思います。パーセンテージで指定しておくと、ブラウザの大きさやサイトを拡大・縮小に合わせてバランスを保ってくれます。
Twenty Eleven の場合は 100% ＝ 1000px なので、横幅 240px の画像を用意した場合は 24% にしておけば OK です。

(3) タイトル部分の余白を調整する

画像を右へ回り込ませても、タイトル部分がそのままなので、回り込みを指定する必要があります。タイトル部分にも横幅やマージンが指定されているため、画像がうまく回り込んでくれない可能性があります。Firefox のプラグイン、Firebug などで確認しながら適切な余白を指定してください。

#branding hgroup {
	float: left; /* 回り込み指定 */
	width: 60%;
	margin-right: 0px;
}
/* ▼ サイトタイトルや説明書きの余白も無くしました */
#site-title {
	margin-right: 0px;
}
#site-description {
	margin-right: 0px;
}

まとめ

これで右上に連絡先情報を画像で表示させることができました。もし、あなたがTwenty Elevenを使っているならコピペですぐにできるように、以下に使用タグをまとめておきます。ぜひ役立ててください。

header.php の変更内容

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
/* ▼ hgroupの下にイメージタグやリンクタグを挿入 */
<div id="contact">/* idの指定も忘れずに（名称は任意で） */<a href="（お問い合わせフォームページのURLなど）"><img alt="" src="（イメージのURL）" /></a></div>

style.css の変更内容

#contact {
	float: right; /* 回り込み指定 */
	width: 24%; /* イメージのサイズに合わせて */
	margin-right: 7.6%; /* お好みで余白を指定 */
	padding-top: 3.65625em; /* お好みで余白を指定 */
}
#branding hgroup {
	float: left; /* 回り込み指定 */
	width: 60%; /* サイトタイトルなどの長さに合わせて調節 */
	margin-right: 0px; /* お好みで余白を指定 */
}
/* ▼ 画像を回り込ませる余裕を確保できるように調節 */
#site-title {
	margin-right: 0px; /* お好みで余白を指定 */
}
#site-description {
	margin-right: 0px; /* お好みで余白を指定 */
}

ヘッダースペースにタイトルとは別の内容を表示させなければならない

たぶん、カスタマイズする上で一番ひっかるんじゃないだろうかという点が、これです。
タイトルが左側、連絡先などの情報やリンクは右側に表示させ、かつタイトルをクリックしたらトップページへ、連絡先情報からはお問い合わせフォームへリンクさせたいわけです。
一枚のヘッダー画像にタイトルとお問い合わせ情報を盛り込んでもいいのですが、これだとリンク先を分けることができません（ヘッダー画像をクリックすると基本的にはトップページへ移動します）。リンクは貼らずに、電話番号を表示させるだけなら構わないのですが、今回はタイトルリンクと連絡先情報のリンクを分ける事を目的に話を進めて行きたいと思います。
そういうわけで、今回目指す理想の形はこんな感じです！

サイトの右上（タイトル右横）にテキストとして連絡先を表示させる方法

まずは基本的な感じで、右上に連絡先情報をテキスト表示させてみたいと思います。ちなみに取り扱っているテンプレートは Twenty Eleven ですが、基本的な考え方は一緒なので、ほぼ全てのテンプレートでも同じようにできるかと思います。

まず該当するテンプレートファイルは【 header.php 】ですね。PHP とは言っても、ホームページの基本は HTML で書かれているので、普通に HTML の感覚で文字やタグを打ち込んでいきましょう。場所はタイトルスペースに関して指定している【 hgroup 】の後がいいですね（Twenty Eleven の 76 行目辺りです）。

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
	0120-222-3333 <!-- ここに電話番号を入力しただけ -->

とりあえず電話番号を打ち込んでみました。特に class や id も指定していない生な感じです。するとこんな感じでタイトルとヘッダー画像の間に電話番号が表示されます。

そう、住所だろうが電話番号だろうが、ただ書き込めばいいだけなんですね。簡単すぎます。でもこれじゃあ目的とする表示方法じゃないしかっこ悪いので、CSS なんかでレイアウトを指定していきます。と、その前に右上の検索窓が邪魔なので消しちゃいましょう。

WordPressテーマTwenty Elevenのヘッダーレイアウトの変更方法

下準備：header.phpへの指定

連絡先は連絡先だと分かるように、Google さんに教えてあげましょう！
<address> というタグがあります。「連絡先や問い合わせ先を示す場合に使用する」となっています。というわけで、まずはこのタグで連絡先を囲ってあげます。そしてカスタマイズしやすいように電話番号に class を指定しましょう。

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
<!-- ▼ 連絡先情報をaddressタグで囲って、各情報にも class や id を指定 ▼ -->
	<address>
		<div class="tel">0120-222-3333</div>
		<div class="hours">営業時間 9:00〜18:00</div>
	</address>

以上で【 header.php 】側の変更は終わりです。必要があれば適宜電話番号以外の情報も盛り込んでいってください。その際連絡先に関しては <address> 〜 </address> のタグの中に書き込むようにしてください（営業時間は別枠がいいかも・・・）。

連絡先情報を右上に持って行くためのCSSの指定方法

さて、続いて CSS 側の設定です。子テーマの【 style.css 】を開いてください。理屈的なことを言うと、【 hgroup 】と【 address 】の部分を回り込ませればいいということになります。
まずは【 #branding hgroup 】です。親テーマの style.css では 79 行目にあります。ここのタイトル部分は左側に表示させたいので、【 float: left; 】で回り込ませます。さらに横幅は 100％ になっているので、右側に連絡先を表示させるスペースを確保するために横幅を狭めておきましょう。以下の例では 68% まで縮めましたが、右側に連絡先が入るスペースができればいくらでも構いません。
また、マージンも左右に 7.6% ずつスペースを取っているので、ここを変えてもいいと思います。具体的には、【 margin: 0 1% 0 7.6%;】のようにして、左マージンは今までの値、右マージンは小さな値にするといいでしょう。

#branding hgroup {
	margin: 0 7.6%;
	float: left;
	width: 68%;
}

そして【 address 】側の指定ですが、ここは【 #branding address 】とすることで指定できます。以下のように追記しておきましょう。

#branding hgroup {
	margin: 0 7.6%;
	float: left;
	width: 68%;
}
#branding address {
	float: right;
	width: 16.8%;
	padding-top: 3.65625em; /* タイトルのpaddingと同じ値にしました */
}

するとこんな感じで連絡先を右上に表示させることができます。

まぁこのままだと不格好なので、CSS で色々指定して体裁を整えてください。

うまくいかない場合は余白（マージン）に注意！

もしかしたら、フロートで回り込みを指定しても、タイトルと同じ列の右横に移動せずに、タイトルの下の列でただ右に移動しただけのように見えることがあるかもしれません。

ただ、これは hgroup や address の横幅が広すぎて、回り込むスペースが確保されていないことが原因だと思われます。ですので、上記では【 width 】を指定していますが、横幅が合計で 100% を超えるような値にしてはいけないわけです。
例えば Twenty Eleven の場合、デフォルトでは 100% ＝ 1000px なので、【 hgroup 】が 680px、その余白が左右に 76px ずつで合計 832px あることになります。ですので、【 address 】は残りの168pxよりも小さくなければいけません。これより大きいと 1000px（＝100%）を超えてしまって回り込む隙間がありませんので・・・。
なので、【 address 】 の横幅は 16.8% にしたわけです。
その他、【 #site-title 】（サイトタイトル）や【 #site-description 】（サイトタイトル下の説明文）でもマージンやパディングといった余白が指定されていますので、それらも含めて間隔を調節しましょう。
参考までに以下の図を確認してください。

赤はマージン（margin）、青はパディング（padding）、緑は横幅（width）を表していて、ほとんどが Twenty Eleven のスタイルシート上でデフォルトとして指定されています。
記載場所もばらばらなので、各々変更したい場合は上の図を参考に id などで検索してみてください。

回り込んだら元に戻す

あと、忘れては行けないのが回り込みの解除ですね。恐らくヘッダータイトルの後にはヘッダー画像が来ている人が多いかと思いますので、【 #branding img 】（親テーマでは 545 行目）の部分に【 clear: both; 】を指定しておきましょう。とは言ったものの、指定しなくてもレイアウトは崩れなさそうなので、無くてもいいのかもしれません。けど念のため・・・。
ついでに言うと、Twenty Eleven は hgroup、address ともに、既に【 display: block; 】というようにブロック要素が指定されています。ですので、フロートが使えるんでしょうね〜・・・。

サイトの右上（タイトル右横）からお問い合わせフォームへリンクさせる方法

今度はリンクを指定したいと思います。方法は前述と同じで、テキストの部分にリンクタグを指定すればいいだけです。

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
	<address>
		<div class="tel">0120-222-3333</div>
		<div class="hours">営業時間 9:00〜18:00</div>
		<div class="contact"><a title="お問い合わせ" href="フォームページのURL">フォームでのお問い合わせ</a></div>
	</address>

さらに header.php や CSS の方などを色々カスタマイズすると、こんな感じで表示できます。

お問い合わせリンクをボタン風にしたり
連絡先情報の文字を CSS でカスタマイズする

上の図のような表示を最終目標として、必要なソースタグなんかをご紹介します。

header.php の変更内容

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
	<address>
		<div class="address">〒000-0000 ●●市1-1-1</div>
		<div class="tel">0120-222-3333</div>
		<div class="hours">営業時間 : 9:00〜18:00(平日)</div>
		<div class="contact"><a title="お問い合わせ" href="フォームページのURL">フォームでのお問い合わせ</a></div>
	</address>

style.css の変更内容

/* branding内の指定 */
#branding hgroup {
	margin: 0 7.6%;
	width: 48%; /* 横幅を48%まで狭めました */
	float: left;
}
#branding address {
	float: right;
	width: 26.8%; /* 横幅を26.8%まで広げました */
	margin-right: 7.6%; /* バランスを整えるために右マージンを追記 */
	padding-top: 3.65625em;
}
/* サイトタイトルと補足説明のマージンを変更 */
#site-title {
	margin-right: 70px; /* デフォルトは270pxでしたが、70pxに */
	padding: 3.65625em 0 0;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 70px 3.65625em 0; /* 右マージンのデフォルトは270pxでしたが、70pxに */
}
/* 以下を追記（クラス名はheader.phpと合わせてお好みで変更してください） */
.address {
	font-size: small;
}
.tel {
	font-size: xx-large;
	text-shadow: 1px 0px 2px #666666;
}
.hours {
	font-size: small;
}
.contact {
	margin-top: .5em;
	text-align: center;
}
.contact a {
	display: block;
/* ボタンジェネレーターで作成したソースコード */
	color: #ffffff;
	font-size: large;
	padding: 10px;
	text-decoration: none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-box-shadow: 0px 1px 2px #666666;
	-moz-box-shadow: 0px 1px 2px #666666;
	text-shadow: 1px 1px 3px #666666;
	border: solid #cacbcc 1px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#003366));
	background: -moz-linear-gradient(top, #42aaff, #003366);
}
.contact a:hover {
	background: #42aaff;
/* ボタンジェネレーターで作成したソースコードここまで */
}

お問い合わせフォームへのリンク部分は、ボタンのデザインが簡単にできるブラウザ上の CSS ジェネレーターを使って作成しました。ジェネレーターでつくったタグをコピペしただけです。
そのサイトはこちらです。
＞ {CSS}Portalのボタンジェネレーター
ぼくなんかの CSS 素人にはかなり重宝させて頂いているサイトです。こった CSS のデザインが難しいとか、作業時間を短縮したいという方はぜひご活用を。

お問い合わせリンクに画像を使いたい場合

住所や電話番号をテキストとして掲載しておくと検索対象になってしまうので、不安に思っていらっしゃる方も多いかと思います。なので、電話番号などを公開したいけど、画像表示で公開したいという方も多いはずです。
そんな場合は電話番号や住所などの乗った画像を用意してアップロードすればいいのですが、ヘッダーに画像を表示させる場合は CSS 的に注意しないといけないことがあって、たぶん、普通に画像を表示させただけだとレイアウトが崩れたりするかもしれません。
というわけでレイアウトが崩れないよにヘッダーにヘッダー画像以外の画像を指定する方法を、、、別途まとめたいと思います。

Twenty Elevenのヘッダー右上に連絡先やお問い合わせリンクを画像で表示させる方法

header.phpの構成をなんとなくつかんでおく

グローバルメニューを一番上に持って来たり、タイトルと画像の間にメニューを挟んだり、とにかくヘッダー部分のパーツのレイアウト表示を入れ替えるためには、php の構成をつかんで、それぞれ該当箇所を入れ替えれば OK みたいです。
というわけで、header.php の構成を見てみましょう。
確認方法は Firefox の Firebug なんかを使って、CSS の id、もしくは class を確認し、それが指定している箇所をheader.php から見つけ出す、という単純作業です。
ヘッダーパーツの id の指定は、CSS についてまとめたこちらの記事でも紹介しておりますが、改めてここでも紹介しておきます。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

【 header.php 】を開いて、これらのidに該当するの範囲を確認します。必要なのは 70 行目辺りの<body>タグ以降です。

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<!-- ■ここからヘッダー全体を指定している【 #branding 】が始まっています -->
	<header id="branding" role="banner">
<!-- ★ここからヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】が始まっています -->
			<hgroup>
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
<!-- ★ヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】はここまで -->
<!-- ヘッダー画像に関する記述はここから -->
			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						/*
						 * We need to figure out what the minimum width should be for our featured image.
						 * This result would be the suggested width if the theme were to implement flexible widths.
						 */
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					/*
					 * The header image.
					 * Check if this is a post or page, if it has a thumbnail, and if it's a big one
					 */
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>
<!-- ヘッダー画像に関する記述はここまで -->
<!-- ●検索窓に関する記述はここから -->
			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>
<!-- ●検索窓に関する記述はここまで -->
<!-- ▲ここからグローバルメニューを指定する【 #access 】が始まっています -->
			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<?php if ( ! is_singular() ) : ?>
					<div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php endif; ?>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
<!-- ▲グローバルメニューを指定する【 #access 】はここまで -->
	</header><!-- #branding -->
<!-- ■ヘッダー全体を指定している【 #branding 】はここまで -->
	<div id="main">

なるべく分かりやすくなるように、●とか★とか記号を割り振っておいたので、共通する記号に挟まれた部分をカットして好きな場所に貼付ければ、表示位置が変わるというわけです。
ちなみに、検索窓の位置変更は CSS をいじった方が思い通りにいきましたので、ヘッダー部分から検索窓を消したい！　検索フォームなんてじゃまだ！　という場合に、【 header.php 】内の該当箇所を削除すればOKだと思います。
というわけで、あとは該当箇所を入れ替えればいいだけなんですよね。
では実際にいくつか試してみましょう。

グローバルメニューを一番上に持ってくる

まずはグローバルメニューを一番上に表示させる方法です。ブログタイトル部分の上に表示させるわけですね。
グローバルメニューは▲で囲んである部分

<!-- ▲ここからグローバルメニューを指定する【 #access 】が始まっています -->
			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<?php if ( ! is_singular() ) : ?>
					<div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php endif; ?>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
<!-- ▲グローバルメニューを指定する【 #access 】はここまで -->

こちらを【 <header id=”branding” role=”banner”> 】のすぐ下に移動させればOKです。つまり【 <hgroup> 】の直前ですね。
すると、こんな感じでグローバルメニューが一番上に表示されます。

ブログ上部の余白を消す

グローバルメニューとブラウザの間、というかブログそのものとブラウザとの間にある余白を消して、グローバルメニューを画面上部に引っ付けたい場合、これは CSS の方を書き換える必要があります。
【 #page 】の【 margin 】の top を 0 にすれば OK です。

#page {
	margin-top: 0;
}

これでブログ上部の余白が無くなります。

検索窓を削除してグローバルメニューは真ん中に

次は検索窓を削除します。
これはもう●で囲んでおいた箇所を削除すればいいだけなので楽勝です。

<!-- ●検索窓に関する記述はここから -->
			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>
<!-- ●検索窓に関する記述はここまで -->

検索フォームを表示させているのは

<?php get_search_form(); ?>

という部分のようなので、これを削除するだけでも大丈夫そうです。
また、

<div class="only-search　〜

から始まっている部分は、ヘッダーを消した際の検索窓がグローバルメニュー内に移動した時の表示を指定しているようです。CSS 側で【 .only-search 】を探すとスタイルの変更が可能です。

グローバルメニューの下の余白を消す

グローバルメニューをタイトルスペースとヘッダー画像の間に持って来たら、グローバルメニューとヘッダー画像との間に微妙な余白ができてしまいました。
これは CSS ではグローバルメニューの下マージン（margin-bottom）に余白が指定されているからのようです。ですので該当箇所のマージンの値を0にすると、グローバルメニューと画像が引っ付いて、余白がなくなります。

#access {
	margin-bottom: 0px; /* デフォルトでは 6px なので、0 や好きな値に */
}

最後はヘッダー画像を一番上、次にブログタイトル、一番下にグローバルメニューの順番で配置してみます

これも単純で★でかこっている部分【 <hgroup> 】をヘッダー画像（）とグローバルメニュー（▲）の間に移動させるだけです。

検索窓は動きませんでしたが、こっちは CSS で好きな位置に表示させれば OK だと思います。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

あとは、【 #site-title 】と【 #site-description 】を入れ替えてみると、ブログタイトルとブログの説明部分が入れ替わります。CSS で微妙なレイアウトのずれを調節すれば、だいたいのことは実現できるのではないかと思います。
以上、Twenty Eleven のヘッダーレイアウト変更についてでした。

Twenty Elevenのヘッダーの構造を押さえておく

まず、ヘッダーに関わる部分をパーツごとに見てみると、

• タイトル部分（＋ブログの説明部分）
• 検索窓
• 画像
• グローバルメニュー

の 4 つに分けることができるかなと思います。
Twenty Eleven のデフォルト画面と CSS で指定されている id を照らし合わせてみると、こんな感じになります。

Twenty Elevenのヘッダータイトルや画像に関するCSS

さて、肝腎の CSS の方ですが、まずは親テーマのスタイルシート 70 行目辺りから始まる「＝Structure」と書かれた部分。ここに【 #branding hgroup 】という記述があり、上図の黄色い枠の部分を指定しています。

/* =Structure
----------------------------------------------- */
body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
/* ここが上図の黄色い枠の部分 */
#branding hgroup {
	margin: 0 7.6%;
}

また、500 行目辺りに「=Header」と書かれた箇所があります。ここに、その他の要素がまとまっています。

/* =Header
----------------------------------------------- */
/* ヘッダー全体 */
#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
/* ブログタイトルスペース */
#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
/* ブログタイトル文字 */
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
/* ブログタイトルのリンクに関する事 */
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}
/* ブログの説明文、キャッチフレーズ部分 */
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}
/* ヘッダー画像 */
#branding img {
	height: auto;/* デフォルトは1000×288ですが、PHPを変更すれば好きな高さの画像をヘッダーイメージに挿入することができます。その際はここの値も画像の高さに合わせて変更しましょう。 */
	margin-bottom: -7px;/* マージンはbottomしか指定されていませんが、ヘッダー画像の大きさを変更した場合はtopやright、leftもちょうどいい位置に指定しましょう。 */
	width: 100%;/* 基本は100%＝1000pxです。もし、横幅も変更した場合はここの値も変更しましょう。 */
}

以上がヘッダー部分のブログタイトル・イメージ画像に関わる CSS の該当箇所です。
あとは id 部分と照らし合わせて好きなようにカスタマイズできますね。
ちなみに、いくつか解説を加えておくと・・・

タイトルの横幅を調節したい場合

【 #site-title 】の【 margin-right 】の値を変更すればOKです。右側のマージン（余白）のことですので、ここの値を大きくすればタイトルの横幅は狭くなり、ここの値を小さくすればタイトルの横幅は広くなります。

/* ブログタイトルスペース */
#site-title {
	margin-right: 270px;
}

タイトルを左に寄せたい

タイトルや、タイトル説明文のブロックは、80 行目辺りの【 #branding hgroup 】で指定されていますので、ここの【 margin: 0 7.6%; 】という部分を変更すれば、デフォルトでは真ん中に配置されていたものを自由に配置できます。
マージンのとこに 7.6％ とあるのは、右・左どちらの余白も 7.6％ 分ということですから、左に寄せたい場合は左の余白を小さくする必要があります。
というわけで、【 margin: 0 7.6%　0 ●%; 】のようにして、好きな左側の余白を指定すれば位置を自由に決められます。左に寄せる場合はより小さな値、もしくは ０ で OK です。

#branding hgroup {
	margin: 0 7.6%;　/* 上　右　下　左　の順なので、３番目、4番目にも値を指定してあげる */
}

Twenty Elevenのグローバルメニュー部分のCSS

次はナビゲーションメニュー（グローバルメニュー）に関わる部分です。540 行目あたりから始まります。
グローバルメニューの部分は【 access 】という id で指定されています。

/* =Menu
-------------------------------------------------------------- */
/* グローバルメニューのカスタマイズ */
#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);/* ここまではメニュー背景色のグラデーション指定です。 */
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;/* ここまではドロップシャドウの指定 */
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}
/* グローバルメニュー全体 */
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
/* グローバルメニューの各メニュー（ここでは横並びになるように指定してます） */
#access li {
	float: left;
	position: relative;
}
/* グローバルメニューの文字全般 */
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
/* グローバルメニューの２段目 */
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
/* グローバルメニューの３段目 */
#access ul ul ul {
	left: 100%;
	top: 0;
}
/* グローバルメニュー２段目の文字全般 */
#access ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #efefef;
}
/* グローバルメニューにカーソルを持っていった場合 */
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

グローバルメニューバーの背景色を変えたい

グローバルメニューの色を指定しているのは、冒頭の backgroud になります。これは単色ではなく、微妙にグラデーションがかかっています。最新のブラウザであればだいたい確認できるはずです。
デフォルトの場合だと、【 #252525 】は上から下へ向かう色、【 #0a0a0a 】は下から上へ向かう色を指定しています。
ここの色を変えるだけでもだいぶオリジナリティが出せそうですね！

#access {
	background: #222; /* Show a solid color for older browsers （つまり古いブラウザで見た場合の色です。）*/
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
}
<!-- ※色を変える場合は４カ所全て変えてください -->

Twenty Elevenの検索窓に関するCSS

グローバルメニューに関する CSS の次に来ているのが検索窓に関する CSS です。idは【 searchform 】になっていますね。

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 7.6%;/* 検索窓の位置を変えたい場合は基本的にtopとrightを変更してください */
	text-align: right;
}
#branding #searchform div {
	margin: 0;
}
#branding #s {
	float: right;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#branding #s:focus {
	background-color: #f9f9f9;
	width: 196px;
}
#branding #searchsubmit {
	display: none;
}

あと、Twenty Eleven は管理画面からヘッダーのタイトルを削除することができると思うんですが、その時に検索窓がグローバルメニューの中に移動しますよね。
その場合のスタイルに関しては、この後の部分で指定しています。

/* タイトルを削除した場合＝グローバルメニュー内に検索窓が移動した場合 */
#branding .only-search #searchform {
	top: 5px;
	z-index: 1;
}
#branding .only-search #s {
	background-color: #666;
	border-color: #000;
	color: #222;
}
#branding .only-search #s,
#branding .only-search #s:focus {
	width: 85%;
}
#branding .only-search #s:focus {
	background-color: #bbb;
}
#branding .with-image #searchform {
	top: auto;
	bottom: -27px;
	max-width: 195px;
}
#branding .only-search + #access div {
	padding-right: 205px;
}

もっと自由にヘッダーをカスタマイズしたい場合

一応、これでほぼ好きなようにカスタマイズできるかと思うんですが、ただ、もしこんな事をしてみたいという場合は CSS より PHP ファイルを直接いじったほうがよさそうです。
こんな場合というのは・・・

• グローバルメニューを一番上に持って行きたい
• 検索窓を消したい
• タイトル・画像・グローバルメニューの位置を自由に入れ替えたい

などなど・・・。
そういうわけで色々試行錯誤した結果を別途まとめたいと思います。こちらの記事を参考にしてみてください。

WordPressテーマTwenty Elevenのヘッダーレイアウトの変更方法

1. ヘッダーのブログタイトルを削除する
2. ヘッダーのイメージ画像を削除する
3. ヘッダーのブログタイトルの文字色を変更する
4. Twenty ElevenのヘッダーカスタマイズにかかわるCSS

以上の 4 点です。

１．ヘッダーのブログタイトルを削除する

ヘッダーのブログタイトルを削除することができます。正確には削除するわけではなく、表示を隠すことができます。
【 外観　＞　ヘッダー 】からヘッダーの管理画面へ行き、【 テキストを表示 】の部分のラジオボタンが「はい」になっていると思うので、ここを「いいえ」に変更します。
あとは【 変更を保存 】を押せば OK。
ブログを確認してみると、タイトル部分が消えていますね！

ちなみに、もう一度「はい」を選ぶとブログタイトルが表示されます。

果たしてタイトルを隠してもいいのか？（SEO とか、ユーザビリティ的に）

なんとなく、隠さない方がいいような気がしますよね。このブログはおもいっきり隠してますが（笑）
訪問者さんがブログに訪れたときに、ぱっと見て何が書いてあるのかを判断する材料として、トップページのヘッダー部分に書いてある事は重要になります。
そのブログやサイトを見るべきかどうかをぼくたちはものの数秒で判断します。
ぼくも検索結果に表示されたブログの中から目的の情報が書かれたサイトを探すのに、かたっぱしから開いては閉じ、開いては閉じを繰り返してます。そのスピードは 2 秒〜 5 秒くらいといったところですね。
あなたも速攻で判断していませんか？
まぁ判断するスピードが速いにしろ遅いにしろ、最初に何が書かれているかをしっかり提示してあげることは訪問者さんの時間を無下に奪うことがなくなるので、親切かと思います。
一方 SEO 的にも、H1 とかタイトルとかを重要視するなんて言われてますから（本当かどうか知りませんが）表示させるにこした事はない気がしますよね。

２．ヘッダーのイメージ画像を削除する

こんどはタイトル部分ではなく、イメージ画像の部分を削除します。
これも同じく【 外観　＞　ヘッダー 】から管理画面に行き、【 画像を削除 】というところで【 ヘッダー画像を削除 】をクリックします。
するとこんな感じにタイトル部分が残って画像が消えています。

ちなみに、「この操作を行うとヘッダー画像を削除します。変更した設定は復元できません。」って書いてますが、元に戻したい場合は、画像をアップロードしたり、デフォルト画像をもう一度選んだりすれば画像が出てきます。
「復元できません」とう表現が何を意味しているのか分かりませんが、一度画像を削除しても元には戻せるので安心してください。

３．ヘッダーのブログタイトルの文字色を変更する

こちらはヘッダータイトルが表示されている状態で、ヘッダー管理が面の【 文字色 】という部分から色の変更ができます。
デフォルトでは【 #000 】、つまり黒になっています。
【 色を選択 】の部分をクリックすると、色相環？　のようなものが表示されて、好きな色を自由に選ぶことができます。選んだら勝手にカラーコードが表示されますので簡単です。

選択した文字色は画面の一番上にプレビューとして表示されますので、いちいちトップページを確認しにいかなくても、雰囲気を確認することができます。
変更後はこんな感じです。

４．Twenty ElevenのヘッダーカスタマイズにかかわるCSS

やっぱり細かいレイアウトだとかデザインの変更は CSS をいじった方がいいです。
ということで分かる範囲で記しておきたいと思います。・・・が、長くなりそうなので別の記事にまわします。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

ヘッダーイメージ画像を好きな画像に変更する

画像の変更はCSSとかいじらなくてもワードプレスの管理画面から行う事ができます。
【 外観　＞　ヘッダー　＞　画像をアップロード 】という部分から、好きな画像をアップロードしてヘッダーとして使う事ができます。
しかし、注意しなければならないのは、どんな大きさの画像でもサイズを【 1000 × 288 】にされてしまうということです。デフォルトのままだと、必ず横：縦の比率が 125：36（1000：288）に合うようにトリミングをしなければならなくなります。
例えば、310 × 222 の画像をアップしたとことろ、このように125：36の比率でトリミングを要求され、

結果トリミングされた上に 1000 × 288 に合うように拡大され、このような中途半端な感じになってしまいます。

ですので、アップロードする画像はできるだけ 1000 × 288 のサイズの画像か、比率が同じ画像を用意した方がいいと思います。（比率が同じでも、あまり小さいと拡大されて解像度が悪くなるので注意）
でも、できれば自分の好みのサイズのヘッダー画像もアップできたらいいと思いますよね？
ぼくもそう思いましたので、なんとか方法はないものかと調べてみました。

ヘッダーイメージ画像のサイズを変更する

最初は CSS をいじればどうにかなるかなと思っていたんですが、甘かったです。どうにもなりませんでした。CSS で高さを変更しても、結局そこにはまるようにイメージ画像がトリミングされるだけでした。
どうしたものかと調べていると、どうも functions.php をいじればヘッダーのサイズを変更できるらしいことが判明！
早速該当ヶ所を確認。

// The height and width of your custom header.
// Add a filter to twentyeleven_header_image_width and twentyeleven_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 288 ) );

120 行目あたりにあります。（右にスクロールしてください。）
ここの数字の部分が 1000 とか、288 になっていますよね。まずはここの値を変更する必要があります。横幅（width）を変更した場合は、ブログ全体の幅も変更しないと収まりが悪くなるかもしれませんので、基本は縦だけでもいい気がします。
ちなみにぼくは横も変えてみました。そして画像の位置を右に寄せてコンテンツ背景にもイメージ画像を挿入する事で、画像を２種類挿入してみました。
あとは、ここの高さに合わせてCSSも変更する必要があります。
CSS の該当箇所はこちらの 542 行目あたり。

#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}

【 height 】が【 auto 】になってますから、画像の高さに合わせてピクセル値で指定すれば OK でしょう。例えば画像の高さが150pxなら【 height: 150px; 】となります。
【 width 】は 100% のままで問題ないと思いますが、もし画像の横幅が小さいなどして変更したい場合は、画像サイズに合わせてピクセル値で指定すれば OK だと思います。

あとはそのままですと画像の表示位置が左寄せ、上寄せになっているので、【 margin 】の部分に数値を入れれば画像の表示位置を調節することができます。
もともと【 margin-bottom 】だけが指定されていますから、上・下・左・右全て指定できるように、【 margin: 上　右　下　左; 】と書き直せば大丈夫です。
これでヘッダー画像を好きな大きさ、好きな位置に表示させる事ができます！

Twenty Elevenのヘッダーカスタマイズ

今日はヘッダーをいじりました。ヘッダーの画像ではなくタイトル文字の部分です。ヘッダーのタイトル文字が大きいな〜と思っていたので、小さくしたいかったのと、本当は画像も小さくたかったんですが、いまいち分からなかったので断念。後日に持ち越します。
いじったのは CSS だけ。

/* =Header
----------------------------------------------- */
#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
/* ヘッダーの文字位置（余白）調節 */
#site-title {
	margin-right: 10px;
	padding: 0.65625em 0 0;
}
/* ヘッダータイトル文字の調節 */
#site-title a {
	color: #111;
	font-size: 18px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
/* カーソルを合わせた時の変化 */
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}
/* ヘッダータイトル補足文の調節 */
#site-description {
	color: #7a7a7a;
	font-size: 12px;
	margin: 0 270px 0.65625em 0;
}
/* ヘッダー画像の位置やサイズ調節 */
#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}

ヘッダーのタイトル部分とキャッチフレーズ（説明文）をカスタマイズする

だいたい 500 行目辺りから始まっているヘッダー部分は、ブログタイトル部分と説明部分に分かれています。で、タイトル部分は上のソースの 17 行目からの、

#site-title a {
	color: #111;
	font-size: 18px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}

という部分ですね。ここでブログタイトルの文字色（color）、大きさ（font-size）なんかが変えられます。【 font-weight: bold; 】っていうのは太字ってことだし、【 line-height: 36px; 】っていうのは行間のことらしいけど、タイトル文字小さくしたら 1 行で収まっているのであまり関係ないだろうということでデフォルトのまま。
【 text-decoration 】ってのは、テキストデコレーションということで、下線を付けたり（underline）、上線を付けたり（overline）、取り消し線を付けたり（line-through）できるみたいですね。値を【 blink 】にしたら点滅するみたいです。
タイトルの説明文は、上記コードでは 33 行目からの、

#site-description {
	color: #7a7a7a;
	font-size: 12px;
	margin: 0 270px 0.65625em 0;
}

という部分で変更できました。変えたのは【 margin 】の部分だけです。マージンの部分は外側の余白ということですが、【 margin: 上　右　下　左; 】という感じで値を設定していきます。今回はできるだけ縦幅を小さくしたかったので、上（トップ）と下（ボトム）の値を変更しました。
といっても、トップは元々 0 だったので、下だけの変更です。ヘッダー画像も高さを低くしたかったんですが、【 height 】を変更しても画像の表示スペースが小さくなるのみで、うまくいきません。画像自体はデフォルトの 1000 × 288 のサイズでしかアップロードできず、好きな画像を好きなサイズで差し込む事ができませんでした。この辺はまた調べてなんとか変更できるようにしたいと思います。
ちなみに、 11 行目にあるブログタイトルのマージンなんかを設定する部分では、

/* ヘッダーの文字位置（余白）調節 */
#site-title {
	margin-right: 10px;
	padding: 0.65625em 0 0;
}

padding のトップの部分を小さな値に設定しました。これでタイトル部分の高さが低くなって、あんまりタイトルが主張しない感じになりました。

WordPressのTwenty Elevenのヘッダー検索窓の位置を変更する

と、思ったら、検索窓の位置がそのままだったため、グローバルメニーにかぶってしまってました。
で、Firefox の Firebug を使ってどこを変えたらいいのか探していたら、どうやら見つかったようです。

/* ヘッダー部分の検索窓の調整 */
input#s {
	background: url(images/search.png) no-repeat 5px 6px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 22px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
}

Twenty Eleven の CSS の 460 行目辺りにある要素で、検索窓に付いて色々指定できるようです。が、今回はとりあえず位置調節だけということで、マージン要素を追加して位置を上に上げました。 こんな感じ。

/* ヘッダー部分の検索窓の調整 */
input#s {
	background: url(images/search.png) no-repeat 5px 6px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 22px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
	margin-top: -41px;
}

ここであまり詳しくない人はきっとマイナスが付いている事に疑問を持ったかもしれませんね。が、これはぼくも最近知ったテクニックなので、もう少し使いこなせるようになってからあれこれ記録して行きたいと思います。
というわけで、無事検索窓の位置もいい感じになり、ヘッダーがすっきりしたのかなと思います。
ま、これも試験的に行っただけなんで、いつまでこんな感じにするか分かりませんけどね。