(3-8) サイドバー メニューのカスタマイズ・基本理論編
「(3-8) サイドバー メニュー」の解説をします。
この部分を際立たせ、あなたの読者が訪問しやすい環境を作ることもカスタマイズでは大切なことです。ヘッダーやナビゲーションを付ければ大方のカスタマイズは完了したようなものですが、より読者に見てほしいページをアピールすることができるようにさらにサイドメニューもこだわれば、目を惹くブログページになりますよ♪なので、今回からまた何回かにわけてサイドメニューの説明をしたいと思います。
今回は基本理論の解説をします。
あなたが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;/* ←サイドメニューの本文に背景を敷きたいとき */
}
サイドメニューは上記のコードのように
- skinMenu サイドバー メニューのエリア
- skinMenuHeader サイドメニュータイトルエリア
- skinMenuBody サイドメニュー本文エリア
- skinMenu2のエリア
の４つのエリアにわかれています。それぞれのブロックが実際にあなたのブログのどの部分のことを言っているのかを下にイメージとして掲載しました。
①.skinMenu
サイドメニューブロックの全てを囲うエリアです（画像でピンクの部分）
②.skinMenu2
サイドメニューブロックの全てを囲うエリアです（画像で緑の部分。①と全く同じ大きさの枠です）
③skinMenuHeader
サイドメニューブロックのヘッダー部分です（画像でブルーの部分）
④.skinMenuBody
③のヘッダー下の部分（画像でブラウンの部分）
これら４つのブロックを駆使？して背景を設定したり画像を挿入したりするわけです。
基本的にはプロフィールや、テーマ、そしてカレンダー等のブロックの構成は上のイメージと全く同じで、上記スタイルを変えれば全ての配色の変更が可能となります。これは２カラムでも３カラムでも全て同じです。
ですが、サイドメニュータイトルを画像にしたいときは個別の設定が可能となります。最終的には個別に設定する方法も紹介しますが、まずは基本的なところから行きましょう。
次回はこれらに修正を加えて自由に配色や枠線を設定する方法を解説します。
おすすめ
