個別記事

前後の記事

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

この記事が属するカテゴリー
CSS

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

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

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

2005-09-07T13:28:37+09:00 | コメント (8) | トラックバック (4) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/306

このリストは、次のエントリーを参照しています: 訪問済みリンクを一工夫する:

日影にこそこそ さんからのトラックバック
訪問済みリンクを一工夫する
Lucky bag::blog: 訪問済みリンクを一工夫する （ネタ帳） いやは... [続きを読む]
2005年09月09日 15:59
not-found blog さんからのトラックバック
スタイルシートで一工夫。
こういう工夫の仕方は面白いね。 非常にわかりやすいと思います。 スタイルシートの... [続きを読む]
2005年09月10日 03:22
Nanoseconds Diary さんからのトラックバック
Lucky bag::blog: 訪問済みリンクを一工夫する
Lucky bag::blog: 訪問済みリンクを一工夫する 訪問済みかどうかが視覚的に分かります。 こういうプロっぽいデザイン、あこがれるなぁ。 [続きを読む]
2005年10月12日 01:49
WEBサイト+phpリファレンス さんからのトラックバック
リンクの色はどうしましょう？
『リンクの色は青色（#0000FF）に下線がいい』 という定説が昔からこの業界の定説であります。 個人的な意見で言うと最近はかならずしもYesと言えなく... [続きを読む]
2006年03月02日 01:50

コメント

KOu さんからのコメント

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

2005年09月08日 13:56
モカ さんからのコメント

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

2005年09月08日 14:17
真琴 さんからのコメント [TypeKey Profile Page]

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

2005年09月08日 21:41
e-luck さんからのコメント [TypeKey Profile Page]

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

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

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

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

2005年09月08日 23:41
waka さんからのコメント

ナイスですね！

2005年09月09日 00:35
日影 さんからのコメント [TypeKey Profile Page]

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

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

2005年09月09日 22:00
まるち さんからのコメント

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

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

2005年09月10日 10:46
gertrud さんからのコメント [TypeKey Profile Page]

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

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

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

2005年10月15日 07:47

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)