(cache) 駅風呂カスタマイズ本舗 : クリスマス・スキン赤色バージョン（CSS配布）

クリスマス・スキン赤色バージョン（CSS配布）

　エキサイトブログから新しいクリスマス・スキン （―といっても、既に去年）が出ましたが、背景色が green / navy blue であまりクリスマスっぽくないのですね。　背景色をクリスマスらしい赤に変えてみようとしたのですが、このスキンは背景画像に色が付いていて簡単には変更できません。

　そこで背景画像を一旦取り出してバックを透明にした上で、スキンの画像を差し替えてみました。　そうすれば背景色を自由に変えたり、背景を画像にしたりできるからです。

　オリジナルのクリスマス・スキンで背景画像は５枚使われていますが、サンタクロース以外は背景に色が付いています。

　それで背景色を変えるだけだと、こうなってしまいます。（↑）

#XmasTitle { width:1000px; height:190px; margin:0 auto; padding:0;
background-image:url ( http://md.exblog.jp/skn/img/a/01/12/0/ti_bg01.gif );
background-repeat:no-repeat;　}

　このスキンのヘッドの画像はCSS編集にあるこの部分で、二列目の画像URLをイメージ・タグに入れて送信すれば画像が表示されます。　

　その画像を右クリックしてPCに保存し、画像編集ソフトのマジック・ワンドなどで背景色を選択して削除すれば透明背景の画像が作れます。　選択の許容量を小さくするほど輪郭がはっきりしますが、何通りか作って良いものを選ぶとよいでしょう。　
　これは二千円ソフトのPaintgraphic2 を使っていますが、透明背景の保存にはGIF を選びます。　『２５６ Windows用』が一番きれいだったかも・・・

●クリスマス・スキン赤色バージョン・プレビュー●
　このスキンを使ってみたい方はスキン編集のCSS編集の部分をそっくり入れ替えるだけで簡単にできます。　下にCSS を用意してありますので、よろしければ使って下さい。　背景が透明なので、背景色を自由に変更することもできます。

●変更用クリスマス・スキンのCSS●
　（クリックで開くので、コピーしてCSS編集全体を貼り替えて下さい）

●CSS編集の変更の仕方：　

　ログインして『スキン変更』をクリックし、クリスマス・スキンの『編集』をクリックして下さい。

　続いて『編集』ボタンをクリックします。　スキン編集を開くのが始めての方は警告文が出ますが、脅しにビビらず開きましょう。

　スキン編集の下にある『CSS編集』を右クリックして『すべて選択』→『削除』として、そこに『変更用クリスマス・スキンのCSS』をコピーして貼り付けて下さい。　下にある『プレビュー』で見て、良ければ『保存』をクリックします。

　スキンを保存すると現在使用中のスキンの下にマイ・スキンとして保存され、その後『適用』をクリックした時点で初めて反映されます。　このやり方だと現在使っているスキンを消さずに保存しておけますから（順番が入れ替わる）、クリスマスが終わったら元に戻すのも簡単です。

　ついでなので、コメント欄を広くして背景色も変えておきました。

ハーフトーンのポインセチア

　追記：　コメント欄右下にハーフトーンでポインセチアの画像を入れてみました。
やり方は、

/* コメント入力欄（広げてあります） */
DIV.COMMENT_INPUT TEXTAREA
{ WIDTH:450px ! IMPORTANT ;HEIGHT : 13EM ;FONT-SIZE : 10PT ;
BACKGROUND:#FFFFFF;}

　―の {カッコ} の中に

background-image:url
(http://pds.exblog.jp/pds/1/200812/09/79/ico_poin02halftone.gif);
background-position:100% 100%;background-repeat:no-repeat;

　―をプラスします。　CSSには入っていますが、邪魔なら削除して下さい。

●背景色を変えてみる：

BODY　{ BACKGROUND : #C00000 ; MARGIN : 0PX;PADDING : 0PX;}

　CSS編集一番上の BODY の中にある #C00000 （赤）が背景色の指定です。　この部分を好きなカラー・コード（色番号）に変更するだけでも全体のイメージが変わります。　#C00000 （赤）を #000000 （黒）にすると上の図のようになります。
　こんなのは簡単だし『プレビュー』で見ている限り実際には変わりませんから、色々と試してみましょう。

●色作りカラーミキサー：

　← Web色を自由に作りたい方はこちらのサイトへ

●Web色の作成ツールについて：　Webカラーを作成するフリー・ソフトは色々あります。　本格的にやってみたい方はダウンロードして使いましょう。

●背景を画像に変えてみる：

background-image:url( 画像URL );background-attachment: fixed;

　このスキンではオマケとして背景画像が使えるようにしておきました。　BODY の後ろにある上の記述のカッコの中に画像URLを入れれば背景色を画像に変更することができます。　（画像URLには透明背景の雪模様が入っていますので、要らなければ画像URLを削除すれば無地になります）

●サンプル・プレビュー　（←クリックで開きます）

自作背景画像

　この背景画像は80×80PX の小さなものですが、それを縦横に反復させることでタイルのような連続模様になるという訳です。
　画像URL後ろの background-attachment: fixed; は背景を固定するためのもので、それを削除すると縦にスクロールした時本文と一緒に背景も動きます。

背景画像GIFアニメ

　これは同じ背景画像を3コマのGIFアニメにしたものです。　動きのあるものが好きな方はこちらをどうぞ。　目が疲れないように5秒間隔のゆっくりしたものにしておきました。

　←透明背景の雪模様：　（ちゃんとあります）

　これは背景色を変えるだけで良いから便利ですが、難点は全然見えないから実際にアップロードしてプレビューしないことには効果が判らないことです。　配布CSS にはこの画像が入っています。

●背景画像のアップロードの仕方：　

　スキン編集の右上にある『マイイメージアカウントにイメージ登録』をクリックすると、上のような別窓が表示されます。　画像のアップロードと同じやり方ですが、ファイル名は半角英数でないとはねられるので注意して下さい。　スキンに使う画像は容量が大きいと開くのに時間がかかります。

　アップロードした画像のファイル名をクリックすると下にイメージURLが出ますから、それをコピーして画像URLのカッコの中に貼り付けて下さい。　
（その下に『WIDTH及びHEIGHT属性を一緒に入力してください』―とありますが、それはイメージ・タグを作る時に必要なもので今回は関係ありません）

※背景画像を使う場合、背景色も同じ色を指定しておいて下さい。　画像は時々表示されないことがあるからですが、似たような色を指定しておけば白文字が読めなくなるということもなくなります。　背景と同じ色を作るのは、Web色作成ツールのスポイト・ツールなどを使うと便利です。

　●無料ソフトの「すぽいと君」：　（原寸大）
　これはもっとも単純に、画面上から色を拾うためだけのツールです。
　カーソルを拾いたい色の上に置いて「スペース」キーを押すとカラーネーム（色名）やカラーコード（色番号）が表示されるので、使いたい表示をクリックすればクリップボードにコピーされます。　ツールの色までその色に変わるから楽しいですね。

●別のＸｍａｓスキン：　（二年前の）　

　これはエキサイトブログ提供スキンにある『Ｘｍａｓ』スキンの『プレゼント』バージョンですが、なかなかクリスマスらしくにぎやかで良いですね。

●『Ｘｍａｓ』スキン・プレビュー：　私のバージョンでは本文を読みやすくするために背景色をちょっと暗くしてあります。　これは div.post に

background:#B10503;
padding: 10PX ;

　―をプラスしただけのものです。

●「Snowflakes」スキン　（'09年版）

　今年（2009年）も新しいクリスマス・スキンが登場しました。　これは「Snowflakes」スキンの「レッド」でなかなか良い感じですが、左右にメニューがある三列スキンになっています。　メニュー幅は180ピクセル、本文幅が480ピクセルと二列スキンと比べてもそんなに本文幅は狭くありません。

　私は趣味で 音楽ブログ もやっていますが、横幅620ピクセルとちょっと広めの二列スキンを使っているので、背景の粉雪の画像だけ借りてきて使ってみました。　これだけでもクリスマスっぽくなりますね。
　CSS編集にある、

#main{ width: 910px; margin: 0 auto;
background : url ( http://md.exblog.jp/skn/img/a/01/13/5/bg_Red.gif ) repeat; }

#HeadArea{ height: 150px; margin: 0 0 10px 0; width: 100%;
background: url ( http://md.exblog.jp/skn/img/a/01/13/5/mainRed.gif ) no-repeat
center top; padding: 110px 0 0 0; }

　―の太字の部分が背景画像の指定で、赤文字の部分が画像URLです。　
上の「main」が背景の粉雪の画像で「repeat」は小さな画像を反復して使うという指定です。
　
　下の「HeadArea」がヘッダー（ブログ・タイトル）の背景に使われている雪の結晶の画像で、「no-repeat 」は一枚の画像を反復せずに使うという指定です。
　赤の他にもブルーやグレーなどありますから、クリスマスが済んでも他の色なら冬の間は使えそうですね。

　上はその画像URLをイメージ・タグ　<img src="画像URL" />　―の中に入れてWeb上にアップロードしたものですが、右クリックして「プロパティ」を開くと画像URLが分かります。

●クリスマス・スキンを配布しているサイト：
-Sun&Moon Blog-
　おなじみ月蝕さんのサイトで、クリスマス・スキンだけでもかなりの数があります。

Animal Skin　エキブロスキン配布してます
　こちらは Animal Skin さんのサイトです。

　どちらもスキンのCSSをお借りしたら、お礼くらいは言ってあげて下さいね。

●Webブラウザによる見え方の違いについて：
　最近はそうでもないのですが、編集するブラウザによってはスキンのレイアウトが崩れたり文字色が違って見えたりするのがスキン編集をする時の悩みの種です。　約八割くらいの人がWindowsのInternet Explorerを使っているのであればそれを基準にするしかないのですが、このスキンではIE8 、Firefox3 、Opera9 、Safari3 for Windowsの4つのブラウザで確認しています。

　実を言うと本日確かめてみたらFirefox とSafari でヘッドの画像が表示されないとか、メニューのリンク文字色が違って見えたりしたので、CSSの細かい部分を修正しておきました。　自分のスキンと違ってCSSを配布するとなるとそうした点が面倒だな・・・と思います。　もしどこか表示のおかしなところがありましたらお知らせ下さい。