タグ: 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; /* お好みで余白を指定 */
}

ビジネス用のサイトや企業のサイトなど、その多くが同じような構成をしていますが、その構成の中でも大事なポイントがいくつかあります。その内の一つが、サイトの右上に電話番号や住所などの連絡先情報を掲載したり、お問い合わせフォームへのリンクを設置している点です。
真偽のほどは分かりませんが、SEO 的にも右上に連絡先情報を表示することは推奨されているのだそうな。また、右利きの人が多いので右側にクリックされやすいものを持ってくるというのは有効なようです（広告も然り）。
それに“右上にはお問い合わせ情報がある！”というのも、結構浸透している気がしますし、訪問者が「お問い合わせしたいな・・・」と思い立った時に、無意識に右上を確認する可能性も高いと言えるでしょう。そういった点からも、右上に連絡先やお問い合わせリンクを表示させるのは有効だと思います。

ヘッダースペースにタイトルとは別の内容を表示させなければならない

たぶん、カスタマイズする上で一番ひっかるんじゃないだろうかという点が、これです。
タイトルが左側、連絡先などの情報やリンクは右側に表示させ、かつタイトルをクリックしたらトップページへ、連絡先情報からはお問い合わせフォームへリンクさせたいわけです。
一枚のヘッダー画像にタイトルとお問い合わせ情報を盛り込んでもいいのですが、これだとリンク先を分けることができません（ヘッダー画像をクリックすると基本的にはトップページへ移動します）。リンクは貼らずに、電話番号を表示させるだけなら構わないのですが、今回はタイトルリンクと連絡先情報のリンクを分ける事を目的に話を進めて行きたいと思います。
そういうわけで、今回目指す理想の形はこんな感じです！

サイトの右上（タイトル右横）にテキストとして連絡先を表示させる方法

まずは基本的な感じで、右上に連絡先情報をテキスト表示させてみたいと思います。ちなみに取り扱っているテンプレートは Twenty Eleven ですが、基本的な考え方は一緒なので、ほぼ全てのテンプレートでも同じようにできるかと思います。

まず該当するテンプレートファイルは【 header.php 】ですね。PHP とは言っても、ホームページの基本は HTML で書かれているので、普通に HTML の感覚で文字やタグを打ち込んでいきましょう。場所はタイトルスペースに関して指定している【 hgroup 】の後がいいですね（Twenty Eleven の 76 行目辺りです）。

<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>
	0120-222-3333 <!-- ここに電話番号を入力しただけ -->

とりあえず電話番号を打ち込んでみました。特に class や id も指定していない生な感じです。するとこんな感じでタイトルとヘッダー画像の間に電話番号が表示されます。

そう、住所だろうが電話番号だろうが、ただ書き込めばいいだけなんですね。簡単すぎます。でもこれじゃあ目的とする表示方法じゃないしかっこ悪いので、CSS なんかでレイアウトを指定していきます。と、その前に右上の検索窓が邪魔なので消しちゃいましょう。

WordPressテーマTwenty Elevenのヘッダーレイアウトの変更方法

下準備：header.phpへの指定

連絡先は連絡先だと分かるように、Google さんに教えてあげましょう！
<address> というタグがあります。「連絡先や問い合わせ先を示す場合に使用する」となっています。というわけで、まずはこのタグで連絡先を囲ってあげます。そしてカスタマイズしやすいように電話番号に class を指定しましょう。

<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>
<!-- ▼ 連絡先情報をaddressタグで囲って、各情報にも class や id を指定 ▼ -->
	<address>
		<div class="tel">0120-222-3333</div>
		<div class="hours">営業時間 9:00〜18:00</div>
	</address>

以上で【 header.php 】側の変更は終わりです。必要があれば適宜電話番号以外の情報も盛り込んでいってください。その際連絡先に関しては <address> 〜 </address> のタグの中に書き込むようにしてください（営業時間は別枠がいいかも・・・）。

連絡先情報を右上に持って行くためのCSSの指定方法

さて、続いて CSS 側の設定です。子テーマの【 style.css 】を開いてください。理屈的なことを言うと、【 hgroup 】と【 address 】の部分を回り込ませればいいということになります。
まずは【 #branding hgroup 】です。親テーマの style.css では 79 行目にあります。ここのタイトル部分は左側に表示させたいので、【 float: left; 】で回り込ませます。さらに横幅は 100％ になっているので、右側に連絡先を表示させるスペースを確保するために横幅を狭めておきましょう。以下の例では 68% まで縮めましたが、右側に連絡先が入るスペースができればいくらでも構いません。
また、マージンも左右に 7.6% ずつスペースを取っているので、ここを変えてもいいと思います。具体的には、【 margin: 0 1% 0 7.6%;】のようにして、左マージンは今までの値、右マージンは小さな値にするといいでしょう。

#branding hgroup {
	margin: 0 7.6%;
	float: left;
	width: 68%;
}

そして【 address 】側の指定ですが、ここは【 #branding address 】とすることで指定できます。以下のように追記しておきましょう。

#branding hgroup {
	margin: 0 7.6%;
	float: left;
	width: 68%;
}
#branding address {
	float: right;
	width: 16.8%;
	padding-top: 3.65625em; /* タイトルのpaddingと同じ値にしました */
}

するとこんな感じで連絡先を右上に表示させることができます。

まぁこのままだと不格好なので、CSS で色々指定して体裁を整えてください。

うまくいかない場合は余白（マージン）に注意！

もしかしたら、フロートで回り込みを指定しても、タイトルと同じ列の右横に移動せずに、タイトルの下の列でただ右に移動しただけのように見えることがあるかもしれません。

ただ、これは hgroup や address の横幅が広すぎて、回り込むスペースが確保されていないことが原因だと思われます。ですので、上記では【 width 】を指定していますが、横幅が合計で 100% を超えるような値にしてはいけないわけです。
例えば Twenty Eleven の場合、デフォルトでは 100% ＝ 1000px なので、【 hgroup 】が 680px、その余白が左右に 76px ずつで合計 832px あることになります。ですので、【 address 】は残りの168pxよりも小さくなければいけません。これより大きいと 1000px（＝100%）を超えてしまって回り込む隙間がありませんので・・・。
なので、【 address 】 の横幅は 16.8% にしたわけです。
その他、【 #site-title 】（サイトタイトル）や【 #site-description 】（サイトタイトル下の説明文）でもマージンやパディングといった余白が指定されていますので、それらも含めて間隔を調節しましょう。
参考までに以下の図を確認してください。

赤はマージン（margin）、青はパディング（padding）、緑は横幅（width）を表していて、ほとんどが Twenty Eleven のスタイルシート上でデフォルトとして指定されています。
記載場所もばらばらなので、各々変更したい場合は上の図を参考に id などで検索してみてください。

回り込んだら元に戻す

あと、忘れては行けないのが回り込みの解除ですね。恐らくヘッダータイトルの後にはヘッダー画像が来ている人が多いかと思いますので、【 #branding img 】（親テーマでは 545 行目）の部分に【 clear: both; 】を指定しておきましょう。とは言ったものの、指定しなくてもレイアウトは崩れなさそうなので、無くてもいいのかもしれません。けど念のため・・・。
ついでに言うと、Twenty Eleven は hgroup、address ともに、既に【 display: block; 】というようにブロック要素が指定されています。ですので、フロートが使えるんでしょうね〜・・・。

サイトの右上（タイトル右横）からお問い合わせフォームへリンクさせる方法

今度はリンクを指定したいと思います。方法は前述と同じで、テキストの部分にリンクタグを指定すればいいだけです。

<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>
	<address>
		<div class="tel">0120-222-3333</div>
		<div class="hours">営業時間 9:00〜18:00</div>
		<div class="contact"><a title="お問い合わせ" href="フォームページのURL">フォームでのお問い合わせ</a></div>
	</address>

さらに header.php や CSS の方などを色々カスタマイズすると、こんな感じで表示できます。

お問い合わせリンクをボタン風にしたり
連絡先情報の文字を 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>
	<address>
		<div class="address">〒000-0000 ●●市1-1-1</div>
		<div class="tel">0120-222-3333</div>
		<div class="hours">営業時間 : 9:00〜18:00(平日)</div>
		<div class="contact"><a title="お問い合わせ" href="フォームページのURL">フォームでのお問い合わせ</a></div>
	</address>

style.css の変更内容

/* branding内の指定 */
#branding hgroup {
	margin: 0 7.6%;
	width: 48%; /* 横幅を48%まで狭めました */
	float: left;
}
#branding address {
	float: right;
	width: 26.8%; /* 横幅を26.8%まで広げました */
	margin-right: 7.6%; /* バランスを整えるために右マージンを追記 */
	padding-top: 3.65625em;
}
/* サイトタイトルと補足説明のマージンを変更 */
#site-title {
	margin-right: 70px; /* デフォルトは270pxでしたが、70pxに */
	padding: 3.65625em 0 0;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 70px 3.65625em 0; /* 右マージンのデフォルトは270pxでしたが、70pxに */
}
/* 以下を追記（クラス名はheader.phpと合わせてお好みで変更してください） */
.address {
	font-size: small;
}
.tel {
	font-size: xx-large;
	text-shadow: 1px 0px 2px #666666;
}
.hours {
	font-size: small;
}
.contact {
	margin-top: .5em;
	text-align: center;
}
.contact a {
	display: block;
/* ボタンジェネレーターで作成したソースコード */
	color: #ffffff;
	font-size: large;
	padding: 10px;
	text-decoration: none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-box-shadow: 0px 1px 2px #666666;
	-moz-box-shadow: 0px 1px 2px #666666;
	text-shadow: 1px 1px 3px #666666;
	border: solid #cacbcc 1px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#003366));
	background: -moz-linear-gradient(top, #42aaff, #003366);
}
.contact a:hover {
	background: #42aaff;
/* ボタンジェネレーターで作成したソースコードここまで */
}

お問い合わせフォームへのリンク部分は、ボタンのデザインが簡単にできるブラウザ上の CSS ジェネレーターを使って作成しました。ジェネレーターでつくったタグをコピペしただけです。
そのサイトはこちらです。
＞ {CSS}Portalのボタンジェネレーター
ぼくなんかの CSS 素人にはかなり重宝させて頂いているサイトです。こった CSS のデザインが難しいとか、作業時間を短縮したいという方はぜひご活用を。

お問い合わせリンクに画像を使いたい場合

住所や電話番号をテキストとして掲載しておくと検索対象になってしまうので、不安に思っていらっしゃる方も多いかと思います。なので、電話番号などを公開したいけど、画像表示で公開したいという方も多いはずです。
そんな場合は電話番号や住所などの乗った画像を用意してアップロードすればいいのですが、ヘッダーに画像を表示させる場合は CSS 的に注意しないといけないことがあって、たぶん、普通に画像を表示させただけだとレイアウトが崩れたりするかもしれません。
というわけでレイアウトが崩れないよにヘッダーにヘッダー画像以外の画像を指定する方法を、、、別途まとめたいと思います。

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