あなたのブログをきれいにする方法教えます~ブログデザイナーヒナによるブログデザインQ&A~

2005/07/11(月)01:44

楽天広場カスタマイズ「背景画像を使うときの注意点について」

web制作(84)

おひさしぶりです! 今月は、週一~二くらいで、まったり更新する予定です。 で、このサイトも、そろそろデザインもあきてきたので、リニューアルしようとしてまして…。その様子なんかを書いてみるのも、みなさんのお役に立つかも?と思い…。 今日は、背景画像について…。 楽天広場では、管理画面の「メニュー>基本設定>デザイン設定>詳細設定(上級者用)」のリンク先で、サイトの背景画像を設定することができます。 この場合、注意すべき点として 1)設定した背景画像は、サイト全体に適用される(ページごとに別の背景にするのはできない仕様) 2)画像の位置指定、繰り返しなしなどの設定はできない。 →本来、HTMLでは、スタイルシートを使って、背景を一回だけ表示する、あるいは縦方向にだけ繰り返す、あるいは横方向にだけ繰り返す、という指定ができるようになっていますが、楽天広場では、これらの設定ができません。 3)背景に使う画像はあらかじめ、「画像倉庫」または「画像オプション」に追加しておく必要がある。外部のサイトにおいてある画像を背景にすることはできない。 現在の、このサイトで、左上に薔薇が表示されているのは、背景画像として設定しているわけですが、もし、この画像が、薔薇の大きさにぴったりなサイズで作られていたとしたら… 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 薔薇 こういう風に背景が繰り返されて表示されてしまうわけです。(画像つかって説明する手間を惜しんですみません) 本来は この「薔薇」の画像で 薔薇                        こんなふうに表示ができるはずなんですが、2)にあるとおり、楽天の仕様でできなくなっています。そこで↑のように、表示したいときには、しかたなく… 薔薇   ---------      ずっと空白        ------------->  ↓  ↓  ↓  ↓  ↓  空白                    というような、画像の横が真っ白(もしくは透明)の画像を作るのです。 だいたい横は1200px(ピクセル)くらい、縦は800pxくらいで作ると、横が繰り返されなくなります(見る人の画面サイズによります) あまり、大きく作っても、容量が大きくなり、表示に時間がかかって得策ではないのですが…。この際仕方ありません…。 縦は、どうしても、文章が長くなったりすると、どんどん画面が下に伸びますので、たとえば、このサイトを見ればわかるように、やっぱり下には薔薇が繰り返されています。 そこはあきらめて…。もともと 多少繰り返されても大丈夫な画像を使うしかないですね。 ちなみに…。 背景は、設定は簡単ですが、自作の画像でかっこよく見せるのはわりと難しいです。 小さい画像だと、どうしても繰り返されてしまい、うまく作らないと繰り返された画像の切れ目が不連続に見えたりしてかっこわるい…。 あるいは、背景の柄が邪魔になって本文が読みにくくなったりするという問題もでてきます。 文字の下に敷く場合には、どうしても可読性に支障がでますので、配慮が必要です。このサイトの例のように、ワンポイントのもの、あるいは 文字表示領域にかぶらない部分のみの画像…のようなものだとわりとよいかもしれません。 具体例は…… そのうち…。 【 ★今日の日記はいかがでしたか? お役に立てましたら、一日一票お願いします♪ 】 【 ★人気ブログランキング参加中。ただいまの順位は? 】 【ビジネス系のみの新しい注目ブログランキングにも登録してみました:鬼ブログランキング!】 ↑他の役立つブログも見に行ってみては??(クリックするとこのブログの応援になります!ヨロシク!) ホームページ作成・アフィリエイトなどPC関連書籍ベストセラーランキング!素材・テンプレートのベストセラーランキングホームページ作成ソフトなどインターネット関連ソフトベストセラーランキング!

続きを読む

総合記事ランキング

もっと見る