ウィンドゥは最大表示でお願いいたします。
てぃーだスクエアカフェ2005年09月02日
だーしゃのCSS講座 線のカスタマイズしよう！│CSSについて
だーしゃのCSS講座
第7回 線のカスタマイズしよう！
みなさまこんにちは。
そろそろちゃんとしたコンテンツを上げないとと思って
今日はCSS講座を開催する事にしました！
もう第7回になりましたので、受講生の皆さんはうまくカスタマイズできているでしょうか？
今日はテンプレートの枠についてさらっとながしますね～
第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講座
沖縄そば
白
子供
船
道
砂浜
光
ブログカスタマイズ
花
ブログ
携帯
緑
方言
波
カフェ
犬
カスタマイズ
読谷
後遺症
岩
パン
水
黄金言葉
ryuQ
フリマ
那覇
ソーキ
サンプル
ケーキ
CSS
イベント
夏
タコス
仕事
おいしい
古宇利島
夕方
赤
カミンチュ
三線
ラジオ
サークル
コーヒー
Ustream
今帰仁
陶芸
魚
本部
レストラン
ラーメン
ランチ
メキシカン
動物
リハビリ
夕暮れ
ブログ講習会
取材
エイサー
FMよみたん
橋
記憶障害
残波
赤瓦
桜
バス
ゴーヤー
新都心
離島
真栄田
残波岬
晴れ
川
虹
青空
岩場
バスケ
春
ブログは色々な要素からなっています。
まずテンプレートがこのようにありますが
それを囲っている枠を指定するスタイルシートがあります。
それが [ 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 の ＃～～～～ を変更すれば色が変わるので是非試してみてくださいね。
どれが何のクラスかわからない時は聞いてみてくださいな。
それではまた次回！
この記事へのトラックバックURL
http://daxia.c-point.ne.jp/t484446
この記事へのコメント
|
|
線はきになりますね～。 探すのが面倒でときどき挫折しますが。 よかったら、引用文を線や色で囲むコマンドもお願いします。(^^) で、恒例のツッコミ校正。 …個人ブログだからやめとく。みつけてね。ふふふ |
Posted by pyo at 2005年09月02日 11:18
|
|
■pyoさんへ 今回はねむねむで 作成したのでちょっとわかりにくいかも知れないですね。 引用文については、ちょっとスタイルシートを替えればできそうなので やってみますね～！ そして誤字は。。。。 あぁ。。。修正します～（＞＜） |
Posted by だーしゃ at 2005年09月03日 00:45
|
|
こんばんは。いつもお世話になっておりますm(_ _)m 以前、コメントが投稿できないとブ〜ブ〜言った者です。 http://yoo.ti-da.net/e471279.html#comments 記事とは関係ないんですが、判明しましたのでお知らせします。 今日もコメントが書けない現象が出て、分割して投稿してみました。すると、あるところで投稿できなくなるんです。それが何か分かりました。 アポストロフィーが原因でした。タグのことはよくわからないのですが、アポストロフィーをコメント中で使うとダメみたいです。 コメントスパムとは関係なかったようです。すみませんでしたm(_ _)m |
Posted by Yoo at 2005年09月03日 21:38
|
|
■yooさんへ こんにちは、コメントありがとうございます。 そして色々と調べていただいてありがとうございます。 すみません、色々と手がまわらなくて。。 そしてアポストロフィーが問題だったんですね！ これはもう一度みてみますね。 何かの設定に引っかかっていると思いますので。 どうぞ宜しくです！ |
Posted by だーしゃ at 2005年09月03日 22:06
|
|
だーしゃさん初めまして。 記事とは話しが違って申し訳ないのですが、 カスタマイズでちょっと質問したいのですが…。 カテゴリには投稿数、最新コメントには日付が入りますよね。 このカッコ書き内の数字を表示しないようにしたいのですが、 それはできますか？ 開設目的が日記というよりはお店の営業案内に近いので、 カッコ書きがないほうが体裁がいいのです。 そういうカスタマイズもできますか？ CSSとか見てみたんですけど、分からなくて…。 すみません、よろしくお願いしますm(_ _)m |
Posted by 春 at 2005年10月16日 03:59
|
|
■春さんへ こんにちは、はじめまして、 こっちのほうは完全にプログラムの方で出しているみたいですよ。 なので、とりはずすのはむずかしいですね～～～。 文字の設定を白にしても他の部分で白くなる場合がありますから。。 うまくすると出来ると思いますけどむずかしいですね。。 |
Posted by だーしゃ at 2005年10月17日 17:05
|
|
だーしゃさん、 お返事ありがとうございます。 エントリーから外れた質問だったので、恐る恐るだったのですが、 聞いてみてよかったです！ 試行錯誤してみますね♪ ありがとうございました。 |
Posted by 春 at 2005年10月20日 22:21
|
|
音楽をブログに乗せたいのですが どうすればいいですか？ わかりやすく教えて下さい お願いします。 |
Posted by g-FAです！！ at 2005年11月22日 12:49
|
|
■g-faさんへ こんにちはー。音楽ですかー。 これはてぃーだブログでの配信できるようになるのをまつか、 もしくは他のサーバーから引っ張ってくるしかないですねー これは他のサーバーにファイルを保存して やるんですけど。。。 ちょっと説明しにくいですね。。 ごめんなさいー |
Posted by だーしゃ at 2005年11月23日 21:40
|
|
こんばんわ☆ １人で頑張ってなんとかやってみたよ…（；＾＾） umurockが帰って来たら驚かすつもり☆☆（笑） |
Posted by ☆JUNGO☆ at 2005年11月28日 19:15
|
|
■JUNGOさんへ 早速みましたよーー これはばっちりですよ！ むぅ、初めてとは思えないっす。 とってもいい感じなので色々と触ってみてくださいねー UMUROCKさん多分びっくりじゃないですかぁ（＾＾）！！ |
Posted by だーしゃ at 2005年11月28日 23:43
|
|
こんにちは！kirariです☆ 線をつけたんですが、いつも途中で線が切れて表示されます。 何でこうなるんですか？教えてください！ あと、他のブログの方にコメントを残す時、 いちいち名前とURLを入れないと名前とかが残らないんです。 どうしたら、直りますか？教えてください。 お願いします！ |
Posted by ◇◆kirari◆◇ at 2006年01月26日 17:46
|
|
■◇◆kirari◆◇さんへ こんにちはー！ 早速ですがブログみたのですが、 線は特に消えてないみたいですよー。 どこの線ですか？？ ブラウザのせいでしょうかね。。。 そしてコメントとURLについては コメントを書く上の 【情報を記憶】 という所にチェックを入れるといいですよー ためしてみてくださいねー（＾＾） |
Posted by だーしゃ at 2006年01月26日 18:02
|
|
こんにちわ☆kirariです！ 線消えてなかったですか??時間がたつと全部出るみたいです。 【情報を記憶】 にチャックを入れました。 教えてくれてありがとうございました！ |
Posted by ◇◆kirari◆◇ at 2006年01月27日 21:15
|
|
だーしゃさんこんにちわ！いつも参考にさせてもらっています。ありがとうございます！ こつこつ第1回のＣＳＳ講座から進んできたのですが、壁に・・・。 ti-daのねこのスタイルシートからカスタマイズしてきました。 bannerにもcontentの外側(container?)と同じ太い線をひきたいのですが、どうしていいか分からないので教えてください。 宜しくお願いします！ |
Posted by incubus at 2007年06月01日 16:33
|
|
■incubusさん コメントありがとうございますー（＾＾） えーっとですね、とりあえずメッセージの方に送りましたので、 そちらを確認してみてくださいねー。 よろしくおねがいしますー。 |
Posted by だーしゃ at 2007年06月02日 09:18
|
|
各記事を線で囲んだら凄く見やすくなっていいですね～ 私もチャレンジしたんですが、どうも上手くいきません・・・(´ﾟдﾟ｀；) 日付、タイトル、本文、タグ、コメントをひとくくりにしたいんですが、 どうしたらいいでしょうか？ ごめんなさい、質問ばっかりしちゃって・・・m(*v_v)m |
Posted by musee
at 2009年06月14日 12:25
at 2009年06月14日 12:25|
|
記事を囲むのは出来、なんとか解決しました（^○^)/ |
Posted by musee at 2009年06月14日 21:35
at 2009年06月14日 21:35|
|
■ museeさんへ OKですよー、分からない所は聞いてください。 そうしたら、コレを読んでまた分からない人が分かるようになるはずですしーー（＾＾） イロイロとためしてみましょーー。 |
Posted by だーしゃ at 2009年06月15日 12:09