ページの背景に画像を表示する方法

今回は、「livedoor blogカスタマイズ講座」を臨時講義します。

当講座を受講されている生徒さんから、livedoor blog のカスタマイズ方法について掲示板で質問がありましたので、早速、ご質問にお答えします。

【質問内容】 livedoor blogの「crimsonテンプレート」において、ページ左右の余白スペースだけに背景画像を入れたいのですが可能なことなのですか？（一部修正） 【使用ブログ】 livedoor blog　「crimsonテンプレート」 【質問者】 フナ＠無名さん「晴天日和」

【回答】
可能です。

具体的に、下記のようなレイアウトにおいて、ページの背景に画像を表示する方法について説明します。

livedoor blog　「crimsonテンプレート」を使用されている場合は、タイトル部分の背景画像も調整する必要がありますので、その対処方法もあわせて説明します。

タイトル サイドバー エントリー（記事）

では、「ページの背景に画像を表示する方法」について説明します。

■ CSS（スタイルシート）の編集方法
ページの背景に画像を入れるには、「スタイルシート」を編集します。
livedoor blog　「crimsonテンプレート」のスタイルシートを見ていただくと、下記のような記述がされていますね。

＜スタイルシート＞

body{ background:#000 url('/_img/crimson.jpg') no-repeat scroll 50% 0%; }

それを、下記のように修正します。
赤色の部分を修正、あるいは、追加してください。

body{ background:#000 url('背景画像のURL') repeat; } #container{ background:#000; } #banner,#subbanner{ background:#000 url('/_img/crimson.jpg') no-repeat scroll 50% 0%; margin:0px; } .blogtitle{ margin:0px 0px 0px 20px; padding:50px 0px; }

■ 修正内容・解説
bodyタグの背景として指定されていた画像を、タイトル部分（#banner）に移動し、今回、表示したい画像を、bodyタグの背景として指定しています。

しかし、このテンプレートの場合、本文やサイドバーなどの背景にも、画像が表示されますので、#container内で、背景色（黒色）を指定することで解決します。

また、タイトル部分の背景画像が、タイトル文字の高さ分しか表示されませんので、タイトル文字の余白（上下）をとることで調整しています。

編集後は「保存」して、スタイルシートを「再構築」すると、ブログに反映されます。

以上、「ページの背景に画像を表示する方法」について説明しました。

今回は、急きょ内容を変更しまして、「livedoor blogカスタマイズ講座」を臨時講義しましたが、近日中に「livedoor blogカスタマイズ講座」を開講しますので、是非、livedoor blogユーザーの方は受講してくださいね。

質問も掲示板で受け付けています。

1クリックの応援で、質問に丁寧にお答えします＾＾