サイトのタイトルと説明文の変更をしたので、次はメインのイメージの変更をしてみます。

メインのイメージとなる画像は、管理画面から設定できるようになっています。
まずは標準の機能を使ってみます。

カスタムヘッダーの設定の仕方

外観＞ヘッダーと選んだときの管理画面です。

デフォルト画像、というところであらかじめ用意された画像を選ぶ事が出来ます。

せっかくですから、オリジナルの画像を入れてみたいと思います。

「画像をアップロード」とあるところで、「ファイルを選択」ボタンでオリジナルの画像を選択し、「アップロード」するだけで、画像が自分の作った物と入れ替わります。

「画像の大きさを940 × 198ピクセルにするとそのままの大きさで表示されます。」
という注意書きがあります。これは、Twenty Tenテーマのfunctions.phpであらかじめ設定されている数字ですので、とりあえずそのまま940 × 198ピクセルの画像を用意します。

このような感じになりました。

ヘッダーイメージの上下につくボーダーを変更する

ちょっとイメージの上につくボーダーが真っ黒で重たいですね。これを変えてみたいと思います。

Twenty Tenテーマフォルダのstyle.cssの358行目あたり見てみます。

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

このようになっているので、画像の上にあるボーダーを青に、少し細めに変更します。まだその下のメニューについてはいじっていないので、黒いままにしました。

/* This is the custom header image */
#branding img {
	border-top: 2px solid #557195;
}

そうするとこのような感じになります。

画像をオリジナルのものにすると、だいぶイメージが変わりますね。いろいろと楽しんでみて下さい。

ヘッダーイメージを表示させない〜CSS

場合によっては、この画像がいらない、ということもあると思います。
そんなときは、思い切って、

#branding img {
	display: none;
}

消してしまいましょう。ただし、これはCSSで見えなくしているだけで、実際のソースには書き込まれてしまいます。でも、手軽な方法だと思いますので、慣れないうちはこれでもよいかと思います。

（参考）ヘッダーイメージを表示させない〜テーマファイル

この画像の読み込みはheader.php　68行目から78行目

				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

				<?php
					// 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 ), 'post-thumbnail' ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
					<?php endif; ?>
			</div><!-- #branding -->

この部分で設定されています。header.phpを子テーマのフォルダにコピーして、この部分を削除すれば、完全に出力されなくなります。ここでは、アイキャッチの画像を読み込む設定などもしていますので、注意して削除して下さい。削除する部分をグレーで色づけしておきました。

この辺りの事は、画像のサイズ変更とあわせて、後ほどきちんと触れたいと思います。