枠線(ボーダー)を使ってみよう（３）

:「前回の話で、ボーダーに
色々な使い方があるとわかったよ、Q太郎さん」

：「ふっ、まだまだだな」

：「えーっ、まだ何かあるんですか？」

：「観察しろというのは……　見るんじゃあなくて
観ることだ…　聞くんじゃあなく聴くことだ　
でないと…………　これから死ぬことになるぜ……」 

：「そんな大げさなんですか・・・」

：「ベイスタ、お前ボーダーが必ず4辺を囲むと
思い込んでいないか？」

：「えっ、4辺ではなく好きな所にだけ
線を引けるってことですか?
そ、そんな。まさかって感じだがグッと来たぜ!!
で、どうすればいいんでしょう・・・・」

：「4辺に使う時はborder:線の種類　幅　色;だったろ。
限定したい側に使うにはborderの後ろに
-top, -right, -bottom ,-leftを入れるんだ。
下線にしたいならborder-bottom:線の種類　幅　色;だな」

：「なるほど」

：「これによって出来ること・・・・
そうだな記事タイトルを例にとってみてみよう。
枠線(ボーダー)を使ってみよう（３）
この記事のタイトルだな。
.articles-title {
margin:0;
margin-bottom:15px;
padding:3px 12px;
background-color: #ff8539;
font-size:small;
color: #ffffff;
border-right:solid 20px green;
}と右側に緑色20pxの単線の指定を入れてみるぞ。
するとこうなる。
枠線(ボーダー)を使ってみよう（３）

：「おおぉ、かっこいいー。
そこに痺れる、あこがれる～。
ちょっとしたにも入れてみようっと。
えーと、下はbottomだっけ。
border-bottom:solid 10px green;っと。

枠線(ボーダー)を使ってみよう（３）

ん？ってことはサイドバータイトルなんかにも
使えるってことですよね」

：「ああ、そうだ」

：「もしかして、ブログタイトルや
サブタイトルにも使えちゃったりするのかなぁ」

：「可能だ!!!」

：「じゃあ、あんなとこにもこんなとこにも・・・・
ああ、想像するのが楽しすぎるーーーーーーーーー」

：「ヤレヤレダゼ」

タグ：ボーダー CSS ブログ カスタマイズ so-net

コメント 4

お師匠様のブログにて再度勉強し、ブログのカスタマイズに再挑戦させて頂きました。
なかなか難しく、色のセンスがない私なので、出来栄え？？？でこれからデザインを調整していきたいと思います。

とりあえず、
ブログタイトルのロールオーバー（色変え）
サブタイトルのイタリック化
記事タイトルへの上下ライン挿入
記事本文の二重線囲み
記事タイトル、本文のフォント変更
記事右下へのプロフ貼り付け
を完了しました!

学校行事で一日お休みしたので、朝から1時間ほど勉強しちゃいました～
CSS通りに変わると、とても楽しいですね！
ご指導ありがとうございました（＾－＾）

by millet (2011-01-26 21:56) 

milletさん、こんばんは。

ブログ拝見致しました。
すごい、一気に行きましたね（笑）

記事本文も、より優しい感じになったのではないでしょうか？

えっ？センスがないですって??????
うそぉぉぉぉぉぉ、ブログで紹介なさっている制作物や
今回の変更見てもかなりのモノのような気がしますけどね～

色については、http://desperadoes.biz/color/name.phpを
みると指定できる色名がでてますよ。
探せば他にあるはずです。

まぁ、さらなるブログ改造を期待しております。
分からないことございましたら、ご遠慮なくどうぞ。
by uryyyyyy (2011-01-26 23:26) 

私のブログのカスタマイズ状況を早速ご確認くださり、ありがとうございました。
26日はお昼くらいまで自由時間があったので、のめりこんでしまいました（汗）
insetとoutsetを使いたかったのですが、色がイメージに合わなくて時間がかかっていたのが主なんですが。。。
そんな事情で、COLOR NAMEが分からなくて困っておりましたので、ご紹介くださったサイト☆すご～く嬉しいです～♪

「記事本文も、より優しい感じになったのではないでしょうか？」とのご感想ありがとうございます♥嬉しいです(^^)

さらなるブログカスタマイズ目指して勉強しま～す♪
「分からないことございましたら、ご遠慮なくどうぞ。」との温かいお言葉、ありがとうございます(^^)感激です♪
by millet (2011-01-28 13:11) 

milletさん、こんばんは。

おおぉ、やっぱり色にこだわりがあるってことは
それなりのセンスを擁しているってことじゃないですかぁ～
おいらなんて、いつも色の選択、メチャクチャ適当ですよ。

やっぱりフォントの選択一つでも
ブログから受ける印象って変わりますからね。
milletさんのブログには暖色系合っているとおもいます。
（まぁセンスのないおいらが言うのもなんですけど）

カスタマイズして、もっと素敵なブログにできますよ～
by uryyyyyy (2011-01-28 22:27)