2006/06/16
【MovableTypeをおしゃれにカスタマイズ♪】NO.13 ■読みやすい文字の大きさと色
━━━━━━━━━━━━━━━━━━━━━━━━2006.6.16━━━ 「MovableTypeをおしゃれにカスタマイズ♪」〜 NO.13 〜 MovableTypeをデフォルトからのカスタマイズを実況中！ http://movabletype.gift-select.com/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ こんにちわ！ ビズコム盛り上がってますね♪ 私もついていかなきゃ〜(*^-^) ■読みやすい文字の大きさと色■ サイトに来てくれたかたに「戻る」ボタンを押されないためには、 読みたくなるような記事が書いてあることが大切なのはもちろんですね。 これにプラスして、読みやすいレイアウト、読みやすいカラーであるこ とも大切だと思ってます。 ●まず、文字の大きさ。 これはスタイルシートで固定しないほうがいいといわれてますけど 私は文章は12pxにしています。 私的には、これより小さいとかなり読みづらいですし、大きいと画面 に表示されるテキストの量が少なくなるので、テキストが多い場合 ページが長くなってしまいます。 ●次に背景色。 私は背景色は白もしくはそれに近いトーンにしています。 デザインや色の組み合わせで悩むなら、白にしちゃいましょう♪ サイトの内容によっては、いろんな色のイメージがあると思いますが 自分が読んでチカチカしない、というのを基準にしてみるといいと思 います。 ●お次はテキストの色 私の場合、背景を白にしてるので、テキストは濃いグレーにしてます。 カラーコードだと#444444くらい。真っ黒だと強すぎるので・・・。 あまり薄すぎても読みづらいです。 リンクの色は青にしてます。←コレ大事です！ 青だとコレがリンクされてるってほとんどの人が直感的にわかります。 そしてもうひとつ、リンクの文字にカーソルを乗せたときの色は オレンジっぽい色にしてます。 これ、アマゾンと一緒なんです(^^; 大勢の人が見慣れているサイトは「色の組み合せ」「レイアウト」など 読みやすいサイト作りのヒントの宝庫です。 色や文字の大きさに悩んだら、いつも見ているサイト、読んでストレス を感じないサイトをお手本にしてみることをオススメします♪ MovableTypeのカスタマイズのお役にたてる メルマガ＆サイトを目指してますｐ(^-^)ｑ ご意見・ご要望・ご感想・質問・リクエストなど info@gift-select.comまでどうぞ(*^^) ■今日の小技 これからのHTML■ カスタマイズするときにHTMLを記述することも多いですね。 これからHTMLの部分記述するときには 次のことを覚えておいてくださいね。 どうしてかというと、XHTMLとかXMLとか難しい話になってしまうので とりあえず今後のために良いということです(^^; 難しいことはありません。 今までのことをちょっと気をつけるだけでOKです♪ ・すべて小文字で記述する 例）× <A HRDF="〜 ○ <a href="〜 ・属性の値は必ず引用符で囲む 例）× color=#ffffff ○ color="#ffffff" ・終了タグを省略しない 例）× <p> ○ <p>〜</p> ・空要素のタグは />で閉じる 例）× <br> ○ <br/ > とりあえず、こんなところです(*^-^) ねっ、難しくないでしょ♪ 最後まで読んでいただいて、ありがとうございました♪ わかりづらいところもあると思いますので、メルマガやブログの内容で 意味不明の部分がありましたら質問してくださいね。 盛り上がってるビズコムへ登録はこちらから http://itbizcom.jp/ YUのビズコムページはコチラです http://itbizcom.jp/?m=pc&a=page_f_home&target_c_member_id=248 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MovableTypeをおしゃれにカスタマイズ♪ http://movabletype.gift-select.com 発行者：YU info@gift-select.com 発行システム：『まぐまぐ！』 http://www.mag2.com/ 配信中止はこちら http://www.mag2.com/m/0000194715.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
