だーしゃの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講座 ヘッダーの画像を変えてみよう！
線はきになりますね～。
探すのが面倒でときどき挫折しますが。
よかったら、引用文を線や色で囲むコマンドもお願いします。(^^)
で、恒例のツッコミ校正。
…個人ブログだからやめとく。みつけてね。ふふふ
■pyoさんへ
今回はねむねむで 作成したのでちょっとわかりにくいかも知れないですね。
引用文については、ちょっとスタイルシートを替えればできそうなので
やってみますね～！
そして誤字は。。。。
あぁ。。。修正します～（＞＜）
こんばんは。いつもお世話になっておりますm(_ _)m
以前、コメントが投稿できないとブ〜ブ〜言った者です。
http://yoo.ti-da.net/e471279.html#comments
記事とは関係ないんですが、判明しましたのでお知らせします。
今日もコメントが書けない現象が出て、分割して投稿してみました。すると、あるところで投稿できなくなるんです。それが何か分かりました。
アポストロフィーが原因でした。タグのことはよくわからないのですが、アポストロフィーをコメント中で使うとダメみたいです。
コメントスパムとは関係なかったようです。すみませんでしたm(_ _)m
■yooさんへ
こんにちは、コメントありがとうございます。
そして色々と調べていただいてありがとうございます。
すみません、色々と手がまわらなくて。。
そしてアポストロフィーが問題だったんですね！
これはもう一度みてみますね。
何かの設定に引っかかっていると思いますので。
どうぞ宜しくです！
だーしゃさん初めまして。
記事とは話しが違って申し訳ないのですが、
カスタマイズでちょっと質問したいのですが…。
カテゴリには投稿数、最新コメントには日付が入りますよね。
このカッコ書き内の数字を表示しないようにしたいのですが、
それはできますか？
開設目的が日記というよりはお店の営業案内に近いので、
カッコ書きがないほうが体裁がいいのです。
そういうカスタマイズもできますか？
CSSとか見てみたんですけど、分からなくて…。
すみません、よろしくお願いしますm(_ _)m
■春さんへ
こんにちは、はじめまして、
こっちのほうは完全にプログラムの方で出しているみたいですよ。
なので、とりはずすのはむずかしいですね～～～。
文字の設定を白にしても他の部分で白くなる場合がありますから。。
うまくすると出来ると思いますけどむずかしいですね。。
だーしゃさん、
お返事ありがとうございます。
エントリーから外れた質問だったので、恐る恐るだったのですが、
聞いてみてよかったです！
試行錯誤してみますね♪
ありがとうございました。
音楽をブログに乗せたいのですが
どうすればいいですか？
わかりやすく教えて下さい
お願いします。
■g-faさんへ
こんにちはー。音楽ですかー。
これはてぃーだブログでの配信できるようになるのをまつか、
もしくは他のサーバーから引っ張ってくるしかないですねー
これは他のサーバーにファイルを保存して
やるんですけど。。。
ちょっと説明しにくいですね。。
ごめんなさいー
こんばんわ☆
１人で頑張ってなんとかやってみたよ…（；＾＾）
umurockが帰って来たら驚かすつもり☆☆（笑）
■JUNGOさんへ
早速みましたよーー
これはばっちりですよ！
むぅ、初めてとは思えないっす。
とってもいい感じなので色々と触ってみてくださいねー
UMUROCKさん多分びっくりじゃないですかぁ（＾＾）！！
こんにちは！kirariです☆
線をつけたんですが、いつも途中で線が切れて表示されます。
何でこうなるんですか？教えてください！
あと、他のブログの方にコメントを残す時、
いちいち名前とURLを入れないと名前とかが残らないんです。
どうしたら、直りますか？教えてください。
お願いします！
■◇◆kirari◆◇さんへ
こんにちはー！ 早速ですがブログみたのですが、
線は特に消えてないみたいですよー。
どこの線ですか？？
ブラウザのせいでしょうかね。。。
そしてコメントとURLについては
コメントを書く上の
【情報を記憶】 という所にチェックを入れるといいですよー
ためしてみてくださいねー（＾＾）
こんにちわ☆kirariです！
線消えてなかったですか??時間がたつと全部出るみたいです。
【情報を記憶】 にチャックを入れました。
教えてくれてありがとうございました！
だーしゃさんこんにちわ！いつも参考にさせてもらっています。ありがとうございます！
こつこつ第1回のＣＳＳ講座から進んできたのですが、壁に・・・。
ti-daのねこのスタイルシートからカスタマイズしてきました。
bannerにもcontentの外側(container?)と同じ太い線をひきたいのですが、どうしていいか分からないので教えてください。
宜しくお願いします！
■incubusさん
コメントありがとうございますー（＾＾）
えーっとですね、とりあえずメッセージの方に送りましたので、
そちらを確認してみてくださいねー。
よろしくおねがいしますー。
各記事を線で囲んだら凄く見やすくなっていいですね～
私もチャレンジしたんですが、どうも上手くいきません・・・(´ﾟдﾟ｀；)
日付、タイトル、本文、タグ、コメントをひとくくりにしたいんですが、
どうしたらいいでしょうか？
ごめんなさい、質問ばっかりしちゃって・・・m(*v_v)m
記事を囲むのは出来、なんとか解決しました（^○^)/
■ museeさんへ
OKですよー、分からない所は聞いてください。
そうしたら、コレを読んでまた分からない人が分かるようになるはずですしーー（＾＾）
イロイロとためしてみましょーー。
#container{
at 2009年06月14日 12:25
