2010年12月14日

【第5回】記事に枠線を付ける

今回は、ブログの記事に枠線をつけてみましょう。

Seesaaブログのテンプレートこねこ(左サイドバー)は枠線のないテンプレートなので、これに枠線を付けるとブログ全体がぐっと引き締まって見えます。

ブログの記事を規定しているCSSのクラスは、.blogクラスです。

今回はこのクラスに、枠線を規定するプロパティ(border系)を書き加えていきます。

今回はまず、解説は飛ばして修正方法を掲載しましょう。

★ブログの記事に枠線を付ける方法★

.blogクラスに、枠線のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.blog{
padding-top:0px;
background-color:#fff;
margin-bottom:25px;
}

▼▼▼ 変更後 ▼▼▼
.blog{
padding-top:0px;
background-color:#fff;
margin-bottom:25px;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;

}

このようにCSSに変更を加えると、ブログが以下のように変わります。

▼▼▼ 変更前 ▼▼▼
SD_005_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_005_02.JPG

ブログの記事に、オレンジ色の枠線が付いたのがお分かりになるでしょうか。

以上が、今回の修正内容になります。


さて、今回付け加えたCSSについて、少し解説を加えていきます。

今回は、ブログ記事を表す.blogクラスに、以下の4つのプロパティを追加しました。

  border-top:1px solid #FF9900;
  border-right:4px double #FF9900;
  border-bottom:4px double #FF9900;
  border-left:1px solid #FF9900;


border-topというのは、枠線の上の部分を表します。
同様に、border-rightというのは枠線の右の部分。
border-bottomは枠線の下側で、border-leftは枠線の左側にあたります。

四方の枠線それぞれについて、プロパティを追加したわけです。

そしてもう少し詳細に説明すると、例えばborder-top:1px solid #FF9900;は、上の枠線を、1px幅通常線#FF9900(オレンジ)色で付与するという意味になります。

つまり今回追加したCSSは、1つの枠線に対して、幅と線種、そして色という3つのプロパティを同時に定義している書式になります。

上と左の枠線は、1px幅の通常線をオレンジ色で、
右と下の枠線は、4px幅の二重線をオレンジ色で設定しています。

ここまでは宜しいでしょうか。


さて、今回追加した枠線の定義ですが、実は別の書式でも同じ定義をすることができます。

例えば、border-topについて見てみましょう。

<今回の書式>
  border-top:1px solid #FF9900;

<別の書式>
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#FF9900;

お分かりになるでしょうか。

今回使用した書式は、border-top-widthborder-top-style、そしてborder-top-colorを同時に定義している書式なのです。

つまり、今回私は線の幅と種類、色を同時に定義しましたが、場合によってはその一部のみを定義することが可能です。
例えば、幅や線種については特に何もなく、色のみを定義したい場合はborder-top-colorを使用すれば良いでしょう。
また、線の太さだけが気になる場合は、border-top-widthを使えば良いと思います。

時と場合に応じて、ご自分の好きな方法で枠線を定義すれば良いと思います。

以上、今回は記事に枠線を付ける方法でした。

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

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

この色の2カラムの大きさにしたいのですが、どうゆうふうにCSSに入力したら良いですか??

色→#ff99cc
Posted by ゆうか at 2012年01月28日 18:55
ゆうかさん、こんにちは。

一応CSSの設定としては以下の通りとなります。

border:2px solid #FF99CC;

これでいけるはずなので、例えば最後のセミコロン“;”を忘れているとかないですか?

ブログを拝見したところ、“article”か“.skinArticle2”のクラスに上記設定を追記すると上手くいくと思います。
Posted by ★ o(^0^)o ほくほく ★ at 2012年01月28日 20:10
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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