【Twenty Twelve】タイトル文とヘッダー画像を重ねて表示する方法

Twenty Twelveでは、タイトル文とヘッダー画像が別々に表示されますが、それを重ねて表示したいときの方法として、イメージマップなどいくつか方法が思いつくのですが、ヘッダー画像を背景画像にしてタイトル文を重ねて表示する方法について書きます。

header.phpファイルのタイトル文を表示するh1タグを囲んでいるhgroupタグにスタイル設定をすることで、ヘッダー画像をタイトル文と説明文の背景画像として表示することができ、以下のコードをなります。

<hgroup style="background-image: url(<?php echo esc_url(get_header_image()); ?>); ">

上記のコードでは、ヘッダー画像に設定したサイズでは表示されないので、サイズを設定するために横幅と高さの設定を追加し、スタイル設定のためにheader-imageクラスも追加します。

<hgroup style="background-image: url(<?php echo esc_url(get_header_image()); ?>); width: <?php echo get_custom_header()->width; ?>px; height: <?php echo get_custom_header()->height; ?>px;" class="header-image">

style.cssには、hgroupタグに設定するヘッダー画像を背景画像として表示するためのheader-imageクラスを追加します。

hgroup.header-image {
	max-width: 100%;
}

ここまですると、タイトル文とヘッダー画像を重ねて表示しサイズもキチンと表示されますが、タイトル文と説明文の位置を変えたいときは、「.site-header h1」と「.site-header h2」をstyle.cssに追加してパッディングを設定します。

style.cssに追加した設定例になります。

.site-header h1 {
	padding-top: 50px;
	padding-left: 50px;
}

.site-header h2 {
	padding-left: 50px;
}