2014年9月9日火曜日

HTML 外部リンクへのアクセス状況を色で表示

この Blog  ( Blogger ) もそうですが、外部リンクに対して、表示色を変えて 履歴の視認性を上げているものが多いですね。
投稿を書いていると、既に、機能的に盛り込まれているので、苦労する必要はありません。
でも、自分で作ったローカルの HTML ファイルの場合、この様な 気の利いた 仕組みは、自分で書き足す必要があります。


通常の投稿のみを書いている方の場合には、全く無駄と言うか、関係ないので、参考としてお読み下さい。


通常、外部リンク (ハイパーリンク) は、何も指定しなければ、 過去の履歴や状態に応じた 表示文字色に違いはありません。
Blog サービス等で、これらが実現出来ているのは、テンプレートや CSS 等で指定がされているからですね。
     と考えれば、有難い事です。  Blogger さま そして Google さま に感謝!


色指定が以下の前提の場合には、

設定種別指定概要
まだ見ていないリンクa:link{color:;}
既に見たリンクa:visited{color:;}
カーソルが上にある場合   a:hover{color:ピンク;} 
リンクを選択した時a:active{color:;}

なお、この例では、極端な色にしていますが、実際の利用では 普段の見慣れた 色 に置き換えて下さい。
HTML のコードは こうなります。
 <style type="text/css">
 <!--
        a:link {color:#ff0000;}
        a:visited{color:#008000;} 
        a:hover{color:#ff00ff;} 
        a:active{color:#ffff00;} 
 -->
 </style>
もしくは、
 <style>
     a:link {color:#ff0000;}
     a:visited{color:#008000;} 
     a:hover{color:#ff00ff;} 
     a:active{color:#ffff00;} 
 </style>

但し、記述時の各項目の順番は重要で、この順序を守って下さい。



また、履歴の状態把握は、各ブラウザがサポートしてくれますので 、特に何も書かなくてもちゃんと動きます。

PC 上の各ブラウザには、方言と言うか、サポート範囲に微妙な誤差が存在する様なのですが、
この書き方の場合、大きな誤差はない様です。
若干のマウスの挙動に対する反応が違うとも言われていますが、確かめてはいません。

履歴、つまり、リンクを辿った事があるか否か は、各ブラウザに保存されている 一時ファイル や Cookie に基づいています。
ですから、履歴を残さない プライベート・ブラウジング機能 を利用している場合には、そのセッションの中だけで有効な履歴となります。
つまり、初期状態は、履歴なし です。 (プライベートでないブラウザで閲覧していても です。)
この辺りも、ブラウザ や その マイナーチェンジで、微妙な違いが発生する可能性があります。.



0 件のコメント:

コメントを投稿