ブログの背景を変えると、イメージが一気に変わりますよね。
色を変えるだけでも印象は大きく変わりますし、背景に画像を入れるとさらに印象は変わります。
今回はアメブロの背景の設定方法でも、背景に画像を使う方法についてお伝えしていきます。
目次
アメブロ 背景画像の設定方法
背景を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。
基本設定は、こちらです。
アメブロカスタマイズをする際の基本手順
※背景画像は、こちらのサイトに色々出ていますよ。
ヘッダー下に背景画像を設定する
CSSのコードは、デフォルトでは下記のようになっています。
1 2 3 4 5 6 7 | /* (1-2) 基本背景 --------------------------------------------*/ /* コンテンツ背景、ヘッダー以下の背景色 */ .skin-blogBody, .skin-blogBodyInner { background-color: #ffffff; } |
そちらを、↓下記↓のように変更します。
/* (1-2) 基本背景
——————————————–*/
1 2 3 4 5 6 | /* コンテンツ背景、ヘッダー以下の背景色 */ body{ background-color: #ffffff; background-image: url(★); background-attachment:fixed; } |
background-image: url(★);の★の部分に背景画像をアップした際のURLを入力しましょう。
背景画像を全体に設定する方法
上記の設定はヘッダー部分は影響しませんでしたが、次にお伝えするのはヘッダー部分込みで背景画像が反映する方法です。
1 2 3 4 5 6 | /* (2-1) ヘッダー背景 --------------------------------------------*/ /* ヘッダー背景 */ .skin-bgHeader { background-color: #ffffff; } |
background-color: #ffffff;の設定を下記のように削除し
1 2 3 4 5 | /* (2-1) ヘッダー背景 --------------------------------------------*/ /* ヘッダー背景 */ .skin-bgHeader { } |
下記を入力します。
1 2 3 4 5 6 7 8 9 | /* (1-2) 基本背景 --------------------------------------------*/ /* コンテンツ背景、ヘッダー以下の背景色 */ body{ background-color: #ffffff; background-image: url(★); background-attachment:fixed; } |
background-image: url(★);の★の部分に背景画像をアップした際のURLを入力しましょう。
このように必要な部分のみ背景画像が入ります。
