WordPressのTwenty Elevenをカスタマイズする方法

このブログは WordPress に最初から入っているテーマ Twenty Eleven を使っています（2012 年 1 月時点）。色々と大きさや配置換え、デザインもカスタマイズしていきたいと思いますし、プラグインも今 30 個近く入れています。
ブログ記事にはソーシャルプラグインをいくつか導入してみました。Facebook の「いいね！ボタン」と「送信ボタン」。それに Facebook 用のコメント欄（ OGP 設定済み）。Google+ の「プラスワンボタン」に Twitter の「ツイートボタン」といったところです。 ま、今のところぼくがソーシャルメディアほとんど使ってないので、あんまり意味ないかもしれませんけどね。
ですが、設置の方法とか役立つだろうから、そのうち備忘録的に記したいと思います。

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;
}

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