Twenty Elevenのヘッダー画像サイズの変更方法やテーマカスタマイズ法など

WordPress にデフォルトで入っているテンプレートのひとつである Twenty Eleven。色々とカスタマイズができるようなので、勉強がてらちょこちょこいじっています。
本日やりたかった事は、Twenty Eleven のヘッダー部分に関してです。
Twenty Eleven のヘッダー部分はタイトル部分とイメージ画像部分の 2 カ所に分けれています。いや、正確にはタイトル部分とイメージ画像部分と検索窓、そしてグローバルメニューまでが header.php に記載されていることのようです。

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

画像の変更は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: 上　右　下　左; 】と書き直せば大丈夫です。
これでヘッダー画像を好きな大きさ、好きな位置に表示させる事ができます！