【Twenty Ten】ヘッダー画像とタイトルを重ね合わせて表示する

変更後もカスタムヘッダーを使い、別のヘッダー画像に変更できるようにして作ります。

header.phpにある以下のコードを削除します。

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
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 );
elseif ( get_header_image() ) : ?>
  <img src=&quot;<?php header_image(); ?>&quot; width=&quot;<?php echo HEADER_IMAGE_WIDTH; ?>&quot; height=&quot;<?php echo HEADER_IMAGE_HEIGHT; ?>&quot; alt=&quot;&quot; />
<?php endif; ?>

次にheader.phpのheadタグの中に以下のスタイルシートを追加します。

<style type=&quot;text/css&quot;>
#branding {
  background-image: url(<?php header_image(); ?>);
  width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
  height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
}
</style>

変更後のヘッダー画像とタイトルは以下のようになります。

【参考：例】
ヘッダーにあるタイトル文を画像ではなく、そのままテキストを使う場合、初期のヘッダー画像が黒系なので、見やすいように表示するタイトル文字を白くする場合のstyle.cssの設定。

#site-title a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

上のstyle.cssファイルにあるcolorを「color: #FFF;」にします。