DesignWalker

普段はそれほど気にならないのですが、リンク集のようにテキストリンクがリストのように羅列されているサイトでは、
CSSで訪問済み(visited)リンクを設定されていると、ユーザーにとっては一目でそのリンクをクリックしたかどうか分かるので、便利かも。

っちゅうわけで、CSSで訪問済み(visited)リンクをデザインしてみた。

1. 色を変えてみる
一番一般的な方法。多くのブラウザでは、リンクは、青の下線で表示されて、訪問済みリンクは、紫の下線で表示されてるのが一般的な感じ。

a:visited {color: #551A8B;}

サンプル↓（劇場映画[日本]･週間ランキング TOP5 2007年1月22日付）

1. 愛の流刑地
2. モンスター・ハウス
3. 硫黄島からの手紙
4. 武士の一分
5. 大奥

2. 打ち消し線を入れてみる
訪問済み(visited)リンクに打ち消し線を入れてみた。たまにこんなサイトを見るが。。。なんだか、リンクが無くなった感じがしないでもない。。。このまえ、他人のブログで、このブログが紹介されてたのですが…こんな感じ⇒「デザインウォーカー」になってて、ちょっぴり悲しい時だった。。。

a:visited {text-decoration: line-through;}

サンプル↓（劇場映画[アメリカ]･週間ランキング TOP5 2007年1月15日～17日）

1. Stomp the Yard
2. Night at the museum
3. The Pursuit of Happyness
4. Dreamgirls
5. Freedom Writers

3. 画像を入れてみる。
画像を使って訪問済みをデザインしてみる。リンク前は、普通のテキストリンクで、クリック後にテキストリンクの右側に、マークが現れる仕組み。なかなか、いい感じかも。。

ただ訪問済みリンクサンプル←が訪問済みリンクだと、ユーザーに理解されるのか？。。

a:visited {
margin: 0 3px 0 0;
padding: 0 13px 0 0;
background: right url(images/visited.gif) no-repeat #FFF;
}

サンプル↓（Billboard 週間ランキング TOP5 2007年1月27日付）

1. Irreplaceable – Beyonce
2. I Wanna Love You – Akon Featuring Snoop Dogg
3. Fergalicious – Fergie
4. Say It Right – Nelly Furtado
5. Smack That – Akon Featuring Eminem

おまけ. テキストを入れてみる。
インターネットエクスプローラー(IE)では、サポートされて無いようで。。FireFox,Opera,Safariで確認済みの方法をご紹介。。

CSSに書き込まれた文字列を表示することができる模様。CSSで、a:visitedの後ろに:afterって書くと、「訪問済みリンクの後に」とか、:beforeって書くと「訪問済みリンクの前に」といった感じになるようです。でもって、CSSの中身にcontent: “表示したい文字“;って書くと、”"で囲まれた部分に入力された文字列を表示できるようです。

a:visited:after {
content: " (←それもう見たよ) " ;
font-size: 75%;
color: #CC0000;
}

サンプル↓（オリコン･シングル年間ランキング･トップ10 2006年度）

1. Real Face – KAT-TUN
2. 粉雪 – レミオロメン
3. 青春アミーゴ – 修二と彰
4. 抱いてセニョリータ – 山下智久
5. SIGNAL – KAT-TUN
6. ただ…逢いたくて – EXILE
7. しるし – Mr. Children
8. 純恋歌 – 湘南乃風
9. supernova／カルマ – BUMP OF CHICKEN
10. タイヨウのうた – Kaoru Amane

デザインblogランキング