ヘルプ

2005年09月02日

だーしゃのCSS講座　線のカスタマイズしよう！

だーしゃのCSS講座　

第7回　線のカスタマイズしよう！

みなさまこんにちは。
そろそろちゃんとしたコンテンツを上げないとと思って
今日はCSS講座を開催する事にしました！

もう第7回になりましたので、受講生の皆さんはうまくカスタマイズできているでしょうか？
今日はテンプレートの枠についてさらっとながしますね～

まずはブログの構造を理解してみよう！をみていただけるとわかると思いますが、
ブログは色々な要素からなっています。






まずテンプレートがこのようにありますが
それを囲っている枠を指定するスタイルシートがあります。

それが [ border ]です。
これを変更する事でスタイルシート内の
線を色々と変更する事ができます。


まず [ border ]の構造なのですが、





[boederの構造]

ｂorder: 1px solid #00cc00:

この一つ一つが何を表すかというと

1px　→　太さ　（ｐｘ単位）

solid　→　線の種類

#00cc00　→　色
　


となっています。上の枠はまさしく中に記載されている[ border ]を使っています。
例えば色と太さを変えるなら。



ｂorder: 3px solid #003366:
　


という感じで色々と変える事ができます。

なのでまず色を変えたい方は上記のr要領で色を変えてみてください。


例えばこちら大外枠の色をを変えたい場合
#00cc00　→　#ff0000


外大枠のクラスは[ #container ]なのでこのクラスを変更しましょう！


ちょっと縮小するとオレンジ色になってしまって申し訳ないのですが、こんな感じ↓
ブログの構造を参照



#container{
font-size :12px;
width :740px;
background-color :#ffffff;
margin :0px auto;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-top-color : #00cc00 ;
border-right-color : #00cc00;
border-bottom-color : #00cc00;
border-left-color : #00cc00;
text-align :left;
}




#container{
font-size :12px;
width :740px;
background-color :#ffffff;
margin :0px auto;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-top-color : #ff0000;
border-right-color : #ff0000;
border-bottom-color : #ff0000;
border-left-color : #ff0000;
text-align :left;
}


color は色なので、そちらを変更すればOKです。

クラス内にある　border の　＃～～～～　を変更すれば色が変わるので是非試してみてくださいね。

どれが何のクラスかわからない時は聞いてみてくださいな。

それではまた次回！






▼CSS講座
2006-04-11 だーしゃのCSS講座　写真に自動で白縁をつけたい！
2005-12-29 だーしゃのCSS講座　引用文に色を付けてみよう！
2005-09-02 だーしゃのCSS講座　線のカスタマイズしよう！
2005-07-28 だーしゃのCSS講座　背景画像及び背景色を変更してみよう！
2005-07-21 だーしゃのCSS講座　ブログタイトルの位置を変更してみよう！
2005-07-18 だーしゃのCSS講座　ブログタイトルの色を変えてみよう！
2005-07-17 だーしゃのＣＳＳ講座　ブログの構造を理解してみよう！
2005-07-11 だーしゃのCSS講座　カスタムプラグインをかっこよく！
2005-07-10 だーしゃのCSS講座　ヘッダーの画像を変えてみよう！



■ヨッシャー新着記事
>>最新画像の一覧を見る￤>>ブログの記事一覧を見る

■関連記事一覧
↓
CSS＆ブログの活用講座！


Posted by だーしゃ at 00:19│コメント(16)│トラバ(0) ││CSS＆ブログの活用講座！│ 記事一覧│画像一覧│地図│タグ

このBlogのトップへ│前の記事│次の記事

この記事へのトラックバックURL

http://daxiazzz.ti-da.net/t484446
この記事へのコメント

■　pyo

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ 線はきになりますね～。
探すのが面倒でときどき挫折しますが。

よかったら、引用文を線や色で囲むコマンドもお願いします。(^^)

で、恒例のツッコミ校正。
…個人ブログだからやめとく。みつけてね。ふふふ

Posted by pyo at 2005年09月02日 11:18

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■pyoさんへ

今回はねむねむで　作成したのでちょっとわかりにくいかも知れないですね。
引用文については、ちょっとスタイルシートを替えればできそうなので
やってみますね～！

そして誤字は。。。。
あぁ。。。修正します～（＞＜）

Posted by だーしゃ at 2005年09月03日 00:45

■　Yoo

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ こんばんは。いつもお世話になっておりますm(_ _)m
以前、コメントが投稿できないとブ〜ブ〜言った者です。
http://yoo.ti-da.net/e471279.html#comments

記事とは関係ないんですが、判明しましたのでお知らせします。
今日もコメントが書けない現象が出て、分割して投稿してみました。すると、あるところで投稿できなくなるんです。それが何か分かりました。
アポストロフィーが原因でした。タグのことはよくわからないのですが、アポストロフィーをコメント中で使うとダメみたいです。
コメントスパムとは関係なかったようです。すみませんでしたm(_ _)m

Posted by Yoo at 2005年09月03日 21:38

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■yooさんへ
こんにちは、コメントありがとうございます。
そして色々と調べていただいてありがとうございます。
すみません、色々と手がまわらなくて。。

そしてアポストロフィーが問題だったんですね！
これはもう一度みてみますね。

何かの設定に引っかかっていると思いますので。
どうぞ宜しくです！

Posted by だーしゃ at 2005年09月03日 22:06

■　春

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ だーしゃさん初めまして。
記事とは話しが違って申し訳ないのですが、
カスタマイズでちょっと質問したいのですが…。

カテゴリには投稿数、最新コメントには日付が入りますよね。
このカッコ書き内の数字を表示しないようにしたいのですが、
それはできますか？

開設目的が日記というよりはお店の営業案内に近いので、
カッコ書きがないほうが体裁がいいのです。

そういうカスタマイズもできますか？
CSSとか見てみたんですけど、分からなくて…。

すみません、よろしくお願いしますm(_　_)m

Posted by 春 at 2005年10月16日 03:59

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■春さんへ

こんにちは、はじめまして、
こっちのほうは完全にプログラムの方で出しているみたいですよ。
なので、とりはずすのはむずかしいですね～～～。

文字の設定を白にしても他の部分で白くなる場合がありますから。。

うまくすると出来ると思いますけどむずかしいですね。。

Posted by だーしゃ at 2005年10月17日 17:05

■　春

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ だーしゃさん、
お返事ありがとうございます。
エントリーから外れた質問だったので、恐る恐るだったのですが、
聞いてみてよかったです！

試行錯誤してみますね♪
ありがとうございました。

Posted by 春 at 2005年10月20日 22:21

■　g-FAです！！

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ 音楽をブログに乗せたいのですが
どうすればいいですか？
わかりやすく教えて下さい
お願いします。

Posted by g-FAです！！ at 2005年11月22日 12:49

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■g-faさんへ
こんにちはー。音楽ですかー。
これはてぃーだブログでの配信できるようになるのをまつか、
もしくは他のサーバーから引っ張ってくるしかないですねー
これは他のサーバーにファイルを保存して
やるんですけど。。。

ちょっと説明しにくいですね。。
ごめんなさいー

Posted by だーしゃ at 2005年11月23日 21:40

■　☆JUNGO☆

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ こんばんわ☆
１人で頑張ってなんとかやってみたよ…（；＾＾）
umurockが帰って来たら驚かすつもり☆☆（笑）

Posted by ☆JUNGO☆ at 2005年11月28日 19:15

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■JUNGOさんへ
早速みましたよーー
これはばっちりですよ！
むぅ、初めてとは思えないっす。
とってもいい感じなので色々と触ってみてくださいねー
UMUROCKさん多分びっくりじゃないですかぁ（＾＾）！！

Posted by だーしゃ at 2005年11月28日 23:43

■　◇◆kirari◆◇

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ こんにちは！kirariです☆

線をつけたんですが、いつも途中で線が切れて表示されます。

何でこうなるんですか？教えてください！

あと、他のブログの方にコメントを残す時、

いちいち名前とURLを入れないと名前とかが残らないんです。

どうしたら、直りますか？教えてください。

お願いします！

Posted by ◇◆kirari◆◇ at 2006年01月26日 17:46

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■◇◆kirari◆◇さんへ
こんにちはー！　早速ですがブログみたのですが、
線は特に消えてないみたいですよー。
どこの線ですか？？

ブラウザのせいでしょうかね。。。

そしてコメントとURLについては
コメントを書く上の

【情報を記憶】　という所にチェックを入れるといいですよー
ためしてみてくださいねー（＾＾）

Posted by だーしゃ at 2006年01月26日 18:02

■　◇◆kirari◆◇

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ こんにちわ☆kirariです！

線消えてなかったですか??時間がたつと全部出るみたいです。

【情報を記憶】 にチャックを入れました。

教えてくれてありがとうございました！

Posted by ◇◆kirari◆◇ at 2006年01月27日 21:15

■　incubus

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ だーしゃさんこんにちわ！いつも参考にさせてもらっています。ありがとうございます！

こつこつ第1回のＣＳＳ講座から進んできたのですが、壁に・・・。

ti-daのねこのスタイルシートからカスタマイズしてきました。
bannerにもcontentの外側(container?)と同じ太い線をひきたいのですが、どうしていいか分からないので教えてください。

宜しくお願いします！

Posted by incubus at 2007年06月01日 16:33

■　だーしゃ

だーしゃのCSS講座　線のカスタマイズしよう！:沖縄からヨッシャー（＝＾＾）９ ■incubusさん

コメントありがとうございますー（＾＾）
えーっとですね、とりあえずメッセージの方に送りましたので、
そちらを確認してみてくださいねー。

よろしくおねがいしますー。

Posted by だーしゃ at 2007年06月02日 09:18

　　 　　　
 
■ヨッシャーカテゴリー
・CSS＆ブログの活用講座！
・沖縄 写真
・└ 沖縄ちゅら海写真
・└ 空 写真
・└ 沖縄 人写真
・└ 動物　写真
・沖縄スタイル
・沖縄不思議ワールド
・IT?
・JOY　WORK
・記憶喪失障害的闘病生活！？
・おいしいモノ！
・└ オススメレストラン
・└ カフェ
・└ 食堂
・└ 沖縄そば
・沖縄観光クーポン券情報
このページの上へ▲