リンクを目立たなくする方法

Web

はてなダイアリーではキーワードというシステムがあり、特定の言葉に自動的にリンクが張られます。これを利用して、ある言葉を使ったエントリーの一覧が見られるなど便利な点もあるのですが、文章を書く側が意図しないリンクは目障りだという考え方もあります。そのため、キーワードリンクをなくす方法も提供されていますが、その場合キーワードシステムからの恩恵も部分的になくなってしまうため、キーワードリンクは残しつつ表示上のみリンクを目立たなくするという選択肢があります。このページでもそのような設定を行っています。

元の文字が黒い場合、CSSで次のように設定すればキーワードリンクを目立たなくすることができます。*1

a.keyword {
 color: black;
 text-decoration: none;
 border: none;
}

本当に区別がつかなくなってしまうと困る場合には、色を調整したり、下線を付けたりすると良いでしょう。また、必要なら:linkや:visitedを付けて個別に設定することもできます。

さて、ここからが本題なのです。上ではキーワードリンクを黒に設定しました。しかし、何らかの理由で黒以外の文字色を使いたいこともあるかもしれません。例えば、緊急を要する事項については、特に強調するため赤い文字にしたいとしましょう。

strong.kinkyu {
 color: red;
}

このkinkyuクラスstrong要素の中でキーワードリンクが登場した場合、前の設定によって黒い文字になってしまいます。これでは、キーワードリンクを目立たなくするという当初の目的が達成されません。これを回避することは、kinkyuクラスstrong要素内のキーワードリンクの文字色を改めて設定し直せば可能です。

strong.kinkyu a.keyword {
 color: red;
}

しかし、同じように文字色を変える部分が多数あるときは、このようにいちいち文字色を指定するのは面倒ですし、誤りを生む原因になりかねません。そこで、CSSではこのような場合に利用できる「inherit」という値が用意されています。

a.keyword {
 color: inherit;
}

このように指定すると、キーワードリンクはその外側の文字色と同じ色が使われるということが明示的に示され、外側の色が変わったらそれに連動してリンクの色も変更されることになります。これがリンクを目立たなくする最もスマートなやり方です。

ところが下記のページによると、WindowsのIEはこの書き方に対応していません。せっかく使える機能があるのに、実装されていないのは残念なことです。文法的には正しいので、inheritを利用することはその意味では問題ないのですが、現実的にはWindowsのIEを無視するのは難しいでしょう。

inheritをあきらめるなら、初めに書いた泥臭いやり方に頼らざるを得ません。この場合、新しいクラスで文字色を変える設定をするたびに、キーワードリンクの文字色も変更することを覚えておかなければならないわけです。私だったら忘れてしまうと思います。

そこで、もう少し別の方向から考えてみます。文字色を変える理由は様々ですが、どのような理由にせよめまぐるしく色を変えることは好ましくないと考えられます。ベースとなる文字色が一つあり、文字色が変更されるのは文章中のごく一部分というのが通常でしょう。だとするなら、その部分だけキーワードリンクを抑止しても弊害はほとんどありません。キーワードリンクが生じないならリンク色の問題もなくなります。私はこれが最もわかりやすい対策ではないかと思います。なお、キーワードリンクを抑止する方法については下記の項目をご覧下さい。

ここで考えたことは、「教えてはてなダイアリー」経由でhttp://d.hatena.ne.jp/lenno/20040226を見たことをきっかけに、もう少し一般性を持たせて記述したものです。inheritが有効に使える場合としてわかりやすかったので取り上げてみました。

*1:テーマによっては、これ以外の設定が必要な場合もあります。