アメブロの背景色・背景画像を変える方法｜CSSコピペ＆動画で解説

動画で解説#

1.ページ全体に背景色を設定する方法#

管理画面→デザインの変更

CSSの編集をクリックします。

背景色は入力欄の中で2カ所修正する箇所があります。

アメブロの背景色を設定する方法#

1
/* (1-2) 基本背景
2
--------------------------------------------*/
3
/* コンテンツ背景、ヘッダー以下の背景色 */
4
.skin-blogBody, .skin-blogBodyInner {
5
background-color: #ffffff;
6
}

1
/* ヘッダー背景 */
2
.skin-bgHeader {
3
   background-color: #ffffff;
4
}

2.ページ全体に背景画像を設定する#

では背景画像を設定します。

ページ上の背景を画像の追加から背景画像のファイルを選択して、アップロードします。

画像を選択したらアップロードボタンをおしてください。

背景画像がアップロードされたところ。

CSSの入力エリアに下記のように
「background-image:url(画像へのパス);」というコードを追加します。

1
/* (1-2) 基本背景
2
--------------------------------------------*/
3
/* コンテンツ背景、ヘッダー以下の背景色 */
4
.skin-blogBody, .skin-blogBodyInner {
5
background-color: #ffffff;
6
background-image:url(画像へのパス);
7
}

※背景色は指定しても、画像で上書きされます。（画像が表示されてない時のみ、背景色が見える形です）

画像へのパスには上で追加した背景を画像のURLを貼り付けてください。

画像のパスを設定できたら、保存ボタンをおします。

ヘッダー下のエリアに背景画像が設定されました

応用編：いろんなパーツの背景色を変更する方法#

ここまでご紹介してきたやり方で、
ページ全体だけでなく、いろんな箇所の背景色を変えることができます。

Google Chromeを例に変更箇所の確認方法を説明します。

色を変えたい箇所をクリックして、右クリックしてみて下さい。
そして検証を押します。

そうすると、デバッグモードと言われるWEBの設定が確認できる画面が開きます。

右上の「要素を検査する」ボタンをクリックする来て色を変えたいパーツを選びます。

そうすると右に、その部分のスタイルを設定しているコードが選択されます。
上下にマウスを動かすと、選択箇所が変わるので、background-colorのコードを見つけましょう。

背景色を指定しているスタイルの名前(ここでは「skin-timelineDate」)をコピーします。

cssの入力欄でそのスタイルが設定されている場所を検索します。

その色コードを修正して保存します。

このように気になる箇所の色を調べて行動修正するを繰り返すとデザイン全体の色を自由に変えることができます。

まとめ#

いかがでしたか？

背景色や背景画像を設定して、ブログに統一感をだしてあげてくださいね！

その他にもアメブロカスタマイズの方法をご紹介しています！

自分でできる。アメブロのおしゃれなカスタマイズまとめ