2005年05月01日

スタイルシートの編集T

Seesaaの一番の弱点はテンプレートの少なさと、そのデザイン・・・

だったら、自分好みにCSS(スタイルシート)を編集してしまえばよいのです!

基本はとほほのスタイルシート入門などでおさえておくほうがよいことは確かですが
もっともっと単純にデザインを変えてしまうには・・・・

まずは壁紙とヘッダーを変えるだけで印象はずいぶん変わるはずです


デザイン→スタイルシートと開き
今、適応になっているスタイルシートを開きます。

一番上
body{}の中で
background-image:url();が指定されていれば
この()の中身を変えてしまいます。

あなたのお気に入りの壁紙をツールでアップロードして

tool.gif

今アップロードしたファイルのタイトルをクリックして開きます。

開いたら、上の元画像を右クリックして、プロパティを開きます。
アドレス部分をコピーして
先ほどの()内と変えてしまえばよいのです。

プレビューで見てみてください。
あなたのお気に入りの壁紙に変わりましたか?

body{}の中で
background-image:url();が指定されていない場合は
background-color:#6桁の数字;となっているはずです。

その場合、background-color:#6桁の数字;の代わりに
background-image:url();を入れて
()内に先ほどと同じように
アップロードした壁紙のURLをコピーします。

ただ、このとき
#container{}内に
background-color:#6桁の数字;の指定がないと
ブログ本体の文字背景にもなってしまい
文字が見づらくなることもあるので
background-color:#6桁の数字;を指定するか、文字背景として差し支えない壁紙を
background-image:url();として指定するのがよいと思います。
#container{}内に色の指定がある場合は
そのままにするか、背景色を変えてみてください。
6桁の色のコードはカラーコード表を参考にすると便利です。

同じように、ヘッダーを差し替えるには
#banner{}内の
background-image:url();
()の中のアドレスを変えればよいので
自分好みのヘッダーを作成するか、素材屋さんからDLして
壁紙と同じようにアップロードして、プロパティをコピーし
()内を差し替えます。

このとき、プレビューで見て
ブログタイトルや説明文の位置がおかしければ
タイトルはh1{}内の
padding:○ ○ ○ ○;で調整します。
paddingとは枠の外の余白のことで
(後で出てくるmarginとは枠の内側の余白のことです)
それぞれの数字は、上右下左になるので、数字を変えて確認してみましょう。

説明文は.description {}内の
margin:○ ○ ○ ○;
で調整しましょう。

プレビューで見て大丈夫であればスタイルシートの交換をクリックしますが
このとき、スタイルシートタイトルを
自分のオリジナルの名前に変えておいたほうが、後の作業も楽に進むと思います。
posted by みえにゃん
at 15:54 |Comment(4) |TrackBack(1) | カスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
初めまして。
 テンプレートのことを色々調べていくうちに、ここにたどりつきました。
 ここのページから、アクセスカウンターのところまでをみながら、どうにか、テンプレートを変更できました。まだまだ改良の余地はあるのですが、いまのところ、これが精一杯で・・・[汗]
 勝手に参考にさせていただいたことをおわびします。
 ここ、とっても可愛ブログですね[はぁと2]
Posted by sora at 2005年07月12日 17:35
soraさん
お返事遅くなりました。
お役に立ててうれしく思います。[キャンディー]
Posted by みえにゃん at 2005年07月25日 22:40
初めまして。
私も、blog改造したくって調べていたら
こちらにたどり着きました。
とても丁寧な説明は助かります。
いろいろ参考にさせて頂きます!!!
Posted by やみくも at 2005年10月16日 17:03
初めまして。
スタイルシートをどうにか自分好みにしたくさまよっているうちに、こちらにたどり着きました。

わかりやすい説明が、とてもありがたかったです。
これからも、参考にさせていただきます!


…私のブログに、こちらへのリンクをはらせて頂いてもよろしいでしょうか?

では、これからも頑張ってください。
Posted by 蒼魔 at 2005年11月27日 16:23
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/3284534

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

ブログカスタマイズ1【スタイルシート】
Excerpt: ■今日一日、過去日記の移動もしないでしていたのはブログのカスタマイズ。 量スタイルシートで全体イメージの変更 量スクロールバーの色を変える &#63..
Weblog: □LOVE BEST□
Tracked: 2005-06-22 10:28
×

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