カスタマイズ・ブログ素材

このページではフリーのブログ素材の配布を通してブログのカスタマイズに必要な知識を掲載していき、多くの方にブログのカスタマイズを楽しんで頂こうと考えています。奮ってブログのカスタマイズに挑戦して見てください。

※当サイトで配布しているフリー素材並びにカスタマイズ方法をご利用頂く場合は、お手数ですが１度「ブログ素材ご利用規約」をお読みください。利用規約と並記して、カスタマイズ講座についてなども明記してありますので宜しくお願いします。

もしも、当サイトで配布しているブログ素材に関して、ご質問やご要望などありましたらお気軽にコンタクトページよりお問い合わせください。

第２回目のブログカスタマイズは背景素材を使ったブログのカスタマイズです。対象者は前回お約束した通り【初級者】向けのカスタマイズの講座となっています。

まず、背景とは何かと言いますと、たとえば当サイトで言う所のブラウザのウィンドウ内の左右に表示されている薄い黄色にオレンジの斜線が描画されている部分は背景となります。

もしも背景を単色にする場合は画像素材を用意せず CSS 内で RGB などの数値だけで指定するのが一般的です。

しかし、２色以上や複雑な柄などは画像素材を用意し、それを CSS 内で任意の場所の背景に適用させます。つまり、上記しました当サイトの背景は HTML の BODY 要素の背景に画像を適用させています。

ここまでご覧頂き『難しそう』と感じた方が居ましたらどうぞご安心ください。

上記した用語などを覚えなくても以下の手順通りに行えば、BODY の背景のカスタマイズはご実現されると思います。

ただし、現在ご使用中のブログテンプレートによっては BODY の背景の変更に成功しても、他の要素（div 要素）などにドロップシャドウ（立体的に見せる為の影）などが背景として適用されている場合があります。そうしたテンプレートで余計な背景を削除したいとなると、ある程度の努力は必要になるかも知れません。

Step 1
それではまずお気に入りの背景画像を手に入れましょう。「背景」「素材」なんてキーワードで検索しても良いですし、ご自身で作って見るのも楽しいです。
また、背景画像をインターネット上で簡単に作成したり、他の方が作成した背景画像をダウンロードできる便利なサイトもありますよ。

海外のサイトですが、上のサンプルのようなストライプの背景画像を作成・ダウンロードできる Stripe Generator と、格子柄（タータンチェック）の背景画像を作成・ダウンロードできる Tartan Designer は有名なので、もしかしたらお気に入りの画像が見つかるかも知れません。

Step 2
お気に入りの背景画像はご用意できましたか？
それではその背景画像ファイルの拡張子をご確認ください。もしも「jpg、jpeg、gif、png」以外の拡張子でしたら、画像ソフトでフォーマットを何れかにして書き出してください。

また、ファイル名も分かりやすくしておくと今後の管理が楽になります。
※ファイル名は半角の英数字とアンダースコアとハイフンが使えます。拡張子を削除しないようご注意ください。

Step 3
背景画像の名前やフォーマット（拡張子）に問題がないようでしたら、お使いのブログのサーバーにアップロードしましょう。アップロードした画像の URL が後で必要になりますので、アップロードが完了しましたら画像の URL をコピーしておいて下さい。

Step 4
続いてご使用中のテンプレートの CSS を編集可能な状態にしてください。使い慣れたテキストエディタなどに CSS のソースを全てコピペして作業すると便利ですが、ブログの CSS 編集画面でも問題ありません。
※ご使用中のブログサービスによっては CSS を編集できない場合がございます。その時は残念ですが今回のカスタマイズは諦めてください。

Step 5
その CSS 内のおそらく上部に BODY に関する設定をしている body セレクタが見つかると思います。下のサンプルソースをご参考にされると分かりやすいかも知れません。

/*削除前*/
body {
	margin : 0;
	padding : 0;
	text-align : center;/*for IE6*/
	background : url("画像へのパス（ＵＲＬ）");
}

body セレクタが見つかりましたら、その中から background に関係するプロパティを見つけ削除してください。ご使用中のブログテンプレートによっては background-image プロパティ、 background-color プロパティなどの場合もございますが background-○○プロパティを全て削除してください。

/*削除後*/
body {
	margin : 0;
	padding : 0;
	text-align : center;/*for IE6*/
}

Step 6
background に関係するプロパティの削除が済みましたら、新しく背景の指定方法を body セレクタの中に追加します。お使いの背景画像にあった指定方法を下から見極め body セレクタの中に追加してください。
また、画像へのパス（ＵＲＬ）には Step3 でコピーして頂いた URL が入ります。

ウィンドウの縦横に敷き詰める背景画像の場合▼

background : url("画像へのパス（ＵＲＬ）");

ウィンドウの縦方向にだけ連続して表示させたい背景画像の場合▼

background : url("画像へのパス（ＵＲＬ）") left top repeat-y;

補足：left（左寄せ）の部分は center（中央寄せ）、right（右寄せ）にする事も可能です。repeat-y が縦に連続して表示させる為の指定です。

ウィンドウの横方向にだけ連続して表示させたい背景画像の場合▼

background : url("画像へのパス（ＵＲＬ）") left bottom repeat-x;

補足：bottom（下寄せ）部分は top（上寄せ）、center（中央寄せ）にする事も可能です。repeat-x が横に連続して表示させる為の指定です。

ウィンドウの１箇所にだけ表示させたい背景画像の場合▼

background : url("画像へのパス（ＵＲＬ）") 0 5px no-repeat;

補足：画像へのパス（ＵＲＬ）の後ろの0はXの値（左端からの横の数値）です。5px はYの値（上からの縦の数値）であり、5px のような絶対値による指定の他、％などのウィンドウサイズを基準とした相対値による指定も可能です。no-repeat が連続して表示させない為の指定です。

基本的には以上が大まかな背景の指定方法です。上記した CSS の指定方法は背景（background）をまとめて指定する方法ですが、それぞれの指定を細かく分けて記述することも可能です。

その用途は、例えばウィンドウの右下から画像を指定する時などに上記のまとめて指定する方法では分かり辛くなるので分けて指定します。

最後に、もしも背景をスクロールアウトさせたくない時、つまりウィンドウに固定したい時は background プロパティの値に fixed を追加することで実現可能です。

いかがでしたでしょうか？
背景の画像は body だけでなく CSS では様々な所に background が指定されています。ヘッダーやフッターなどの div の背景画像も指定方法は一緒ですので、今回のカスタマイズに成功された方は奮ってご自身のブログの色々な部分の背景画像の変更に挑戦してみてはいかがでしょうか？
それではお疲れさまでした。