文字は隠さないが、リンクのようには見えなくする隠しリンクの作り方
CSS(スタイルシート)を使えば、マウスポインタの形状を変更することもできます。リンク文字の装飾を通常の文字と同じように変更した上で、マウスポインタの形状も通常の文字と同じにすれば、ブラウザ上ではリンクのようには見えなくなります。前ページでご紹介したソースに1行を追記するだけで作れて、ほんの少しだけ見つけにくくなります。A. マウスポインタの形状も含めて普通のテキストと同じに見える隠しリンク
B. 少しだけ見つけやすくした隠しリンク
■A：マウスポインタの形状も含めて普通のテキストと同じに見える隠しリンクの表示例：
ここに隠しリンクがあります。
上記の「隠しリンク」の文字だけがリンクになっています。配色が通常の文字と同じなので見た目ではリンクに見えません。また、リンクの上にマウスポインタを載せても、ポインタの形状が指差しマークなどには変化せず、Iビーム(テキスト選択用の縦棒)のままなので、クリックできるようには見えないでしょう。しかし、HTMLで作られたリンクであることに違いはないので、マウスポインタを載せれば、ステータスバーやウインドウの下端などにリンク先のURLが表示されます。■A：この隠しリンクの作り方：
方法は前ページでご紹介したソースとほぼ同じです。まず、HTMLソースは以下のように記述しておきます。
ここに <a href="hide.html" class="hidelink2">隠しリンク</a> があります。上記では、リンクを作るa要素に「hidelink2」というclass名を付加しています。次にCSSソースを以下のように記述します。
<style type="text/css">
.hidelink2 {
text-decoration: none; /* リンクの下線を消す */
color: black; /* 文字色を黒色にする */
cursor: text; /* マウスポインタの形状をテキスト選択用にする */
}
</style>
上記のCSSソースでは下記の3つのプロパティを使っています。
- text-decoration: none;
リンクの下線を消します。 - color: black;
文字色を黒色(black)にします。 - cursor: text;
マウスポインタの形状をIビーム(テキスト選択用の縦棒)にします。
cursorプロパティを使えばマウスポインタの形状を変更できます。上記のように値「text」を指定すればテキスト選択用の縦棒になりますし、値「default」を指定すれば標準の矢印になりますし、値「wait」を指定すれば砂時計や回転する円形などのビジー状態を示す形状になります。リンクに載せた際などに使われる指さしマークにするには、値「pointer」を指定します。
※参考：cursor - MDN
■B：少しだけ見つけやすくした隠しリンクの表示例：
ここに隠しリンクがあります。
上記の「隠しリンク」の文字だけがリンクになっています。マウスポインタを載せてもポインタの形状は変わりませんが、下線が付加されるので先程よりは見つけやすいでしょう。■B：この隠しリンクの作り方：
先程の方法に加えて、リンクの上にマウスポインタが載った際の装飾を記述するだけです。まず、HTMLソースは以下のように記述しておきます。
ここに <a href="hide.html" class="hidelink2B">隠しリンク</a> があります。上記では、リンクを作るa要素に「hidelink2B」というclass名を付加しています。次にCSSソースを以下のように記述します。
<style type="text/css">
/* ▼リンクの配色 */
.hidelink2B {
text-decoration: none; /* リンクの下線を消す */
color: black; /* 文字色を黒色にする */
cursor: text; /* マウスポインタの形状を「text」にする */
}
/* ▼リンクにマウスが載った際の配色 */
.hidelink2B:hover {
text-decoration: underline; /* 下線を加える */
}
</style>
前ページでもご紹介したように、hover疑似クラスを使って「リンクにマウスが載った際の装飾」を加えています。ここでは、リンク文字に下線を付加しているだけです。この隠しリンクの見つけ方・攻略法
上記でご紹介した「マウスポインタの形状も含めて普通のテキストと同じに見える隠しリンク」も、前ページでご紹介した方法と同様に、作るのも簡単で見つけるのも簡単です。見つけ方はいろいろありますが、例えば以下の方法が使えるでしょう。- ページのHTMLソースを表示する
この隠しリンクは単に配色を変更しただけであって、リンクそのものはHTMLのa要素(＝aタグ)を使って作られています。したがって、HTMLソースを見て「<a href="～"……」という記述を探せば、すべてのリンクを探せます。 - TABキーを連続で押していく
多くのブラウザでは、[TAB]キーを押す度にリンクや入力欄などを順番に移動できます。ブラウザによっては、そのとき選択状態になっているリンクを点線などで囲んで表示するため、配色やマウスポインタの形状に関係なくリンクを見つけられます。 - CSSを無効にしてみる
ブラウザの機能などでCSSを無効にすれば、リンク文字は標準の装飾が適用されて表示されるため、簡単に見つかります。 - リンク一覧を表示する
後述のアドオンなどを使って、ページ内のリンクを一覧表示させれば、もっと簡単に見つかります。
次に、画像の一部分だけをリンクにすることで見つけにくくするリンクをご紹介いたします。
