Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第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プロパティを追加する。#FF9900;margin-bottom:25px;}以上の修正を行うと、ご覧のようにカレンダーに枠線が付き、またその下のコンテンツとの隙間も表示されるようになります。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。