HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
デフォルトデザインでも、シンプルにまとまった雰囲気を演出してくれているサイドバーも各タイトル。今回はこのサイドメニューを簡単にカスタマイズする方法について学びます。
そのために、元の状態ではどのような設定になっているのかを見てみましょう
サイドバーを設定しているCSS
サイドバー部分の設定は、編集可能なCSSの3-8で次のように定義されています。
/* (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;/* ←サイドメニューの本文に背景を敷きたいとき */
}
3つの箱の色
右の図を見ながら、各設定について読みといていきます。.skinMenu…これは何かといいますと、四角いエリアの名前だと理解しておけばわかりやすいです。右の図の赤い線の内側です。ここに、background:#f7f7f7;という指定がされています。背景の色を薄いグレー色である#f7f7f7という色で塗りつぶすという指定です。どんな色なのかは、「ColorPicker と Stealth LauncherII
」などの記事を参考に、お手元のソフトウェアでご確認ください。
しかし、薄いグレーでべたっと塗りつぶされているかというと、そうではありません。なぜかといいますと、塗りつぶされた四角い箱のなかに、また別の箱があって、同じように別の色で塗りつぶされているからです。
同様の設定を見てみますと、.skinMenuHeaderはbackground:#e4e4e4;と指定されています。これはやや濃いグレー色で、「ランキング」というタイトルの下にある帯の色です。
.skinMenuBodyは、background:#ffffff;。これは真っ白。「総合ランキング」などの文字が入っている白い箱だということが分かります。
最初に見た.skinMenuの薄いグレーは、.skinMenuHeaderと.skinMenuBodyで塗りつぶされていない部分、つまりこの四角い箱の周りの色だということが分かります。
paddingとmargin
次に、その他の指定を簡単に説明しておきます。
まずmargin。これは、お城のまわりの堀を思い浮かべればわかりやすいかな。箱のまわりのライン状の空間を意味します。pxはピクセルと読みます。1pxは画面上の点の最小単位で、その10倍の空間を空けるという意味になります。
margin:10px;という指定は、.skinMenuBodyという箱のまわりに10pxの空間を空けるという命令。この部分、ちょうど#f7f7f7の薄いグレー色の残っている部分ですね。全部白で塗りつぶさないで、この色を残すために指定されているわけです。
そしてpadding。こちらは、箱の内側のスペースを意味します。.skinMenuBodyでは外と同じく10pxの指定。「総合ランキング」などの文字が、べたっと白いスペースの四辺にくっついていませんよね。外側と一定の間隔が空いているように見えますが、この間隔が10ピクセルあるという意味です。
最後にちょっとややこしいのですが、.skinMenuHeaderと.skinMenuBodyではpaddingの指定の仕方が違うことに気づくと思います。.skinMenuHeaderのほうには、padding:5px 10px;というふうに、2つの値が指定されています。marginもpaddingも四辺ありますから、その4辺の外および内側の間隔を指定することができます。値が1つの時は、全部が同じ。値が2つのときは、「上下 左右」の順番で指定。3つの場合なら「上 左右 下」の順。4つなら「上 右 下 左」の順番でそれぞれ値が指定されていることを意味します。ややこしいですがルールですので、憶えるほかないですね。それぞれの値の間には、半角スペースを入れます。
もうお分かりと思いますが、.skinMenuHeaderのpadding:5px 10px;の意味は、箱の上下には空きを5pxつくり、左右には10ピクセルつくるという意味になります。
簡単カスタマイズ！ 背景の色を変える
では実際にこの部分をカスタマイズしてみましょう。実は、同様に見えるメニュー、すべて同じ命令がされいてますので、それぞれ指定をしてあげなくても、全部いっぺんに色を変えることができるのです！
では、ブルーを貴重にした配色に変えてみることにします。タイトル背景を#7cb7e4に、枠の色を#c7e7ffにして、枠の太さを半分くらしにしてみます。
/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#c7e7ff;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#7cb7e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:5px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}
黄色い文字色の部分が変更した部分です。これでデザインは、右図のように変更されました。
みなさんも、自分のブログイメージに合う色に変更してみてはどうでしょうか？ 作業を行う際には、「【文字色変更】カスタマイズ準備編 」を参考に、必ずデータのバックアップを取るようにしてくださいね。