ブログのタイトルに画像を設置するような場合、CSSで背景に画像を設定して、タイトルと説明をインデントでエリア外に飛ばして非表示にする方法がある。そこでさらに、画像の一部のリンクを別にするという方法について説明します。通常、ひとつの画像に複数のリンクをつけるときにはmapタグなどを使います。
【参考】HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト
しかし、CSSで背景に画像を設定している場合、この方法が使えません。そこで、a要素<a ...></a>を追加で記述してリンクを追加する方法を使います。
position:absolute;
top:10px;left:700px;
display:block;
width:300px;height:60px;
text-indent:-999px;
まず、positionプロパティにabsoluteを指定して、ブラウザの左上を起点としたリンクの開始位置を指定できるようにしたのち、開始位置を指定します。
【参考】ボックスの配置と基準：スタイルシート（CSS）辞典 - HTMLタグボード
次に、リンクに幅、高さを持たせるために、displayプロパティにblockを指定、幅と高さをしてします。
【参考】ボックスの配置と基準：スタイルシート（CSS）辞典 - HTMLタグボード
これでリンクは設定できますが、a要素の中身自体空白は望ましくありません。そのためにリンクのテキスト情報を記述しますが、そのテキスト自体は画面上は表示させたくないので、text-indentプロパティを使って表示領域外に飛ばします。
これで、別リンクの表示が可能になります。
