ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

背景画像について

ホームページの外側に見える背景画像(ない場合もあり)を削除or変更する説明をします。
今回はtp_fudosan4_green01テンプレートを見本にします。

実際に見てみると、ウィンドウの上部にお花の写真が入っているのがわかりますね。
このようにHPブロックの外側に見えている画像や色はほとんどがcssフォルダ内のstyle.cssのbody項目内で設定されています。

このテンプレートの場合、以下が該当箇所です。

右側に説明が入っているように、赤枠の1行目が背景画像の読み込み。次がリピートに関する指定、次が配置場所に関する指定になります。これは3行に分かれて指定がされていますが、以下のように1行にまとめることもできます。

backgroundのみで一括指定してあります。当サイトのテンプレートも分かれているものと1行にまとまったものとバラバラなのでどちらも覚えておくといいでしょう。尚、どちらの方法も同じ意味を持つのでどっちかがベストという事はありません。

背景画像を外したいなら

以下のようにすればOKです。

背景を外した画面です。

補足:背景画像の配置について

背景画像は単にしきつめるだけではなく、位置や並び方の指定が可能です。
補足として簡単に説明しておきます。

わかりやすいように丸い背景画像を使ってみます

以下の画像をそのまま使ってみてもOKです。今回のテスト用のtp_fudosan4_green01のimagesフォルダに入れておきます。

背景画像をstyle.cssに読み込みます。

../images/~~と入っていますが、これはこのstyle.cssの位置から見た画像フォルダの場所です。../というのは、1個上の階層という意味で、「1個上の階層にあるimagesフォルダ内のsample_bg.gif」という意味になります。../../images/~~になれば2個上の階層のimagesフォルダという意味になります。同じフォルダ内に画像が存在する場合、images/~~でOKですが、当サイトのテンプレートは../images/という階層になっているものがほとんどです。

プレビューで見てみましょう。

わかりやすい壁紙を使った為、かなり印象は悪いですが…並び方はわかりますね。

配置方法アレコレ。1個だけ配置する方法。


にすると、以下のようにリピートなし(no-repeat)、左(left)、上(top)に配置されます。

他にも、leftやtopやcenterを使って色々な位置に壁紙を配置する事ができるので試してみましょう。

配置方法アレコレ。横並び・縦並びさせる方法。


にすると、以下のようにX軸にリピート(repeat-x)、左側(left)を壁紙の基準にし、上(top)に配置されます。
これも色々な位置に壁紙を配置する事ができるので試してみましょう。

■縦並びにするなら…repeat-yと指定します。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP