秋に近づき秋刀魚が美味しくなる季節と思うとよだれが出てしまうタマネギボムです＾＾
今日はアメブロ横についている、サイドバーの編集をしたいと思います。
もともとの色はグレーですが、さすがにちょっと味気ないですよね。
サイドといえど、やはり色を変えて少しでもブログを綺麗に魅せれるよう
CSSを編集してサイドバー部分の色を変えてしまいましょう！
というわけで、デザインの編集→CSSの編集で編集画面を開きます。
次にCSS編集エリアから以下のような部分を探してください。
/* (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タグがあってごちゃごちゃしていますね＾＾；
上の色字で分けた部分がありますがそれが以下のように対応しています。
それでは実際にCSSを編集してどうなるか実験してみましょう。
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{
background:#0000FF;
}
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#088A29;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#CC2EFA;/* ←サイドメニューの本文に背景を敷きたいとき */
}
上のようにCSSを編集しました。
それでは実際のブログをみてみましょう。
下の部分に赤線が残ってしまってますが、基本的には下の画像のようなイメージです。
CSSタグを使って色を変えるという指定を『skinMenu2』の部分にもしましたが
今回のただ色を変えるというだけならば、編集する必要はないです。
さて上の色のままだとさすがに違和感がありすぎるので、いい色調を探して編集します。
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#AEFF42;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{
}
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#FFCA42;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}
それではCSSで編集した僕のブログを見てみましょう。
これで特に違和感ない綺麗にブログにできたかなと思います。
『skinMenuBody』の部分であるサイドメニュー本文は基本的には白がいいと思います。
自分の作りたいブログで不自然ではない場合や、どうしてもここに色を付けたい
そう思うのなら仕方ありませんが、ここの部分を先ほどの紫などにしてしまうと
あなたのブログを読んでくれる読者が、サイドバーなどを単純に見にくくなってしまい
あなたの名前や最新記事のリンクが読みにくいですよね。
アメブロデザインや記事を書くときもそうですが、どうせなら読者にとって
読みやすいサイトを心がけて作った方が良い印象を受けますよね。
そういう心がけをすれば、自分の作ったブログを何度も見てもらえるようになりますよ♪
それでは最後まで読んで頂きありがとうございました(*^∇^*)
