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

 

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

 

今回はアメブロの背景の設定方法でも、色コードを変えるだけでできる色変更についてお伝えしていきます。

 

アメブロ 背景の設定方法

背景を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。
最初は下記のような設定になっています。
 
/* コンテンツ背景、ヘッダー以下の背景色 */
skin-blogBodyInner {
background-color: #ffffff;
}
 
 
こちらを↓下記↓のように変更します。
 
/* (1-2) 基本背景
--------------------------------------------*/
/*ヘッダー以下の背景色 */
.skin-blogBody {
background-color: #ffffff;
}

/*コンテンツ背景 */
skin-blogBodyInner {
background-color: #ffffff;
}
 
これをさらに設定したい背景色を色見本から選びます。
 

background-color: #ffffff; の#ffffffのところの色を変えましょう

 

 
試しに色を設定してみます。
 

/* (1-2) 基本背景
--------------------------------------------*/
/*ヘッダー以下の背景色 */
.skin-blogBody {

background-color: #e6e6fa;
}

/*コンテンツ背景 */
skin-blogBodyInner {
background-color: #e6e6fa;
}

 

作例

 

 

はい、このように下の色が変わりました。
 

ヘッダー部分の背景色

 
次に、ヘッダー部分の背景色の変更方法を載せてみます。
 
/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}
 
ヘッダーの背景色の変更は↓下記↓になります。
 

background-color: #ffffff; の#ffffffのところの色を変えましょう

 

ブログナビの背景色変更

ブログナビとは、カスタマイズで設置するナビメニューではなく、既存のナビです。
 
ブログトップ・記事一覧 とか書いてあるあれです。
 
 
* (3-3) ブログナビ
--------------------------------------------*/
/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
 

border-color: rgba(0, 0, 0, 0.2);はblogナビの線の色
background-color: #ffffff;は背景色です。
それぞれを色見本から色を選びましょう