リンク文字の直後にアイコンを加える
ホームページ上では、PDFファイルへのリンクや、Microsoft Wordファイルへのリンクなど、HTMLではないファイルへリンクされることがあります。 気づかないでクリックすると、突然ソフトウェアが起動したりして、驚いたりいらだったりします。
そのようなことを防ぐために、HTMLではないファイルへリンクする際には、 「 アクセス解析結果（PDF） 」のようにカッコを使ってファイルの種類を記しておくと親切です。
「ただテキストで種類を書いておくだけでは芸がない…」と思う場合は、アイコンでリンク先の種類を示してみてはいかがでしょうか。 もちろん、「リンクの末尾に毎回画像を記述する」…などといった面倒なことは必要ありません。 スタイルシートを使って楽に実現してみましょう。
以下は、今回ご紹介する方法を使った例です。リンクの後に、種類を示すアイコンが付いています。
※上記のサンプル中のリンクは無効に設定してありますので、クリックしても移動しません。
背景画像と余白の指定を工夫する
上記のサンプルのように、リンク文字の直後に画像を表示させるには、スタイルシートを使えば簡単です。 背景画像の指定と、余白の指定を使います。
以下に、その方法を順に説明します。
■STEP.1 アイコンを背景画像にする
とりあえず、アイコンを背景画像にしてみましょう。 背景画像を指定するには、次のようにスタイルを記述します。
background-image: url("pdf.gif");
}
上記のソースでは、a要素（リンク）に対して、pdf.gif というファイル（ 
）を背景画像にしています。 この状態だと、リンクは次のように表示されます。
これでは、さっぱりダメですね。アイコンが、リンクの背景全体に繰り返して表示されてしまっています。
■STEP.2 背景画像の繰り返しをなくす
背景画像が全体に繰り返されるとマズいので、繰り返さないよう指定してみましょう。 背景画像を繰り返さないようにするには、次のように記述します。
background-image: url("pdf.gif");
background-repeat: no-repeat;
}
上記のソースでは、background-repeatプロパティに値「no-repeat」を指定することで、 背景画像を1枚だけ表示（＝繰り返さずに表示）するようにしています。 こうすると、次のような表示になります。
少し近づいてきました。アイコンの表示は1つになりましたね。 ただ、表示位置が望み通りの位置ではありません。
■STEP.3 背景画像の表示位置を右端にする
背景画像を1枚だけにした場合、標準では「左上」に表示されます。 ここでは、「右端」に表示したいですね。しかも、「右上」や「右下」ではなく、 「右端の（上下方向での）中央」に表示したいですね。
このような指定もスタイルシートを使えば楽々です。
background-image: url("pdf.gif");
background-repeat: no-repeat;
background-position: right center;
}
上記のように background-positionプロパティを使えば、背景画像の表示位置を微調整できます。 値は2つあり、「左右方向の位置」と「上下方向の位置」を指定できます。 上記の場合は、値に「 right center 」と記述していますから、「（左右方向に）右端＝right」で「（上下方向に）中央＝center」という指定になります。 こうすると、次のような表示になります。
さて、ずいぶん近づきましたが、まだ「リンク文字の下にアイコンが表示されている」（＝文字と画像が重なっている）という問題点があります。 「背景画像」として指定しているので、これは当たり前ですね。
このままでは困りますので、ちょっと工夫してみましょう。 スタイルシートで「余白」を活用します。
