2006-04-03 Mon

フォントとリンク色のカスタマイズ RSS あとで読む kwout this!

color

 週末はずっと雨だったので、家に引きこもり状態でCSSをいじってカスタマイズしてみたんですが、ちょっとオシャレに、そして読みやすくなったでしょうか…?

 

フォントのカスタマイズ

 以前 イメージチェンジした時 も紹介させていただいた、もそさんのブログ 今日の覚え書き はご存知の方も多いと思いますが、デザインをリニューアルされてさらに素敵になったオシャレなサイトなので、オシャレなブログにしたい!という方はぜひ覗いてみてください。

 スタイルシートいじりの覚え書き を拝見して、もそさんがお気に入りフォントの組み合わせがとてもオシャレだったので、わたしも真似して“Tahoma & MS UI Gothic” に変えてみました。

 このフォントはどちらかと言うと女性向きだと思いますが、文章を優しい感じに見せてくれるところが気に入りました。フォントを変えるだけでもずいぶんと印象が違って見えるものですね。

リンク色のカスタマイズ

 デザイン的にリンクの下線はないほうが見た目はスッキリしますが、アクセシビリティ の低下にも繋がりますので、こちらの記事を読んで悩んだ結果、今回はサイドバーの下線だけ消すことにしました。

オトコのキモチ:リンクの下線を消したいって?
リンク部のテキスト装飾を変更するときには,そこがリンクであることが一目でわかるようにしておくことが重要。強調部や見出しもフォント色を指定したり,テキスト装飾をした場合,これらと区別がつけられること。リンクであることが読みとれるような何かがあるとなおよい。
 たとえば,下線はそのひとつ。だから無闇にとってしまうことはすすめられない。

 以前は下線付きで、#FF44F4をリンク色に指定していましたが、普段は不真面目なこの人→(*´・3・)にコメント欄でいいことを教えてもらいました。

前景色と背景色の明度差と色差も重要なポイント
 (明度差は125以上、色差は500以上)

ということらしいので、Color Contrast Checker でさっそくチェックしてみると、色覚異常の見え方ではテキストと同じ黒に見えることが判明。わたしにはピンクに見えても、この色だと下線がなければそこがリンクだとわかりません。色々悩んだ結果、(シャレではなく)リンク色を #FF3399 にしました。

背景色とリンク色 - 坂本邦夫の『基礎からわかるホームページの配色』
 こちらのサイトで詳しく述べられているように、リンクに下線があることに越したことはありませんが、見栄えをスッキリさせたいという場合や、背景色やテキストの色を変える時には、色覚障害者や白内障の方への配慮も頭に入れておきたいと思いました。

 すべての人が満足できるデザインというのは無理ですが、できるだけ多くの訪問者に優しいデザインを心掛けたいですね。

関連:背景色と文字色の見やすさをチェック
カスタマイズに便利なおすすめツールです。

del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(11)  | TrackBack(0)  | 03 Color*.
Comments
僕は、リンクの下線が気になるときは、"border-bottom"を利用して点線にしています。
jiwer5959 at 2006-04-04 18:29
■jiwer5959さん
jiwer5959さんのはてなダイアリー見たら点線になってましたね。
seesaaにもブログあったの知らなかった^^;
ここもベースは同じテンプレですよん。
また変更するかもしれませんが、背景もちょっと変えてみました。
コメントありがとう。
らぶ at 2006-04-04 19:31
(*´・3・)お呼びでせうか?
かなりすっきりしてヨサゲになりますたね。
jiwer5959さんがおっしゃられてるようにborder-bottomを使うと、また違ったデザインになりまつよ。
そりとか、display: blockでリンクボタン風にするとかね。
(*´・3・) at 2006-04-04 21:34
先生ありがとうごぜーます。
今後ともご指導よろしくお願いします。
W3C CSSぺったんこしますた。→
らぶ at 2006-04-05 11:46
ふおおお、はじめまして!
いつもはてブでお見かけしております。

また紹介していただいちゃってありがとうございます。
この前も照れたのですが、またもや照れ照れ状態ですっ。

このフォント、かわいいですよねぇ。
いろいろいじってみて、今は一番お気に入りです。
これでOpera でもちゃんと表示できれば満足なんですけどねぇ。バグ許せんっ。
もそ at 2006-04-07 10:58
■もそさん
わあああ、はじめまして。
はてブ見られてたとは(笑)

この縦長のフォルム、わたしもお気に入りです。
もそさんのブログで紹介されてるサイトやツールは、
「激しく使える」モノばかりで重宝させてもらってます。
CSSいじりだすと、止まりませんね。おかげで激しく寝不足です…。
これからもどうぞよろしくお願いします。
コメントありがとう。
らぶ at 2006-04-07 20:14
>Tahoma & MS UI Gothic
Tahomaって英文フォントだと思うのですが、日本語はMS UI Gothic、英文はTahomaってことなのかな?なんにしても、MacのSafariではどう表示されるのか気になりますが。

>これでOpera でもちゃんと表示できれば満足なんですけどねぇ。バグ許せんっ。
もそさんのコメントですけど、きちんと表示できてますよ。ちなみに、Opera9.0TP版です。Ver.8.5ではバグってるのかな。
ゆっきー at 2006-04-08 09:08
■ゆっきーさん
そそ。日本語はMS UI Gothic、英文はTahoma

スタイルシートのフォント指定は
font-family : 'Hiragino Kaku Gothic Pro W3', 'Osaka',
Tahoma, 'MS UI Gothic', 'Lucida Grande', sans-serif;

となっているので、
MacではOsakaで表示されると思います。
OperaVer.8.5では、MS UI Gothicは表示されないし、
サイドバーのバナーなどの位置もちょっとずれてしまいます。
プニルとFireFoxで確認していますが、これ以上は無理ぽ…。
コメントありがとう。
らぶ@管理人 at 2006-04-08 18:43
デザインの一部としてフォントをとらえると,WebではPC環境で意図したとおりに見られていないということは多々ある。で,MS UI Gothic の入っていないPCで見たら,らぶの意図は伝わらないわけだ。
WinとMacじゃ組み込まれているフォントが違うし,MacもOS9まではOsaka主流だけど,OSXからはヒラギノ。font-family の指定は難しい。
無義 at 2006-04-08 23:32
(*´・ิ3・ิ)ノふぁい。ワタクシも無義さんに同意でつ。
(*´・ิ3・ิ) at 2006-04-09 12:54
■無義
たかがフォント、されどフォント
Macのフォントってほんときれいだよね。
WinとMac両方動くiMacほすぃ…。
コメントありがとう。
らぶ at 2006-04-09 13:28
Add Comment
Name:

URL:

Comment:

Trackback
この記事へのトラックバック

人気エントリー Top 10
MoMAstore
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。