Twenty Elevenのヘッダー右上に連絡先やお問い合わせリンクを画像で表示させる方法

WordPress に限らず、ホームページをビジネス活用したいなら、右上に連絡先情報を表示させるのは、もはや必須のカスタマイズといっても過言ではないでしょう。法人に限らず、小さな商店や病院・塾・仕業関係など、ビジネス活用を目的としたほとんどのウィブサイトは、右上にお問い合わせ方法や連絡先の情報が記載されています。
そこで、こちらの「ヘッダー右上に連絡先やお問い合わせリンクを表示させる方法」という記事にて、右上に連絡先情報を表示する方法をまとめました。
WordPress の Twenty Eleven というテーマをカスタマイズする方法ですが、他のテンプレートでも考え方は同じなので、応用できると思います。

連絡先公開にはリスクもある

しかし、連絡先情報を公開したいけど、色々不安な点もあると思います。例えばメールアドレスをそのまま記載すると、メールアドレス回収ロボットに拾われてしまう可能性があります。するとスパムメールや営業メールが届きやすくなってしまいます（なのでロボットに拾われないようにアドレスの@を、★などの記号で表示させている人も多いですよね）。
また、電話番号や住所だって回収されないとも限りません。ビジネスをするからには連絡先の公開は当然ですが、それをそのまま公開すると検索対象にもなりますし、小さな個人商店やフリーで活動している方、または副業でビジネスをしている方など、公開をためらう人もいると思います。

連絡先情報を検索されないようにする方法

そこで、電話番号や住所などを文字（テキスト情報）としてではなく、画像として公開することで、検索対象やロボットの回収対象から逃れようという方法があります。画像なので、ファイル名から連絡先だと分かってしまったり、alt などでテキスト情報と関連づけていない限り、今のところ Google 先生にも発見されませんし、人の目でしか確認できないということになります。

Twenty Elevenのヘッダーに画像を用いる時の注意点

ただ、Twenty Eleven のヘッダー部分に、ヘッダー画像以外の画像を挿入すると、ちょっと困ったことになるかと思います。
ポイントは “ヘッダー画像以外の画像” という部分。普通はヘッダーに 2 つ以上の画像を挿入することなんてないかもしれません。しかし今回のようにお問い合わせ情報を画像で表示させる場合、その画像にはお問い合わせページへのリンクなど、本来ヘッダー画像がリンクしているトップページとは違うリンクを貼らなければなりません。

その際に困った事にならないように CSS を整える必要があります。この記事は主にその話題です。

とりあえずヘッダー部分に画像を埋め込んでみる

ヘッダー部分に画像を表示させようとするとどうなるのか？
ここでは、いわゆるデフォルトで設定できる画像とは別に、ヘッダー部分に直接イメージタグを書き込んだ場合、という意味です。例えば以下のように【 header.php 】を開いて、タイトル部分の下にでもイメージタグを書き込んでみましょう。

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
/* ▼ hgroupの下にイメージタグを挿入 */
<img alt="" src="（イメージのURL）" />

イメージは 240×180 の大きさで、こちらの画像を用意しました。

すると・・・

使用している画像は、240×180 の大きさです。にも関わらず、サイトの横幅（1000px）に合わせてかなり拡大されています。
なぜ、こんなことになってしまうのでしょうか？

ヘッダー画像は CSS でどのように指定されているのか？

ヘッダー部分に挿入した画像は、みな一様に横幅 1000px に矯正されてしまうみたいですが、これはどこで指定されているのでしょうか？　親テーマの CSS を見てみると、545 行目辺りに【 #branding img 】という項目があります。

#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
}

これは、【 #branding 】という id で指定されている範囲にある img タグに該当するもの全てに適用されます。img ってことはイメージファイル全てってことですね。そのため、100% とか、マージンの値とか、デフォルトのヘッダー画像だけでなく、自分でタグ打ちして挿入した画像にも適用されてしまい、サイトの横幅 1000px（100%）に合わせて画像が拡大表示されてしまっているわけです。
まぁヘッダーは画像を 1 枚しか使わない場合がほとんどだと思いますので、あまり問題に感じた事のある方も少ないかもしれません。しかし、これはロゴだろうがなんだろうが、ヘッダー内で画像（img タグ）を使う際は影響を受けてしまう記述なので、気をつけておかないといけません。

ヘッダーに挿入した２枚目の画像のレイアウトを整える

さて、原因は分かりましたが、問題はどう解決するかです。いくつか方法はあると思いますが、今回は【 #branding img 】の記述はいじらずに、新たに追加した画像（連絡先情報用の画像）だけに別途スタイルを指定する方法で行きたいと思います。

(1) イメージタグを<div>で囲む

まずはイメージタグに id を指定しましょう。【 header.php 】に追記したイメージタグを、以下のように<div>で囲ってしまえば OK ですね。あと、別にお問い合わせフォームのページを用意している場合は、リンクタグを埋め込んでおきましょう。

<header id="branding" role="banner">
		<hgroup>
			<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
			<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
/* ▼ divで囲ってidを指定する */
	<div id="contact"><a href="（お問い合わせフォームページのURLなど）"><img alt="" src="（イメージのURL）" /></a></div>

(2) 追記したidのレイアウトを CSS で調整する

指定した id をスタイルシート側で調整していきましょう。右上に表示させたいので、回り込み（float）を使ったり、大きさの指定をしたり、余白の調節をしたりします。

#contact {
	float: right; /* 回り込み指定 */
	width: 24%; /* イメージのサイズに合わせて */
	margin-right: 7.6%; /* お好みで余白を指定 */
	padding-top: 3.65625em; /* お好みで余白を指定 */
}

横幅はピクセル値に合わせてパーセンテージで指定した方がいいと思います。パーセンテージで指定しておくと、ブラウザの大きさやサイトを拡大・縮小に合わせてバランスを保ってくれます。
Twenty Eleven の場合は 100% ＝ 1000px なので、横幅 240px の画像を用意した場合は 24% にしておけば OK です。

(3) タイトル部分の余白を調整する

画像を右へ回り込ませても、タイトル部分がそのままなので、回り込みを指定する必要があります。タイトル部分にも横幅やマージンが指定されているため、画像がうまく回り込んでくれない可能性があります。Firefox のプラグイン、Firebug などで確認しながら適切な余白を指定してください。

#branding hgroup {
	float: left; /* 回り込み指定 */
	width: 60%;
	margin-right: 0px;
}
/* ▼ サイトタイトルや説明書きの余白も無くしました */
#site-title {
	margin-right: 0px;
}
#site-description {
	margin-right: 0px;
}

まとめ

これで右上に連絡先情報を画像で表示させることができました。もし、あなたがTwenty Elevenを使っているならコピペですぐにできるように、以下に使用タグをまとめておきます。ぜひ役立ててください。

header.php の変更内容

<header id="branding" role="banner">
	<hgroup>
		<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	</hgroup>
/* ▼ hgroupの下にイメージタグやリンクタグを挿入 */
<div id="contact">/* idの指定も忘れずに（名称は任意で） */<a href="（お問い合わせフォームページのURLなど）"><img alt="" src="（イメージのURL）" /></a></div>

style.css の変更内容

#contact {
	float: right; /* 回り込み指定 */
	width: 24%; /* イメージのサイズに合わせて */
	margin-right: 7.6%; /* お好みで余白を指定 */
	padding-top: 3.65625em; /* お好みで余白を指定 */
}
#branding hgroup {
	float: left; /* 回り込み指定 */
	width: 60%; /* サイトタイトルなどの長さに合わせて調節 */
	margin-right: 0px; /* お好みで余白を指定 */
}
/* ▼ 画像を回り込ませる余裕を確保できるように調節 */
#site-title {
	margin-right: 0px; /* お好みで余白を指定 */
}
#site-description {
	margin-right: 0px; /* お好みで余白を指定 */
}