【第9回】カレンダーに枠線を付ける: Seesaaブログのデザイン変更ワザ

<< 【第8回】タグクラウドに枠線を付ける | TOP | 【第10回】ここまでのまとめ（第1回～第9回） >>

2010年12月18日

【第9回】カレンダーに枠線を付ける

サイドバーのコンテンツに枠線を付けるシリーズ3回目。

今回は、カレンダーに枠線を付けてみましょう。

第6回でご説明したように、Seesaaブログのサイドコンテンツは通常、.sidetitle（タイトル）と.side（本文）の2つで構成されています。
また、第8回でご説明したように、Seesaaブログのタグクラウドは通常と異なり、.sidetitle（タイトル）と.side-tag（本文）の2つで構成されています。

カレンダーもまた、これらとは異なる構成となっています。

具体的には#calendarというIDセレクタで定義されています。

IDセレクタ？
また新しい言葉が出てきてしまいました。

CSSでは通常、以下のような文法で表記します。

　　セレクタ { プロパティ:値; }

このセレクタに、定義の方法によっていくつか種類があるのです。
頭に何の文字もない文言で始まっているもの（例：body）は要素セレクタと言います。
このブログで最も高い頻度で使用しているドットで始まるもの（例：.side）はクラスセレクタ。
そして、今回のようにシャープで始まっているもの（例：#calendar）をIDセレクタと言います。

厳密には、これらは使用方法の上で違うところがあるのですが、既存のCSSを修正するだけの場合は特に意識する必要はありません。
今回のIDセレクタも、今までのクラスと同じようなものだと思って読み進めて下さい。

さて、今回の修正はカレンダーへの枠線の追加。
そして、カレンダーを定義しているのは#calendar。

ということは、もうお分かりですね？
そう、このIDにborder系のプロパティを書きこんでいけばよいのです。

早速追加してみたのがこちら。

これで、枠線の追加完了！

・・・と、ちょっと待った、何か変ですね。

カレンダーが、その下のコンテンツ（ここでは「最近の記事」）とくっついてしまっています。

・・・なるほど、カレンダーコンテンツは、その下側にスペースをあまりとっていない訳ですね。
ならば、そのスペースを修正してやれば良いことになります。

コンテンツの外側のスペースを修正する方法は、第7回で解説しました。
そう、marginプロパティです。

一般的なサイドコンテンツを定義している.sideクラスをよく見てみると・・・ありますね、margin-bottom:25px;と記載されています。
なので、今回のカレンダーでも、同じプロパティと値を使用してみましょう。
それで、一般的なサイドコンテンツと同じスペースが表示されるようになります。

★カレンダーに枠線を付ける方法（スペース調整含む）★

#calendar要素に、枠線を定義するborder系プロパティを追加する。
また、下側のスペースを調整するために、margin-bottomプロパティを追加する。

▼▼▼　変更前　▼▼▼
#calendar {
text-align:center;
padding-bottom:10px;
}

▼▼▼　変更後　▼▼▼
#calendar {
text-align:center;
padding-bottom:10px;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;
margin-bottom:25px;
}