Twenty Tenテーマヘッダー部分のデザインの変更のために、テーマがどのようになっているかをみてみます。

メインのイメージ部分までの「branding」と、メニュー部分の「access」の大きな２つの部分からできていることがわかります。まずは、「branding」の部分を考える事にします。

ヘッダーのbranding部分のCSS

続いてこの部分のCSSがどのようになってるかも見てみます。

#header {
	padding: 30px 0 0 0;
}
#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 700px;
}
#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 14px 0 18px 0;
	width: 220px;
}

/* This is the custom header image */
#branding img {
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
	clear: both;
	display: block;
}

ちょっと省略してある部分もありますが、上のCSSはこのような感じです。

ロゴを入れてみる〜site-titleの修正

まず、タイトルの横にロゴをいれてみたいと思います。ロゴが入るとサイトの印象が強くなります。

ちょこちょこっと新芽のイメージでロゴをつくってみました。サイズは65×55です。

1. 背景を同色にしたので、よけいなスペースになってしまったheaderのpaddingを0にします。
2. ロゴをsite-titleの背景として指定し、位置を調整します。
3. ついでにフォントの色を真っ黒から少し薄いグレーに変えてみます。

#header {
	padding: 0;
}
#site-title{
  background-image: url(img/logo.gif) ;
  background-position: left center;
  background-repeat: no-repeat;
  padding: 10px 0 0 65px; 
  line-height: 55px;
  margin: 0; 
}
#site-title a {
	color: #7D7D7D;
}

こんな感じでロゴをいれることができました。
もちろん、site-titleすべてを画像にしたり、いろいろと工夫してみて下さい。

次は、site-descriptionの位置調整をしてみたいと思います。