今回は、カレンダーに枠線を付けてみましょう。
第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;
}
以上の修正を行うと、ご覧のようにカレンダーに枠線が付き、またその下のコンテンツとの隙間も表示されるようになります。
▼▼▼ 変更前 ▼▼▼
▼▼▼ 変更後 ▼▼▼
うまくできましたか?
今回はここまでです。
【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ