週末はずっと雨だったので、家に引きこもり状態でCSSをいじってカスタマイズしてみたんですが、ちょっとオシャレに、そして読みやすくなったでしょうか…？
フォントのカスタマイズ
以前 イメージチェンジした時 も紹介させていただいた、もそさんのブログ 今日の覚え書き はご存知の方も多いと思いますが、デザインをリニューアルされてさらに素敵になったオシャレなサイトなので、オシャレなブログにしたい！という方はぜひ覗いてみてください。
スタイルシートいじりの覚え書き を拝見して、もそさんがお気に入りフォントの組み合わせがとてもオシャレだったので、わたしも真似して“Tahoma & MS UI Gothic” に変えてみました。
このフォントはどちらかと言うと女性向きだと思いますが、文章を優しい感じに見せてくれるところが気に入りました。フォントを変えるだけでもずいぶんと印象が違って見えるものですね。
リンク色のカスタマイズ
デザイン的にリンクの下線はないほうが見た目はスッキリしますが、アクセシビリティ の低下にも繋がりますので、こちらの記事を読んで悩んだ結果、今回はサイドバーの下線だけ消すことにしました。
オトコのキモチ：リンクの下線を消したいって？
リンク部のテキスト装飾を変更するときには，そこがリンクであることが一目でわかるようにしておくことが重要。強調部や見出しもフォント色を指定したり，テキスト装飾をした場合，これらと区別がつけられること。リンクであることが読みとれるような何かがあるとなおよい。
たとえば，下線はそのひとつ。だから無闇にとってしまうことはすすめられない。
以前は下線付きで、#FF44F4をリンク色に指定していましたが、普段は不真面目なこの人→（*´・３・）にコメント欄でいいことを教えてもらいました。
前景色と背景色の明度差と色差も重要なポイント
（明度差は１２５以上、色差は５００以上）
ということらしいので、Color Contrast Checker でさっそくチェックしてみると、色覚異常の見え方ではテキストと同じ黒に見えることが判明。わたしにはピンクに見えても、この色だと下線がなければそこがリンクだとわかりません。色々悩んだ結果、（シャレではなく）リンク色を #FF3399 にしました。
背景色とリンク色 - 坂本邦夫の『基礎からわかるホームページの配色』
こちらのサイトで詳しく述べられているように、リンクに下線があることに越したことはありませんが、見栄えをスッキリさせたいという場合や、背景色やテキストの色を変える時には、色覚障害者や白内障の方への配慮も頭に入れておきたいと思いました。
すべての人が満足できるデザインというのは無理ですが、できるだけ多くの訪問者に優しいデザインを心掛けたいですね。
関連：背景色と文字色の見やすさをチェック
カスタマイズに便利なおすすめツールです。
jiwer5959さんのはてなダイアリー見たら点線になってましたね。
seesaaにもブログあったの知らなかった^^;
ここもベースは同じテンプレですよん。
また変更するかもしれませんが、背景もちょっと変えてみました。
コメントありがとう。
かなりすっきりしてヨサゲになりますたね。
jiwer5959さんがおっしゃられてるようにborder-bottomを使うと、また違ったデザインになりまつよ。
そりとか、display: blockでリンクボタン風にするとかね。
今後ともご指導よろしくお願いします。
W3C CSSぺったんこしますた。→
いつもはてブでお見かけしております。
また紹介していただいちゃってありがとうございます。
この前も照れたのですが、またもや照れ照れ状態ですっ。
このフォント、かわいいですよねぇ。
いろいろいじってみて、今は一番お気に入りです。
これでOpera でもちゃんと表示できれば満足なんですけどねぇ。バグ許せんっ。
わあああ、はじめまして。
はてブ見られてたとは（笑）
この縦長のフォルム、わたしもお気に入りです。
もそさんのブログで紹介されてるサイトやツールは、
「激しく使える」モノばかりで重宝させてもらってます。
CSSいじりだすと、止まりませんね。おかげで激しく寝不足です…。
これからもどうぞよろしくお願いします。
コメントありがとう。
Tahomaって英文フォントだと思うのですが、日本語はMS UI Gothic、英文はTahomaってことなのかな？なんにしても、MacのSafariではどう表示されるのか気になりますが。
＞これでOpera でもちゃんと表示できれば満足なんですけどねぇ。バグ許せんっ。
もそさんのコメントですけど、きちんと表示できてますよ。ちなみに、Opera9.0TP版です。Ver.8.5ではバグってるのかな。
そそ。日本語は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で確認していますが、これ以上は無理ぽ…。
コメントありがとう。
WinとMacじゃ組み込まれているフォントが違うし，MacもOS9まではOsaka主流だけど，OSXからはヒラギノ。font-family の指定は難しい。
たかがフォント、されどフォント
Ｍａｃのフォントってほんときれいだよね。
ＷｉｎとＭａｃ両方動くiMacほすぃ…。
コメントありがとう。