ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2014/05/23    投稿者:webコラム

　　　

こんにちは

　　

　　

ブログといっても、いろいろなものがありますが

アメブロ、正式には『アメーバブログ』はかなり人気の高いブログです。

　　　

最初のうちは、ブログを書くことを楽しんでいますが

少しずつ書くことに慣れてくると、デザインやバランスなどが気になり

それらを変更したくなってきますよね。

　　　　　

ある程度、既存のデザインなどを使うことで、変更はできますが

こんな風にしたい！　っというものには程遠いものです。

　　　

そこで今回は、変更方法のうち『背景色の変更』についてお伝えしたいと思います。

　　

　　　　　 　　　 　　　

　　　

　　　　　　　　 　　　

アメブロは最初から設定されているデザインや色の種類が多く その中にお気に入りがあれば、すぐに変えることができます。 まずは、デザインがあるものから選んでみて、 色が変わる場所を確認してみましょう。

　　　

色はデザインが保有しているイメージの色がつきます。

　　　　

お気に入りのデザインがあれば、それを使うことで 背景の色も同時に変更することができるようになっています。

　　　

　　　 　　　 　　　　

　　　 　　　　　　

ベースのページ全体に色を入れたい場合は、 CSSを触ることで変更することができるようになります。

　　　

しかし、使う色合いを間違ってしまうと せっかくのデザインが見づらいサイトになってしまいます。

　　　　

背景の色は、文字が見やすいような色を選ぶようにしましょう！　　　

　　　　　　　　

まずCSSの編集画面を開きます。

　　　　

ブログを書く 　

　↓

デザインの変更 　

　↓

CSSの編集画面 と移動します。

　　　　　　　

　　　 　　　

初めて触るので、新規の追加を選びましょう。

　　　　

追加を選んだら、下記のタグを入れます。

　　　　

　　　　

『＃99CC99』というのが色の指定になります。

　　　　

他の色にも設定ができますので、好きな色を選びましょう。

　　　　　

　　　　

body {

background:#FF0033;

}

　　　　　

　　　　　

CSS編集の一番最後に追加しますので スクロールして一番下にカーソルを合わせて入れます。

　　　　

背景に指定した#FF0033の色、

　　　　　　

　　　　

今回は赤を選んだので 真っ赤な背景が出来上がりました。

　　　 　　　　　

　　　 　　　　　　

　　　　　　　 　　　

　　　　　　　　　 　　　

　　　　　　　

　　　　

　　　　　

　　　　　　　　　　　　　　　　

　　　　　　　

３列カラムにした場合、トップ画像のある場所を含めて４ヶ所それぞれの色を変えることができます。

　　　　　

中心のメイン部分の変更は、タグ挿入のところに下記のように入れます

　　　　　

　　　　　　　　　　　　　　　　　　　

　　　　

　　　　　　　

.skinContentsArea{

background-color:#FF0033;

}

　　　　

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　

　　　　　

先ほど使った赤色を選んでいますので同じように赤くなりましたが、

色が入る場所が先ほどとは少し違い、メインの部分だけに色が入りました。

　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　

　　　

　　　　　　

サイドバーの各項目に色を入れたいときは

下記のように入れます。

　　　　　

.skinMenu,

.skinMenuHeader,

.skinMenuBody{

background:#FF0033;

}

　　　　　　　

色は同じく赤で設定しているので、

赤いサイドバーが枠ごとに完成しました。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　

　　　　　

　　　　　　

　　　　　　　　　　　　　

　　　　　

CSSの意味を理解すると簡単にできる！

　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　

CSSの意味を理解できるようになると

ブログのデザイン変更や、色、文字の大きさなどを

自由に変更することができるようになります。

　　　　　　　　

背景には色だけではなく、画像を入れることもできたりします。

　　　　　　　　　　　　　　　　　　

　　　　　

　　　　　　

こんなことがしたいなと思うことは、ほとんどできるので

アメブロ持ち前の、自由に遊べるデザインという特性を

思う存分、使ってみるのも楽しみのひとつです。