前回の続きですよ。
1,スクロールバーの色を変える
スクロールバーの色を変えて、他の人と差をつけちゃえ!
赤字を追加すると、こんなカンジになります。
うん♪カワイイ♪
2,記事部分に画像を貼る
記事部分に画像があったら、きっとカワイイよね♪
画像はこれを使います。
赤字を加えたら、こうなりました。
3,記事部分の画像を固定する
いやぁ~ん!!
画像が一杯出て来て見にくいよぉ~!!
画像は右下に1個だけでイイのぉ~!!
赤字を加えたら、こうなりましたよ。
あ~、良かった♪
一安心、一安心♪
4,コメント欄、TB欄に画像を貼って固定する
ここまで来たら、コメント欄やTB欄にも画像を貼っちゃうぞ!
貼る画像はこれにしよう。
赤字を加えると、こんなカンジになります。
これで完成でぇ~す!!
この記事を書くにあたり、参考にさせて貰ったMondoさん、どうもありがとうです。ペコッ
私のとは違うパターンのテンプレのCSSを紹介しているので、興味がある方は見てみるとイイですよ♪
1,スクロールバーの色を変える
スクロールバーの色を変えて、他の人と差をつけちゃえ!
修正前 | 修正後 |
/* ページ全体の背景と余白 */ body { background-image: url(画像のurl); background-repeat: ; background-position: ; margin:0px; padding:0px 20px; background-color:#FFFFFF; } | /* ページ全体の背景と余白 */ body { background-image: url(画像のurl); background-repeat: ; background-position: ; margin:0px; padding:0px 20px; background-color:#FFFFFF; scrollbar-Face-Color : red; scrollbar-Arrow-Color : #FFFFFF; } |
赤字を追加すると、こんなカンジになります。
うん♪カワイイ♪
2,記事部分に画像を貼る
記事部分に画像があったら、きっとカワイイよね♪
画像はこれを使います。
修正前 | 修正後 |
/* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; } | /* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; background-image: url(画像のurl); } |
赤字を加えたら、こうなりました。
3,記事部分の画像を固定する
いやぁ~ん!!
画像が一杯出て来て見にくいよぉ~!!
画像は右下に1個だけでイイのぉ~!!
修正前 | 修正後 |
/* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; background-image: url(画像のurl); } | /* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; background-image: url(画像のurl); background-repeat: no-repeat; background-position: right bottom; background-attachment:fixed; } |
赤字を加えたら、こうなりましたよ。
あ~、良かった♪
一安心、一安心♪
4,コメント欄、TB欄に画像を貼って固定する
ここまで来たら、コメント欄やTB欄にも画像を貼っちゃうぞ!
貼る画像はこれにしよう。
修正前 | 修正後 |
/* コメント背景(別ウィンドウ、エントリー下ともに) */ .comment { } | /* コメント背景(別ウィンドウ、エントリー下ともに) */ .comment { background-image: url(画像のurl); background-repeat: no-repeat; background-position: right bottom; } |
/* トラックバックの背景(エントリー下、別ウィンドウともに) */ .trackback { background-color: ; } | /* トラックバックの背景(エントリー下、別ウィンドウともに) */ .trackback { background-color: ; background-image: url(画像のurl); background-repeat: no-repeat; background-position: right bottom; } |
赤字を加えると、こんなカンジになります。
これで完成でぇ~す!!
この記事を書くにあたり、参考にさせて貰ったMondoさん、どうもありがとうです。ペコッ
私のとは違うパターンのテンプレのCSSを紹介しているので、興味がある方は見てみるとイイですよ♪
年始早々から「知的な女になる!」が実行されているようで何よりです。
こんなのともっちブログじゃないゃぃってちょっと思ったのは内緒にしておきます(ぉぃ
P.S.「1,スクロールバーの色を変える」はIE限定ですからね。
・・・でっ、すごくタイヘンじゃなかった?
タイヘンでしょ~
うふん♪
まぁ、やる気を出したらこんなモンなんですよ♪(何)
Mondoさんのマネって事は、ナイショにしておいて下さいね。
>こんなのともっちブログじゃないゃぃってちょっと思ったのは内緒にしておきます(ぉぃ
えぇっ!
まぁ、これが終わったら、いつも通りに戻りますが(戻るんかい!)、今年の目標は、あくまでも「知的な女」ですからね。エッヘン
>P.S.「1,スクロールバーの色を変える」はIE限定ですからね。
Mondoさんのコメントのトコにも書いてましたね。
でも、パソコンの知識がない私は、IEだとか、色が変わって見えないのだとか、よくわからないんですよねぇ・・・
文章の途中の仕切り線の色も、確か見えないんですよね。
違ったカナ?
こんなすごい事をやってたのねって、改めてMondoさんをソンケーしちゃいましたよ。
どうもありがとうでした。ペコッ
CSS知識0なので、解説していただけるのはとてもありがたいです。
私も最初はCSSの事なんて全然わからなかったんですケド、色んな人のやり方を見てみたり、自分なりにいじってみたりして、何となくでやり始めたんですよ。
間でやってる部分もあるので間違いモあるカモしれないので、気を付けて下さいね(苦笑)
今日はどうもありがとうございました。
またお暇な時にでも、覗きに来て下さいネ♪
IE=InternetExplorer(インターネットエクスプローラ)
Windows標準のブラウザ(IE)を使っていると「1,スクロールバーの色を変える」によってスクロールバーに色が付くのですが、その他のブラウザを使っていると色が付きません。デフォルトのまんまです。
文章の途中の仕切り線(水平線・横罫線と言います)は、どのブラウザでも大概見えます。
ただしOpera(ブラウザ)を使っている方には色の指定は無効(色は付かない)となるようです。
参考:http://blog.goo.ne.jp/oui_monsieur/e/4b82ac10fb7e68af3c4e424a22772f42
きっと、それなりの用途によって、使い分けしたりするんでしょうね。
やっぱり難しい・・・
で、実はむっしゅさんの【タグ講座】は、結構前からお気に入り登録していて、記事を書く度に見てるんですよ。
水平線の書き方も、画像を左側において、右に字を書く方法とかも、むっしゅさんから教わったんです。
ありがとうです。ペコッ
pvが急激に増えている日があったら、それは私の仕業かもしれません。
でもね・・・
でもね・・・
基礎が全く分かってないさゆには
ヒジョーに難しいですぅヽ(´Д`;)ノアゥア...
難易度高いですよ~!CSS編集!!
3日くらい引きこもって
隣りで誰かについててもらった上で、
とりかからないと
無理な気がします・・・・。・゜・(ノД`)・゜・。
ダメな子です・・・・。
まとまった時間が出来たら
是非にやってみようと思います。
その時は、個人的にレッスンをお願いしますですm(__)m
私も少しづつ覚えたからね。
私は最初はこれからはじめました。
http://ryak.net/tool/temcus.html
サンプルの矢印をクリックすると、色が変わるから、気に入ったテンプレのCSSをコピペするだけ。
あとは、この本と
http://home.impress.co.jp/reference/2128.htm
この本
http://www.amazon.co.jp/exec/obidos/ASIN/487283545X/250-5989637-5175448
凄くわかりやすくて見やすかったよ。
さゆちゃんはダメな子じゃないよ。
私がオバカなだけよん♪