-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
カラーボーダースキンのデザイン変更
2005年 02月 19日 |
カラーボーダースキン配布

このスキンは、説明にある通り、背景画像と背景の色指定、それに4カ所の色指定を変更するだけで、簡単に好きな色、デザインに変更できるように作っています。
そのデザイン変更のやり方の説明です。



背景画像を入れ替えたい場合、赤字の背景画像アドレスを変えたい画像のアドレスに入れ替えます。
入れ替えたい画像を一度ダウンして、自分のブログの方でアップし、使ってもよいですし、エキサイトブログで使うなら、直リンクしても構いません。

アップロードの仕方はこちらの記事を参考に。
配布スキンの設定の仕方

CSSでの背景の指定はこちらの記事を参考に。
背景指定のCSS

デザインの変更にあたっては、淡い色の背景画像には背景色も淡い色を、濃い色の背景画像には背景色も濃い色を使うのがよいでしょう。
でないと、文章が非常に読みづらくなります。

デフォルトの文字色は、#444444に設定しています。
本文の文字色も、メニューのタイトルの色も全て同じです。
CSS内のbody,td,div,li,blockquotに対して、
color : #444444 ;
border-color:#4838A7;
このようになっていますので、この#444444を、変えたい文字の色に変更します。
そうすると、全て変わります。
背景を暗い色にした時は、ここも#ffffffなど明るい文字色に変える必要があります。

ちなみに、この下にあるborder-colorの指定が、全ての枠線の色です。枠線の色を変えたい場合は、ここを変更する事になります。
各記事やメニューなどのCSSでは、ボーダーの幅とスタイルだけを指定しています。

最後にちょっとした応用編です。
現在は色つきの部分と透明部分で出来たボーダーの背景gif画像を使っていますが、これを別の好きな背景画像に変える事も勿論できます。
その時に、透明部分を含んだ画像を使えば、ボーダーではなく、他の柄にすることもできます。

そのような背景画像を自分で作っても楽しいと思います。
花柄でも、何でも、柄以外の部分を透過にすれば、その部分には背景色が反映されます。
このスキンで配布の素材でも、一部を切り取る加工をすることで、ボーダーの太さを変えたりもできます。

勿論、透過部分を含まない背景を使っても大丈夫ですが、その場合は、背景色は反映されません。

いずれにしても、変更箇所が少なくてすむように、CSSを設定していますので、カスタマイズしやすいスキンだと思います。
[PR]
<< どうしよう…_| ̄|○ PageTop カラーボーダースキン配布 >>
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon