リンクにボタン状の画像を使いたいけれど、SEO上は画像リンクよりもテキストリンクの方が優位です。そこで、CSSを使ってテキストリンクに背景画像を設定し、CSSで位置を調整する方法を3通りご紹介します。
display: block; として line-height を height と合わせる
まず、 <a> タグに幅と高さを持たせるために、 display: block; とします。幅と高さは画像に合わせます。文字の左右を中央に合わせる場合は、text-align: center;とすれば大丈夫です。そして上下方向を中心に合わせるには、行間の高さを画像の高さに一致させます。line-heightを使います。
テキストリンクこの、画像を背景にした部分のHTMLとCSSを以下に書きます。
HTML
<a class="button" href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu19_2-3.png" target="_blank">テキストリンク</a>
CSS
a.button {
display: block; /*blockレベル要素に指定*/
width: 160px; /*幅を画像サイズに合わせる*/
height: 55px; /*高さを画像サイズに合わせる*/
line-height:55px; /*行間の高さを画像に合わせる*/
text-align:center; /*文字の左右の配置を中央に*/
color: #8C0F27; /*文字色の指定*/
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; /*フォントの設定*/
text-decoration: none; /*リンクの下線を非表示に*/
font-size: 14pt; /*フォントサイズを14ポイントに*/
background-image:url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu19_2-3.png); /*背景画像の指定*/
background-position:0 0;" /*背景画像の表示位置を指定 左上からx,y方向に0と0*/
}
a.button:hover { /*マウスカーソルを合わせた時の設定*/
color: #CF310B; /*文字色を変更*/
background-position:0 -55px;" /*背景画像の位置を左上からx,y方向に、0と-55ピクセルに指定*/
}
HTMLとCSSのコードはこのようになります。マウスホバーで画像の色を変える部分は、下のように2画像を1つにまとめたものを使用しています。背景画像の表示位置の指定を使って、切り替える方式です。別々に分けた2枚の画像を使う場合に比べて、初回の応答性が高いのが特徴です。ブラウザの仕様によっては、ページを表示する時にはマウスホバー時の画像は読み込まず、マウスをホバーしてから読み込み開始するタイプのものもあります。このタイムラグをなくす便利な方法が、1画像にまとめたうえで表示位置を変える方法です。
文字を左寄せする場合の調整 text-indent
例えば左側に並ぶメニューのような場合、文字を左寄せにすることも多いでしょう。このような場合に、一番楽に左端の位置を調整できるのは、 text-indent を使う方法です。これは段落の始めの字下げ用の設定ですが、1行の場合でも使えます。paddingで指定する場合に比べると、幅の設定を画像サイズに合わせるだけですむのが便利なところです。（paddingで指定する場合ですと、paddingの分だけwidthの値を小さくする必要があります。）
この番号なしリストのメニューのコードは以下の通りです。
HTML
<ul class="button2">
<li><a href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png" target="_blank"<テキストリンク>/a></li>
<li><a href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png" target="_blank">テキストでリンク</a></li>
<li><a href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png" target="_blank">背景はCSSで</a></li>
</ul>
CSS
ul.button2 > li {
display: block; /*ブロックレベルに指定*/
margin-bottom: 1px; /*下に1pxのマージンを入れて白く抜けるようにする*/
}
ul.button2 > li > a {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
color: #DEFFDE; /*色を薄い黄緑に*/
text-decoration: none;
font-size: 10pt;
display: block;
width: 130px;
height: 30px;
text-align:left; /*文字を左揃えに*/
text-indent: 24px; /*行頭の字下げを24pxに*/
line-height:30px;
background-image:url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png);
}
ul.button2 > li > a:hover { /*マウスホバー時の設定*/
color: #FFFFFF; /*色を白に*/
}
左寄せで上下左右の位置を調整する場合 paddingで調整
背景によっては、文字の位置を上下の中心に以外に揃えたり、左右方向も調整する場合があるでしょう。そのような場合に、paddingを使って調整する方法です。paddingの分だけ、widthとheightの値を小さくする必要があります。widthとheightが画像サイズと同じ場合は、マウスホバーとみなされる範囲が背景画像から外にはみ出してしまいます。
左上からpaddingで調整paddingを使って調整する場合のコードは以下のようになります。
HTML
<a class="button3" href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu32_4.png" target="_blank">左上からpaddingで調整</a>
CSS
a.button3 { /*画像サイズは300px × 80px*/
display: block;
width: 276px; /* 300px - 24px = 276px paddingの分だけ小さくする*/
height: 62px; /* 80px - 18px = 62px paddingの分だけ小さくする*/
padding-left: 24px; /*左端のpadding この値だけ文字が左からズレる*/
padding-top: 18px; /*上端のpadding この値だけ文字が上からズレる*/
text-decoration: none;
font-size: 14pt;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-weight: bold; /*今回はフォントを太字に*/
text-align: left;
color: #194F9E;
background-image:url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu32_4.png);
}
a.button3:hover { /*マウスホバー時の設定*/
text-shadow: #A5D3E2 2px 2px 2.8px; /*文字に影をつける x,y方向に1pxと1pxの位置で、ぼかしは2.8px*/
}
おわりに
今回は、テキストリンクを画像リンクのように見せる方法と、文字位置の調整方法を3通り紹介しました。3通りありますから、好みも分かれるでしょう。画像リンクには独特のフォントを使うことができるのが、最大の特徴です。しかしSEO上は、画像文字にalt属性を指定するよりもテキストの方が有利です。なので、特にフォントについてこだわりがない場合か、テキストデータとして検索エンジンに認識させたい場合では、今回紹介したようにテキストデータの背景に画像を設定するのがいいでしょう。
