リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。
サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。
li a {
padding-left: 25px;
line-height:180%;
background:URL(mark.png) no-repeat;
text-decoration:none;
}
li a:link, a:active {
color:#666;
}
li a:visited {
background-position: 0 -60px;
}
li a:hover {
color:#f33;
background-position: 0 -30px;
}リンク集やサンプル集等のリストが比較的長めのナビゲーションなどでは良心的かもしれない。画像非表示の環境じゃ意味ねぇじゃんってのは華麗にスルー。
Comments
Moo-TblogのKOuです。
これよさげー！！チェックです。
素敵です！
いつもここの記事には感動しています。
あー、こないだ ( http://www.lucky-bag.com/archives/2005/08/preload_hover.html ) :hover がどうとか言っていたのがこれにつながるわけですかー。
「画像非表示の環境じゃ意味ねぇじゃん」っていうのも、テキスト色を明確に区別すれば問題ないと思います。
「画像非表示の環境で区別できない」と、「画像表示の環境であればより明確に区別できる」というのは別ですし :-)
>>KOu さん
>>モカ さん
あっざーす！
そう言って頂けると嬉しいです :-)
>>真琴 さん
それは深読みっす :-D
実はつながりとかそんなに考えてなくて…
>「画像非表示の環境で区別できない」と、「画像表示の環境であればより明確に区別できる」というのは別ですし
そうか、言われてみればそうですね。
画像を使うことに主体を置いたアイデアで、なおかつ画像に依存したサンプルを作ってしまったのがいけなかった :-P
ナイスですね！
ついさっきまでトラックバックが自動でおくられているのを知らずおくってしまいました。
申し訳ございませぬ。
それはさておき、こういう訪問済みリンクの方法まったく思いもつきませんでした。
こんどHPをこの技術つかって改造してみます。
はじめまして。まるちと申します。
いろいろと参考になる記事が多く、柔軟な発想力に感動いたしました。とても素晴らしいと思います。私も真似をさせていただきます。
はじめてで大変失礼かもしれませんけど、こちらのブログに、当ブログからリンクをさせていただきました。これからもお伺いさせていただきますので、よろしくお願い申しあげます。
一つの背景画像の位置で見え方を変えるという発想、すごいですね。感動してしまいました！ (*^_^*)
私も自サイトで、外部リンクと内部リンクを区別するために backgroundを指定したことがあったのですが、悲しいかな、Windows IE6では途中で折り返されたときに、乱れてしまうんですよね。。。Firefox使いなのですが、シェアの違いを考えて対応をあきらめてしまいました。。。
せっかくの発想、なにかいい解決策があればいいですね！