アメブロを日々更新していると、
多くの人が色を変えたりヘッダー画像を変更したり、
自分オリジナルのアメブロにカスタマイズしたくなると思います。
自分のメディアを自分らしく変更して、
たくさんの人に読んでもらいたいですからね。
そこでこの記事では、
CSSの変更で誰でも簡単にできる
アメブロのサイドメニューの色を
変更する方法を整理しました。
CSSを変更する場所に移動
まずは管理画面内のデザイン変更画面に移動します。
下記赤枠内の「デザインの変更」をクリック。
そして、下記「CSSの編集」をクリックします。
ここで「CSSの編集」が表示されていない場合は、デザインテンプレートで『CSS編集用デザイン』が適用されていません。
デザインの変更で『CSS編集用デザイン』を選択するようにしましょう。
表示されたページにて赤枠内の編集を行います。
ちなみに編集前のブログの状態（『CSS編集用デザイン』のデフォルトの状態）下記のようになっています。
具体的な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」（オレンジ）に変更すると
（色はこちらのサイトが参考になります。⇒原色大辞典）
サイドメニューのタイトルに背景を敷きたいとき
CSSの下記の部分を変更します。
background:#E4E4E4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
「#E4E4E4」→「#ffa500」（オレンジ）に変更すると
サイドメニューの本文に背景を敷きたいとき
CSSの下記の部分を変更します。
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
「#ffffff」→「#ffa500」（オレンジ）に変更すると
このように簡単に色を変更する事が出来ます！
ぜひ試してみてください！