サイドバーの背景色変更

スポンサーリンク
スポンサーリンク

クライアントからの依頼で、ブログをカスタマイズしています。
今まで何度か試して出来なかった、サイドバー(カテゴリーや、トラックバック等メニュー表示のある部分)の背景色を変更する方法に気づいたので、覚書です。
MobvableTypeのデザインはスタイルシートで定義されており、入れ子構造になっています。
管理-テンプレートの中にある、styles-site.cssで、全てを内包する枠の部分が#containerで定義され、初期設定が記事部分が#center、メニュー部分が#rightに定義されています。
メニュー部分に当たる、#rightのbackground-colorの色を指定するとメニュー部分の背景色が変わるのですが、#centerの中にあるエントリーがメニュー部分の表示(の高さ)を超えてしまうと、メニュー部分の背景は、#containerで定義された背景色になります。
例えば、メニュー部分の色を水色、記事部分を白に設定した場合、記事部分がメニュー部分の高さを越えてしまうと、メニュー部分の水色の下は白くなってしまってデザイン的に見栄えが悪くなってしまいます。
これを回避するには、#centerの背景色をメニュー部分の背景色と同じ色に設定し、記事部分の背景色を表示したい色に設定すればOK
な~んだ、こんな簡単な事だったのねと思った次第です。

コメント

タイトルとURLをコピーしました