アメブロ全体に色(背景色)を付ける | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

初期状態のままだと非常に殺風景なアメブロのデザインに、背景色を付けて、ちょっとオシャレにする方法を御案内してみたいと思います。
(自分のデザインセンスは、問題外の外ですが・・汗(;^_^A)

アメブロ

アメブロの全体に背景色を付ける方法

下図は、まったくカスタマイズをしてないままのアメブロのデザインですが、なんとも殺風景なのであります。

渡辺麻友


ブログ全体に背景色を付ける方法です。

(1)デザインを[CSS編集デザイン]にする。

[マイページ]→[ブログを書く]→[デザインの変更]→[カスタム可能]→[CSS編集用デザイン]の順に進んで、ブログデザインを[CSS編集用デザイン]にして下さい。
(※すでにCSSでデザインのカスタマイズをされてる方は、失敗した時のために、CSSをパソコンのメモ帳等にコピーして保存しておく事を御勧めします。デザイン変更するとデータが初期の状態にリセットされてしまいますので。)

渡辺麻友


(2)CSSの末尾に以下のコードを追記する。

「CSS編集」の末尾に、以下のコードを追記して下さい。

/*全体の背景色 05/26*/
.skinBody{
background-color:#66FFFF; /*全体背景色、水色*/
}

.skinHeaderArea,.skinContentsArea{
background-color:#ffffff; /*記事、サイドバー背景色*/
}


こうなります(↓)。

渡辺麻友



※上記コードの赤字部分のカラーコードを、お好みの色のコードに変えて下さい。

**参考**
色見本と配色サイト - color-sample.com


○思うこと
記事の内容を重視して、デザインはシンプルにされている方って以外と多い気がしますが、この程度のカスタマイズなら、逆に閲覧者さんが記事を読み易くなったりするのでは?と思います。


※追記:記事を読み易い書体にする方法⇒メイリオフォントにする


☆ブィブィ ('-^*)/


そういえば、悪いこと、しちゃったかしら?