2006-04-07 Fri

CCSのカスタマイズメモ RSS あとで読む kwout this!

DESIGN
 ブログダイエットからサイドバーをいじっていたら、デザインもリニューアルしたくなったので、背景やフォントとリンク色のカスタマイズをするうち、すっかりスタイルシートいじりにハマってしまいました。
 



■今回の変更点

・背景を黒から明るいグレー系に変更
無駄にエロいバナーを外して、ヘッダをシンプルに
(Yahoo!BLOGS時代から使っていたので愛着があるんですが…)
・引用部分の色をピンクからグレーに
・フッタにCopyrightを追加


今回の背景画像は、Background Image Makerを使用しました。
このツールを作った方、はてなのエンジニアだったんですね…。

川o・-・)<2nd life - Web2.0 アプリケーションライク な背景画像を生成する
偉い人ありがとうございます!

素材屋さんが配布しているモノや、自分で作ったモノを使うのもいいですが、
このツールが優れているのは、ブラウザ上でパッパと出来ちゃう上に、
作成された画像のURLを編集画面に入れてプレビューできるので、
イメージがつかみやすく、短時間でいろんなパターンを作れる点です。

作品例:bg_sample.png

上のような画像が出来るので、イメージが決まったら画像を保存、
自分のサーバにアップして、URLをスタイルシートのbackgroundに書き込めばOK。
簡単にイメージチェンジができるし、アイデア次第でいろいろ使えそうですね。
ついでなのではてブのデザインも変えますた。



以下、自分用メモ

「デザイン」→「スタイルシート」

/*背景画像(全体)*/
body {
background-image : url(http://〜);
}

/*バナー(ヘッダ)*/
#banner {
text-align : left;
height : 125px;
font-family : Tahoma, Verdana;
margin : 0 0 15px;
background-image : url(http://〜);
background-repeat : no-repeat;
}

/*引用部分*/
blockquote {
width : 400px;
margin : auto auto auto 15px;
padding : 7px;
border : 1px solid #ccc;
background-color : #eee;
}

/*Copyright(フッタ)*/
まず「コンテンツ」→「自由形式」のメインページを選んで、
自由入力欄に以下を追加
<span class="address">Copyright © 2005-2006 sweetlove</span>

.address {
font-size : 8pt;
font-family : Tahoma, Verdana;
font-style : normal;
margin : 5px 0;
padding : 3px;
border : 1px outset #eeddff;
text-align : center;
}

他のテンプレで使用する場合は数字をテキトーに変えてください。


del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(13)  | TrackBack(0)  | 04 Design*.
Comments
CSSにハマってしまうお気持ち、よくわかります。私も、手をつけだすと止まらないので・・。(笑)
でも・・・個人のブログよりも、本業(工場)のWebサイトのスタイルシートをきちんとして、SEO対策するのが優先事項なのですが。(汗)

追伸:
見慣れたバナーがなくなって、シンプルになりましたね。
ちょっと寂しい感じがします・・・。そそられるものないというか・・・。(自爆)
Prowler7010 at 2006-04-08 04:47
私CSSわかんないです。。プログラマなのにw。
ところで、私も無駄にエロいバナーがなくなって寂しいす。らぶさん、ブログダイエットしすぎです。もう少しリバウンドしてくださいw
ゆっきー at 2006-04-08 09:01
■Prowlerさん
ほんと手を付け出すとキリがない…。
marginとpaddingの微調整ってむずかしいですね。
IE系だとバッチリでもMozilla系だと崩れてたり…。
おかげでここんとこ寝不足が続いてます。(笑)

P.S. Simple is best!ってことで今後の課題にします。(^^ゞ
コメントありがとう。
らぶ@管理人 at 2006-04-08 18:34
■ゆっきーさん
あはは。おふたりともエロさにつられてたんかいっ!
無駄にエロいだけで、プログラムもCSSもわかりません。
無駄なエロさも「囲い込み」には有効ってことか…。(笑)
ちょっと仕掛けをしてみたので、記事の下にあるposted by の名前をクリックしてみてね。^^
コメントありがとう。
らぶ@管理人 at 2006-04-08 18:41
(*´・ิ3・ิ)ぶっぶー



XHTMLはHTMLと違うので、ちょんと閉じませう。
(*´・ิ3・ิ) at 2006-04-08 20:18
ん?
どこかに閉じ忘れありまつか?
らぶ@管理人 at 2006-04-08 22:44
ずいぶん洗練されてきたね。エロいのもいいけど,こっちもいいなあ(笑) 落ち着いた美しさがでてきて,オトナっぽくなった感じ。
で,俺もここのところなぜか寝不足…。
無義 at 2006-04-08 23:38
(*´・ิ3・ิ)タグ使えんかった_| ̄|○
<link rel="shortcut icon" href="https://sweetlovexx.up.seesaa.net/image/kiss3.gif" />
(*´・ิ3・ิ) at 2006-04-09 12:52
■無義
エロさが抜けてご不満の方もいらっしゃるようですが…。
らぶのためのCSS講座ありがとうございます。
「○○のための○○講座」流行ってるみたいだね。(笑)
お互い寝不足には注意しませう。
コメントありがとう。
らぶ at 2006-04-09 13:32
■SMたん
Favicon設置してみたんだけど出ない?
らぶ at 2006-04-09 13:33
(*´・ิ3・ิ)出てる。ただ、xhtmlはlink要素とかでも閉じないとダミでつよ。
/スラッシュを最後につけないと!!
(*´・ิ3・ิ) at 2006-04-09 14:11
ハニィ〜 スラッシュ////
これでよかでつか?

らぶ at 2006-04-09 15:44
(*´・ิ3・ิ)ヨカでつ。
ワタクシも登録しますた。が、html部分でモジュール化されてるとこはイジれないのでつね。
(*´・ิ3・ิ) at 2006-04-09 16:04
Add Comment
Name:

URL:

Comment:

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

人気エントリー Top 10
MoMAstore
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。