初心者に分かりやすい
ホームページ作成
ブログ(レビュー カメラ 写真)
無料CGI(Perl/PHP)配布
写真

 

 

 



 

  上手に壁紙を使いましょう

 

  ページが表示され際、画像よりもテキストの方が先に表示されます。当然、この「画像」には「壁紙」も含まれるのですが、そのことが生かされてないサイトをたまに目にします。

 例えば、青系の壁紙を使って下のようなページを作ったとしましょう。

Cool and Cool Cool and Cool

ようこそ、クールアンドナッツへ。

 

 このページではわざとボディタグの背景色の指定をしていません。これをサーバーにアップすると、実際に表示されるページは、壁紙が表示されるまでの間、このような感じになります。

Cool and Cool Cool and Cool

ようこそ、クールアンドナッツへ。

 つまり、壁紙が表示されるまで、背景はグレーで表示されるのです(見る人のパソコンの設定によってはグレー以外の色になることがあります)。この例はまだ文字数が少ないので、そうでもないのですが、これが1ページ丸ごとだと、壁紙が表示されるまでの間、目がチカチカするページになる恐れがあります。これを避けるには、ページに壁紙を使った場合、そのページの背景色は壁紙の色に似た色をきちんと設定しておけばいいのです。

 たとえばこの場合、青系の壁紙を使っているという想定なので、背景色にも青系の色を設定しておきます。そうすれば、壁紙が表示されていない段階でも、

Cool and Cool

ようこそ、クールアンドナッツへ。

 このように問題なくきちっと読めるようになります。なお、壁紙の色をボディタグで指定するには、画像の色を読みとってカラーコードを表示してくれるRGBエステというソフトを利用すると楽です。

 

 また、壁紙が表示されてない状態で見にくいページがあり、「きっと壁紙が表示されたら見やすいんだろうなぁ」、と待っていると、もっと見にくくなる二段オチのようなサイトもたまにあります。もちろん、それでも我慢して読んでくれる訪問者もいるでしょうが、逆に、「見にくいならいいや」とブラウザを閉じてしまう訪問者もいます。読み手に優しいホームページを作りたいものですね。

 

  どうしてもこの壁紙を使いたい

 「どうしても、この見にくい壁紙を使いたい」、ということもあるでしょう。そういうときは、テーブルタグを利用して、文字部分だけ見やすい背景色や壁紙を使いましょう。

 例えば、以下のような壁紙を使ったとします。明るいところと暗いところが存在する壁紙は、文字色を選ぶのが難しく、どうしても一部分文字が読めなくなってしまいます。

こういう白と黒が入り交じった画像が
一番難しい。どうしても使いたいというなら、、

 こういう場合は、次のように背景色を指定したテーブルタグを使い、文字はそのテーブルタグの中にいれるようにしてみましょう。

 

文字の部分だけテーブルタグで
保護すればこのとおり。

 

 なお、2重にテーブルタグを使っていると、ネットスケープでそのページを表示した場合に、バージョンによっては内側のテーブルの背景色が上手く反映されないことがあります。そんな場合は、背景色の代わりに背景画像を指定してみて下さい。

2重にテーブルタグを使っている場合は

ネスケは背景色指定が反映されない場合があるので、この部分にも背景画像を指定する。

 

 

 また、慣れてくれば、画像のコントラストや明るさを調整して、より「壁紙向き」に加工することも可能です。たとえばこちら、見るからに壁紙に不向きの画像ですが、

結構読みにくいぞ、これ。結構読みにくいぞ、これ。
結構読みにくいぞ、これ。結構読みにくいぞ、これ。

結構読みにくいぞ、これ。結構読みにくいぞ、これ。
結構読みにくいぞ、これ。結構読みにくいぞ、これ。

結構読みにくいぞ、これ。結構読みにくいぞ、これ。
結構読みにくいぞ、これ。結構読みにくいぞ、これ。

 明るさを70あげて、コントラストを40下げてみると、けっこう見やすくなります。

結構読みにくいぞ、これ。結構読みにくいぞ、これ。
結構読みにくいぞ、これ。結構読みにくいぞ、これ。

結構読みにくいぞ、これ。結構読みにくいぞ、これ。
結構読みにくいぞ、これ。結構読みにくいぞ、これ。

結構読みにくいぞ、これ。結構読みにくいぞ、これ。
結構読みにくいぞ、これ。結構読みにくいぞ、これ。

 

 

[ 戻る ]

 


人気記事ランキング
   

サイトマップ
コンタクト

文章や画像等の無断利用・転載はご遠慮ください。
当サイトへのリンクは原則フリーです。どのページにリンクされても構いません。
Copyright © CoolandCool. All rights reserved.