FC2ブログ

背景の詳細な設定方法 Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > templ8カスタマイズ >背景の詳細な設定方法

背景の詳細な設定方法

以前この記事→「ヘッダー部分(トップ部分)の背景を変える方法」で背景の設定方法は紹介しましたが、もう少し細かく設定方法を紹介します。

今度は市松模様のアイテム勢ぞろい!【市松屋】のフッターを実験台とします。

例えばフッターの背景を下のような市松模様にしたいと思っているとします。

そうした場合フッターの大きさの市松模様の素材を作るのかというとそうではありません。市松模様は一定のパターンでできた模様です。前回の記事のようなパターン化していない素材とは違います。作成する素材は以下のような小さなものでいいのです。

これをフッターに敷き詰めれば、フッター全域がひとつの大きな市松模様のブロックになりますよね。

それで設定方法です。まずは素材をアップロードします。そしてスタイルシートで、背景を白色にして、素材のURLを今回の素材のURLに変えて、あとは前回とまったく同じように設定してみます。
background:#FFFFFF url(http://blog-imgs-29.fc2.com/i/c/h/ichimatsu8/ichimatsu_w30x30.gif) no-repeat left top;
この状態でフッターを見た時の画像がこちらです→画像①
市松も模様が左にポツンとあるだけです。これは画像の背景の位置の設定で「left top」にしているからです。

無駄ですが、試しに背景の位置の設定を「left top」から「right bottom」に変えてみましょう。
その状態でフッターを見た時の画像がこちらです→画像②
当たり前ですが、画像が右の下のほうに移動しています。
何が言いたいかというと背景の位置を指定することで背景の位置が変わりますよ、ということです(当たり前のこと言ってますね...)。

今回やりたいことはことはこんなことじゃなくて画像を敷き詰めることでした。
背景の位置を「left top」に直して、次に設定するところは並び方の指定です。今の設定では「no-repeat」になっているところです。「no-repeat」は繰り返すな!ひとつだけ表示しろという意味です。前回の記事での画像はひとつ表示すればよかったですから「no-repeat」でよかったんですね。

並び方の指定ですが、「no-repeat」のほかに「repeat-x」「repeat-y」「repeat」があります。
試しに「repeat-x」で設定した場合の画像がこちらです→画像③
横一列だけ表示してますね。
逆に「repeat-y」だとこんな感じです→画像④
縦一列だけ並んでますね。

今回はフッター全体に敷き詰めたい(並ばせたい)ので「repeat」を指定します。もしも何も設定しない場合も「repeat」を指定したことになります。「repeat」を指定した場合の画像はこちらです→画像⑤
これでいちおう完成です。

背景の設定のおさらい
background:色 画像URL 並び方 位置;
例 background:#FFFFFF url(http://blog-imgs-29.fc2.com/i/c/h/ichimatsu8/ichimatsu_w30x30.gif) no-repeat left top;
色の指定:カラーコード(#FFFFFF、#0000FF、#FF0000、#000000など)やカラーネーム(white、blue、red、bkkackなど)で指定。
画像URL:url(画像URL) ←このように指定。
並び方:no-repeat(1つだけ表示)、repeat-x(横に並べる)、repeat-y(縦に並べる)、repeat(敷き詰める)のどれかで指定。
位置:横方向はleft(左)、center(中央)、right(右)で指定。縦方向はtop(上)、center(中央)、bottom(下)で指定。

2009/01/18 19:01 templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文: