アメブロを日々更新していると、
多くの人が色を変えたりヘッダー画像を変更したり、
自分オリジナルのアメブロにカスタマイズしたくなると思います。
自分のメディアを自分らしく変更して、
たくさんの人に読んでもらいたいですからね。
そこでこの記事では、
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」(オレンジ)に変更すると
このように簡単に色を変更する事が出来ます!
ぜひ試してみてください!