訪問済みリンクを一工夫する

リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。

サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。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;
}

リンク集やサンプル集等のリストが比較的長めのナビゲーションなどでは良心的かもしれない。画像非表示の環境じゃ意味ねぇじゃんってのは華麗にスルー。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/94

日影にこそこそ - 訪問済みリンクを一工夫する (2005年9月 9日 15:59)

Lucky bag::blog: 訪問済みリンクを一工夫する (ネタ帳) いやは... 続きを読む

not-found blog - スタイルシートで一工夫。 (2005年9月10日 03:22)

こういう工夫の仕方は面白いね。 非常にわかりやすいと思います。 スタイルシートの... 続きを読む

Nanoseconds Diary - Lucky bag::blog: 訪問済みリンクを一工夫する (2005年10月12日 01:49)

Lucky bag::blog: 訪問済みリンクを一工夫する 訪問済みかどうかが視覚的に分かります。 こういうプロっぽいデザイン、あこがれるなぁ。 続きを読む

WEBサイト+phpリファレンス - リンクの色はどうしましょう? (2006年3月 2日 01:50)

『リンクの色は青色(#0000FF)に下線がいい』 という定説が昔からこの業界の定説であります。 個人的な意見で言うと最近はかならずしもYesと言えなく... 続きを読む

Comments

KOu said:

Moo-TblogのKOuです。
これよさげー!!チェックです。

モカ said:

 素敵です!
 いつもここの記事には感動しています。

真琴 said:

あー、こないだ ( http://www.lucky-bag.com/archives/2005/08/preload_hover.html ) :hover がどうとか言っていたのがこれにつながるわけですかー。
「画像非表示の環境じゃ意味ねぇじゃん」っていうのも、テキスト色を明確に区別すれば問題ないと思います。
「画像非表示の環境で区別できない」と、「画像表示の環境であればより明確に区別できる」というのは別ですし :-)

e-luck said:

>>KOu さん
>>モカ さん
あっざーす!
そう言って頂けると嬉しいです :-)

>>真琴 さん
それは深読みっす :-D
実はつながりとかそんなに考えてなくて…

>「画像非表示の環境で区別できない」と、「画像表示の環境であればより明確に区別できる」というのは別ですし

そうか、言われてみればそうですね。
画像を使うことに主体を置いたアイデアで、なおかつ画像に依存したサンプルを作ってしまったのがいけなかった :-P

waka said:

ナイスですね!

日影 said:

ついさっきまでトラックバックが自動でおくられているのを知らずおくってしまいました。
申し訳ございませぬ。

それはさておき、こういう訪問済みリンクの方法まったく思いもつきませんでした。
こんどHPをこの技術つかって改造してみます。

まるち said:

はじめまして。まるちと申します。
いろいろと参考になる記事が多く、柔軟な発想力に感動いたしました。とても素晴らしいと思います。私も真似をさせていただきます。

はじめてで大変失礼かもしれませんけど、こちらのブログに、当ブログからリンクをさせていただきました。これからもお伺いさせていただきますので、よろしくお願い申しあげます。

gertrud said:

一つの背景画像の位置で見え方を変えるという発想、すごいですね。感動してしまいました! (*^_^*)

私も自サイトで、外部リンクと内部リンクを区別するために backgroundを指定したことがあったのですが、悲しいかな、Windows IE6では途中で折り返されたときに、乱れてしまうんですよね。。。Firefox使いなのですが、シェアの違いを考えて対応をあきらめてしまいました。。。

せっかくの発想、なにかいい解決策があればいいですね!