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系のプロパティを書きこんでいけばよいのです。

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

SD_009_01.JPG

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

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

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

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

コンテンツの外側のスペースを修正する方法は、第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;

}

以上の修正を行うと、ご覧のようにカレンダーに枠線が付き、またその下のコンテンツとの隙間も表示されるようになります。

▼▼▼ 変更前 ▼▼▼
SD_006_05.JPG

▼▼▼ 変更後 ▼▼▼
SD_009_02.JPG

うまくできましたか?

今回はここまでです。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。