BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ・背景色を変える方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ・背景色を変える方法

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

haikei.jpg

   

こんにちは

  

  

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

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

   

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

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

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

     

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

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

   

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

  

             

   

既存のデザインから選んでみよう

            

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

   

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

    

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

   

            

CSSを操れると、自由自在に

          

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

   

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

    

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

        

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

    

ブログを書く  

 ↓

デザインの変更  

 ↓

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

       

       

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

    

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

    

    

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

    

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

     

    

body {

background:#FF0033;

}

     

     

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

    

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

      

    

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

         

          

           

             

       

midasi.jpg

    

     

カラムの場所ごとにも色の変更が可能に

                

       

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

     

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

     

                   

    

       

.skinContentsArea{

background-color:#FF0033;

}

    

                

                

     

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

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

   

                               

                         

   

      

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

下記のように入れます。

     

.skinMenu,

.skinMenuHeader,

.skinMenuBody{

background:#FF0033;

}

       

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

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

                             

              

     

まとめ

      

             

     

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

                 

                 

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

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

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

        

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

                  

     

      

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

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

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

カテゴリ:

TOPへ