ブログの背景を変えると、イメージが一気に変わりますよね。

 


色を変えるだけでも印象は大きく変わりますし、背景に画像を入れるとさらに印象は変わります。

 

今回はアメブロの背景の設定方法でも、
背景に画像を使う方法についてお伝えしていきます。

 

アメブロ 背景画像の設定方法

背景を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。
 
CSSのコードは、デフォルトでは下記のようになっています。
 
 
/* (1-2) 基本背景
--------------------------------------------*/

/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}
 
 
そちらを、↓下記↓のように変更します。
 
/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
body{
background-color: #ffffff;
background-image: url(★);
background-attachment:fixed;
}
 
 

background-image: url(★);の★の部分に、背景画像をアップした際のURLを入力しましょう。

 

設置例

 
 
メニューバーから下に、背景画像が付きました。
 

背景画像を全体に設定する方法

上記の設定はヘッダー部分は影響しませんでしたが、次にお伝えするのはヘッダー部分込みで背景画像が反映する方法です。
 
/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}
 

background-color: #ffffff;の設定を、下記のように削除します

 

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
}
 
 
次に下記の部分を探して
 
/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #fff;
}
 
↓下記のように書き換えます↓
 
/* (1-2) 基本背景
--------------------------------------------*/

/* コンテンツ背景、ヘッダー以下の背景色 */
body{
background-color: #ffffff;
background-image: url(★);
background-attachment:fixed;
}
 

background-image: url(★);の
★の部分に、背景画像をアップした際のURLを入力しましょう。

 

完成例

 

 
こんな感じで全体に背景画像が入るようになりました!
 
お試しくださいチョキ
 

 

 

オンラインアシスタント・秘書 事務局代行 デザイン制作

irodori works

 

提供メニュー制作実績お問い合わせ