<< 表記の変更や、いらない箇所を削除しよう! | main | Pickup!UTF
「青空テンプレート特集」 >>

背景画像を変更しよう!!

PCテンプレカスタマイズ講座 第6回

前回のあらすじ

様々なカスタマイズをこなし、着実にステップアップしているロベポリ! 最終回の今回は、背景画像の変更にせまります!!



さて今回はいよいよ背景画像の変更にチャレンジしてみるよ!

この間TOP画像を変更した時に、もっと色々出来るって言ってたじゃないですか? もったいぶらずに教えてくださいよう。

例えば、ページ全体に背景画像を設定したい場合は、ものすごーい大きな画像を用意しなくちゃいけないの?

その必要はないよ!トップ画像の時は、同じ大きさの画像を用意して置き換えたけど 背景画像は自動的に繰り返したりして表示することができるんだ。

自動的に繰り返す???

つまり、大きな画像をわざわざ用意しなくても、小さな画像を用意すれば、その画像を 繰り返し表示して背景画像とすることが出来るんだよ。

それって具体的にはどういう画像なんですか?

ここでもテンプレート「custom」を例に見てみよう。「custom」では、細かい点々が描いてある小さな画像を水平垂直方向に繰り返し表示しているんだよ。

なるほど!こんな小さな画像を繰り返し表示してたってわけだ。

あとはポリンちゃんが好きそうなチェック柄やストライプ柄なんかも、この繰り返しを使えば 簡単に背景画像になっちゃうってわけ。ただちょっと画像の作り方にはコツがいるんだけどね。

簡単に背景画像が作れちゃうジェネレーターを活用しちゃおう!

Stripe Generator
Tartan Background pattern generator
Tiled backgrounds designer
Dotted Background Generator



あ!また質問なんですけど、大きな画像を右下あたりに固定して表示されているテンプレをutfで見たことがあるんですけど、あれはどうやって固定しているんですか??

あれはCSSで指定しているんだよ。こんな感じで。

▼背景画像を固定するサンプル

※「custom」の場合は「body」のところに書いてください

こうやって指定すれば、スクロールしても画像は固定されたままなんですね!

▼背景画像を右下に固定した場合のサンプル
クリックしてテンプレを確認

いろいろできて便利ー!背景画像って一言でいっても色々なパターンがあるんですね

背景画像は組み合わせ次第で色々な見せ方が出来るから色々試してごらん!

・背景色の指定
・背景画像を水平垂直方向に繰り返す
・背景画像を垂直方向に繰り返す
・背景画像を水平方向に繰り返す
・背景画像を繰り返さない
・背景画像を固定する
・背景画像を右下に配置
・背景画像を左上に配置

もっと知りたいときは検索してみると情報が出てくるよ!例えば、背景のことを知りたかったら、「CSS 背景」で検索すればいいし、書かれているCSSで意味がわからないものが出てきたらその名前(例えば「background-position」とか)で検索してみよう。

自分で調べた方が忘れないし、ちゃんと理解できるものね。

さて、今回のカスタマイズ講座は一旦ここまで! 日本橋先生の素材を使ってカスタマイズしたロベくんはコンテストに応募、オリジナル素材で作ったポリンちゃんはutfに公開しちゃおう。

先生ようやくカスタマイズの面白さがわかってきたのにこれでおしまいなんですか?

私たちもっと勉強したいよう!!

そこは安心して。継続今後もカスタマイズ講座はもちろんしていくよ。 それまで二人ともしっかり勉強を続けていくようにね!!

わかりました!!

JUGEMユーザーのみなさんからのカスタマイズ講座でやってほしい要望は 引き続き受け付けますので、ぜひコメントくださいね!

おまちしておりまーーす!!


▼現在ブログデザインコンテスト実施中!▼

コメント
管理者の承認待ちコメントです。
  • -
  • 2009/10/13 6:17 PM
管理者の承認待ちコメントです。
  • -
  • 2010/01/02 10:45 PM
管理者の承認待ちコメントです。
  • -
  • 2014/01/03 2:20 PM
コメントする
※JUGEMの機能に関するご質問などはお問い合わせフォームまでお願いします。









この記事のトラックバックURL
トラックバック
関連の記事

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索