アメブロを日々更新していると、
多くの人が色を変えたりヘッダー画像を変更したり、
自分オリジナルのアメブロにカスタマイズしたくなると思います。
自分のメディアを自分らしく変更して、
たくさんの人に読んでもらいたいですからね。
そこでこの記事では、
CSSの変更で誰でも簡単にできる
アメブロの背景色を
変更する方法を整理しました。
CSSを変更する場所に移動
まずは管理画面内のデザイン変更画面に移動します。
下記赤枠内の「デザインの変更」をクリック。
そして、下記「CSSの編集」をクリックします。
ここで「CSSの編集」が表示されていない場合は、デザインテンプレートで『CSS編集用デザイン』が適用されていません。
デザインの変更で『CSS編集用デザイン』を選択するようにしましょう。
表示されたページにて赤枠内の編集を行います。
ちなみに編集前のブログの状態（『CSS編集用デザイン』のデフォルトの状態）下記のようになっています。
具体的なCSS変更箇所は?
CSS内の下記の部分を探して変更すればOK!!
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
全体の色を変更する方法
上記の「.skinBody」「.skinBody2」「.skinBody3」のどれでもOKです。
変更したい色を指定します。
.skinBody{background-color:#ffa500;}/* ←ブログ全体に背景を敷きたいとき */
「#ffa500」はオレンジ色で変更した例です。
この部分をお好みの色に変更します。
（色はこちらのサイトが参考になります。⇒原色大辞典）
このように変更すると、下記のように本当に全体に色がついてしまい、ブログ本文部分の文字も読みにくくなってしまいます。
ヘッダー部分とコンテンツ部分は文字を見やすいように背景を変更する必要があります。
ヘッダー部分の色を変更する方法
具体的に変更する部分は下記になります。
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
下記のように「.skinHeaderArea」に色を指定します。
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-color:#FFF;}/* ←ブログヘッダーに背景画像を敷きたいとき */
コンテンツ部分の色を変更する方法
/* (3-3) コンテンツエリア
--------------------------------------------*/
/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
}
下記のように「.skinContentsArea」に色を指定します。
/* (3-3) コンテンツエリア
--------------------------------------------*/
/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{background-color:#FFF;
/* 注 ベースのcssにwidth:980px;の記述有り */
}
このように色を指定する事で、
しっかりと見やすいブログになりますね。
CSSにて色を指定した部分を
background-image:url(画像へのパス);
で指定すると画像を表示させる事も可能です。
このようにする事で、更に見栄えをカスタマイズする事が可能です。