サイドメニューの色を変える方法(アメブロCSSでカスタマイズ)

アメブロを日々更新していると、
多くの人が色を変えたりヘッダー画像を変更したり、
自分オリジナルのアメブロにカスタマイズしたくなると思います。
 
自分のメディアを自分らしく変更して、
たくさんの人に読んでもらいたいですからね。

 
そこでこの記事では、
CSSの変更で誰でも簡単にできる 
アメブロのサイドメニューの色を
変更する方法を整理しました。
 

CSSを変更する場所に移動

まずは管理画面内のデザイン変更画面に移動します。
下記赤枠内の「デザインの変更」をクリック。
img_ameblo_sidemenu01
 
そして、下記「CSSの編集」をクリックします。
 
ここで「CSSの編集」が表示されていない場合は、デザインテンプレートで『CSS編集用デザイン』が適用されていません。
 
デザインの変更で『CSS編集用デザイン』を選択するようにしましょう。
 
img_ameblo_sidemenu02
 
表示されたページにて赤枠内の編集を行います。
 
img_ameblo_sidemenu03
  
ちなみに編集前のブログの状態(『CSS編集用デザイン』のデフォルトの状態)下記のようになっています。
 
img_ameblo_sidemenu04
 

具体的なCSS変更箇所は?

CSS内の下記の部分を探して変更すればOK!!

/* (3-8) サイドバー メニュー
--------------------------------------------*/

/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#F7F7F7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}

/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#E4E4E4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}

/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}

 

サイドメニューに背景を敷きたいとき

CSSの下記の部分を変更します。

background:#F7F7F7;/* ←サイドメニューに背景を敷きたいとき */

「#F7F7F7」→「#ffa500」(オレンジ)に変更すると
 
(色はこちらのサイトが参考になります。⇒原色大辞典
 
img_ameblo_sidemenu06
  

サイドメニューのタイトルに背景を敷きたいとき

CSSの下記の部分を変更します。

background:#E4E4E4;/* ←サイドメニューのタイトルに背景を敷きたいとき */

「#E4E4E4」→「#ffa500」(オレンジ)に変更すると
 
img_ameblo_sidemenu07
 

サイドメニューの本文に背景を敷きたいとき

CSSの下記の部分を変更します。

background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */

「#ffffff」→「#ffa500」(オレンジ)に変更すると
 
img_ameblo_sidemenu08
 
 
このように簡単に色を変更する事が出来ます!
ぜひ試してみてください!

無料PDFダウンロード