2010年12月15日

【第6回】サイドコンテンツに枠線を付ける

前回で記事に枠線を付けたのと同じ要領で、今回はサイドコンテンツに枠線を付けてみたいと思います。

ただし、Seesaaブログのサイドコンテンツは、いくつかのクラスに分かれています。
よって、全てのサイドコンテンツに枠線を付けるためには、それぞれのクラス全てに枠線の設定を行う必要があります。

なのですが、今回はとりあえずサイドコンテンツに枠線を付ける方法を紹介したいと思いますので、主なサイドコンテンツに枠線が付く設定を1つだけ掲載したいと思います。

サイドコンテンツにどのようなクラスが存在するかや、それぞれの設定方法などについては、また別途紹介したいと思います。



さて、それでは今回は主なサイドコンテンツに枠線を付けてみます。

設定する枠線の種類は、前回で記事本文に付けた枠線と同じとします。
すなわち、

  ●枠線の上と左は通常線(1px)
  ●枠線の右と下は二重線(4px)
  ●枠線の色はオレンジ

です。

サイドコンテンツを定義するクラスは、実は以前に一度操作しています。
【第3回】記事本文スタイルの変更で設定を変更した.sideクラスがそれです。

つまり今回は、この.sideクラスに枠線を付けていけばいいのです。

簡単ですね。

・・・と言いたいところなのですが、実はちょっとだけ複雑です。
順を追って説明していきます。

★(失敗例1)サイドコンテンツに枠線を付ける方法★

.sideクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
}

▼▼▼ 変更後 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、以前このブログで追記したCSSです。

なぜこれを失敗例として掲載しているかというと・・・

▼▼▼ 変更前 ▼▼▼
SD_006_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_006_02.JPG

・・・変ですね、明らかに。

サイドコンテンツではなく、サイドコンテンツの本文部分にだけ枠線がついてしまっています。

つまり、.sideクラスは、サイドコンテンツの本文部分だけを定義しているクラスなのです。


それではどうするかというと、サイドコンテンツのタイトル部分を定義しているクラスにも枠線を付ければ良いことになります。

サイドコンテンツのタイトルは、.sidetitleクラスで定義されています。

★(失敗例2)サイドコンテンツのタイトルに枠線を付ける方法★

(上記に追加で).sidetitleクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}

このようにした結果、サイドコンテンツはこうなります。

▼▼▼ 変更前 ▼▼▼
SD_006_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_006_03.JPG

・・・
うーん、イタイ・・・
これでは、タイトルと本文がバラバラに見えてしまいますね。

でも、全体的には枠線は付いているので、あとはさじ加減で綺麗になりそうです。
具体的には、タイトルの下の枠線と、本文の上の枠線をなくせば、綺麗になります。

ということで、今回の正しい修正方法はこちらです。

★サイドコンテンツ(タイトルと本文)に枠線を付ける方法★

.sidetitleクラスと.sideクラスにborder系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
}
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
font-size:11px;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、以前このブログで追記したCSSです。

この変更によって、サイドコンテンツはご覧のようになります。

▼▼▼ 変更前 ▼▼▼
SD_006_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_006_04.JPG


うまくできたでしょうか。
これで、今回の作業は終了になります。

なお、今回の修正を実施すると、以下の点に気付くと思います。

  ●サイドタイトルと本文の枠線の間に、微妙に空白が空いている
SD_006_04.JPG

  ●カレンダーに枠線が付かない
SD_006_05.JPG

  ●タグクラウドの本文に枠線が付かない
SD_006_06.JPG

  ●広告のボックスに上の枠線が付かない
SD_006_07.JPG

カレンダーやタグクラウドの本文については、また別のクラスが定義されているため、今回の修正では枠線はつきません。
また、広告枠については、サイドタイトルがない形で表示されているために、タイトル部分の枠線が表示されていない形になります。

微妙な空白の問題も含めて、また別途解説します。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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