背景に画像を使う

研究 で使っているエキサイトブログのアドレスは
http://tacogle.exblog.jp/です。
上記のサイトにここで行ったカスタマイズが反映されています。

*CSS編集を行う場合は必ず編集を行う前のCSSを保存しておきましょう。
そうしておけば何かあったときすぐに復旧できます。

ブログの背景がカラーコードで指定したベタな色じゃちょっと味気ないですね。
そんなときにはCSS編集をちょっといじって画像を背景として使ってみましょう。

まずは背景画像の入手です。
背景画像を無料でダウンロードできるサイトやジェネレーターを以下にいくつか載せておきます。

• DinPattern
  
• Kollermedia.at
  
• Squidfingers
  
• DROMOSCOPIO
  
• everyday icons Playground
  
• Stripe Generator
  
• Background Image Maker
  

気に入った背景画像が手に入りましたでしょうか？
では、ダウンロードした画像を載せた投稿（記事）を一本アップします。
投稿に背景画像を載せたくない場合は別のサーバーに画像をアップしてそのURLを下記の手順でCSSに貼り付ければ同様に背景画像としてページ上に反映されます。サーバーを持っていない方は下記の手順で。。。

2008.2.8
さきほど気づきましたが、HTML編集とCSS編集のところに「マイイメージアカウントにイメージ登録」というアップローダーがあるんですね、失礼いたしました。
個人的には投稿から拾っちゃった方が楽なので下記の方法で作業します。

投稿に載っている背景画像の上で右クリックしてその画像のURL（アドレス）をコピーします。

• インターネット・エクスプローラーの場合

プロパティを開きます。



プロパティが開いたら下の写真のようにURLのところを左クリックしたまま選択して（なぞって）コピーします。


• Firefoxの場合（こちらは圧倒的に簡単）

右クリックして開いたコンテキストメニューのなかにある「画像のURLをコピー」を左クリックすれば一発で画像のURLがゲットできます。

これで準備は整いました。
あとはエキサイトブログのCSS編集を開いて、「body」の「background」に
さきほどコピーしたURLを貼り付けます。
ちなみに昨日の時点ではこのようになっていました。

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	background-color:#FF0000;
	}

そのなかのbackgroundを以下のように修正します。

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	background: #FF0000 url(http://pds.exblog.jp/pds/1/200802/07/12/e0131412_1033337.gif) repeat top left;
	}

カラーコードを#FF0000のままにしておくとページが表示されるときに一瞬ですが赤い色が描写されてしまうときがあるので背景画像の色味に合ったカラーコードに変更しておいた方が無難です。何も指定しなければ白になります。

念のため部分的に抽出しておきます。

background: #カラーコード url(背景画像のURL) repeat top left;

URLの前後のカッコ()を忘れないようにしてください。最後にある「repeat」というのは「指定した画像を繰り返し描写してくださいね」という命令みたいなものです。

プレビューしてOKでしたら保存を押して終了です。

さらに背景画像を固定してみたい方はbodyを以下のように修正します。

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	background-image: url(http://pds.exblog.jp/pds/1/200802/07/12/e0131412_1033337.gif);
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;
	}

これで背景画像が固定されカラムのみスクロールされます。

注：背景画像を載せた投稿を削除すると画像も削除されてしまうみたいです。

Check

• エキサイトブログで果たしてエキサイトするか#1 (0)
• エキサイトブログで果たしてエキサイトするか#2 (0)
• エキサイトブログ (Exblog) のプチカスタマイズ #4 (0)
• エキサイトブログ (Exblog) のプチカスタマイズ #8 (0)
• ExblogにTwitterのつぶやきを載せられる? livedoorは? fc2は? (0)
• エキサイトブログ (Exblog) のプチカスタマイズ#9 (0)