ひなこの楽天web制作研究所

今日は、段落に背景を設定してみます。

こんな感じです。

見るからにださださの背景をあえて設定してみました。ハイそこ、デザイナーのセンスを疑わないように。

と、とりあえずまずはタグの説明から

楽天で使う場合は、まず背景の画像を画像倉庫に入れます。そして、そのURLをメモ。

スタイルシートで

background-image: url(http://rakuten なんとかかんとか/000.gif);

のように指定します。バックグラウンドイメージ、コロン、ユーアールエル

念のため、すべて半角英数字で記入ね。空白もカッコもね。

あと、url()とhttpとの間に空白を入れないようにね。

上記のソースをまとめてかくとね。

<p style="padding:15px; border:double 3px #993399; background-image: url(http://comic-arts.net/_img/tmp/heart.gif);">

こんな感じです。

</p>

です。

で、ここで、どうですか背景を設定するときには、画像がダサいとやらないほうがましな感じになりますよね？　しかも、しかも、画像によってはとても字が読みにくくなりますよね？

初心者にありがちな間違い。楽しく背景設定してみたけど、とても文字が読みにくくなる…。それは。

まずは配色。

上の例で言うと、ハートのピンクが濃すぎるのね。背景の城とのギャップがおおきいでしょ。(専門用語でコントラストがきついという）

逆に言うと、コントラストを下げる、ピンクを薄くするとよいです。たとえば、

こんな感じです。

どう、ちょっとは読みやすくなったでしょ。

とは言ってもですね、まだまだです。というのは、根本的に、大きい画像を背景にすると、どうしても文字が読みにくくなります。

文字の下に敷く場合には、ラインとかドットなどの、地味な画像をコントラストを落として使用するほうがよいかな～と。

たとえば

こんなラインで。

は～い。きょうはこの辺で～。