背景素材を利用してのブログの作り方
ブログに背景素材をリピートして設定する手順はこのような感じになります。
- 背景画像を探す
- 素材をアップロードする
- スタイルシートに設定
画像を探す場合、無料での配布サイトもたくさんありますが、私の場合はたいてい購入しています。
fotolia や iStockphoto などで、2000円もだせば、10枚ぐらいはゲットできるのではないかなと思います。
無料での素材サイトもたくさんありますので、著作権を確認してダウンロードしておきましょう。
２．背景素材のアップロード
通常の写真をブログにアップロードするのと同じ要領で、素材画像をアップロードします。
当ブログで利用しているbloggerの場合、画像をアップロードし、画像のみを表示させ、その場所のＵＲＬをスタイルシートに設定してみるといいかもしれません。
アップロードした画像のＵＲＬさえ確認できればＯＫです。
３．スタイルシートへの設定
bloggerで設定する場合、「デザイン - htmlの編集」で、body の箇所に次のように設定するとよいでしょう。
background-image:url(素材のＵＲＬ);
background-repeat:repeat;
background-position: top center;
marginなど、もとから body { }の中に書かれているのはそのままで、上の箇所を追記する形で設定します。
当サイトの場合はこんな感じです。
body {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDouVufb1493b46b6a6iN3F1szpRUeCTrrQVADH9ar28S1Fw1nl1VRK3Tz4-zgkSZGgET6PkoROtr06xN-jJyxQ-kwgyTX-lCV8U02MctIPsfyC-Tf2iXp4In0-1FdVf3_9ojq7bDjj1k/s320/bg1.jpg);
background-repeat:repeat;
background-position: top center;
}
指定したＵＲＬの画像を、縦・横にリピートさせてブログの全面に敷き詰める形になります。
この場合、ブログのコンテンツの部分は白色に指定しておかないと、ブログ全体に背景素材が設定されてしまうので注意しましょう。
コンテンツの箇所を白に設定する場合は、outer-wrapperの背景色に白を指定しておくとよいかと思います。
#outer-wrapper {
background:#ffffff;
}
背景素材を使うとカスタマイズの幅が広がりますね。