アメブロの「CSS編集可能デザイン」に画像背景を設置

アメブロの「CSS編集可能デザイン」に画像背景を設置する方法

こんにちワ。ワンタンです。

わてくちめ、ここのところ自分が、このブログに書いてきたアメブロのカスタマイズ方法みたいなのをちょびっと整理などをしておりまして^^;


ここのところ、こんな記事を書いたであります（↓）。

1.アメブロの既存のデザインからCSS編集用デザインに変更する
2.アメブロにヘッダー画像を設置する
3.ブログタイトルと説明文を消してリンクにする
4.ヘッダー上の隙間を詰める

で、もう一つだけ、たぶんカスタマイズの初歩的一歩だと思うんですが、ブログ全体に背景画像を設置する方法を御案内しておきたいと思います。

小さめの画像を横一列や、縦一列に並べたり、あるいはタイル状に敷き詰めたりと方法はイロイロありますが、オーソドックスにデジカメやスマホで撮影した画像を固定して背景画像にする方法です。

こんな感じになります（↓）。

↓

※背景に使った画像は、こちらです（↓）。（Hタグで縮小表示させてます。）

アメブロの「CSS編集可能デザイン」に画像背景を設置する方法

以下のコードをCSSの末尾に追記して下さい。

/*ブログ全体背景画像；03:09*/
.skinBody{
background:url(https://farm9.staticflickr.com/8655/16575595270_c0d8e1d67f_b.jpg);
background-repeat : repeat ;background-attachment : fixed ;
}

※上のコードの赤字の画像ＵＲＬを御自身が表示させたい画像の画像ＵＲＬと差し換えて下さい。

※参考⇒背景画像サンプル

〇思うこと
デジカメやスマホで撮った写真を画像投稿サイトのフリッカーとか、あるいはドロップボックス等にアップして、その画像URLさえ取得すれば、この方法で簡単にお好みの背景画像を設定出来ます。

独自のデザインの個性的なブログが出来上がると思います。

☆ブィブィ  ('-^*)/

Station cat....OMG!! ^^;

ね！？

表示 - 継承 2.1