誰も雨風呂改造について訊いてくれないので、勝手に今回の改造のポイントを説明しようと思います。



■スキンの選択のポイント

 

(1) 背景画像を使っているかどうか。

改造に画像を使うつもりなら、最初から壁紙を使っているスキンは改造しやすいです。

 

(2) 可愛いアイコンかどうか。

「読者になる」とか、「ブログを作る」とか、スキンによって微妙にアイコンのデザインが違います。最初、シンプルなスキンを選ぼうと思ったのですが、例の黄色いアイコンを見て、速攻で気が変わりました。

 

(3) フォントの色の組み合わせを見る。

色彩チャートで自分でフォントの色を変えるのは意外にめんどーです。だから、好きな色調というのがあれば(わたしの場合、青ですが)、それに合わせてスキンを選ぶ。微調整は後からでもできるから、雰囲気をつかみましょう。

 

⇒この結果、わたしが選んだのは、「SNOW」です。これ以後、スキンによって微妙にタグが違うので、もしかするとそのまま使えないかもしれませんが、とりあえず、具体的に説明します。

 

 

■背景を変える

 

(1) CSS編集の画面を開き、タグを表示します。

 

/* ----------------------- background-color-control ----------------------- */
body {
background-image: url(xxx.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: left bottom;
background-color: #FFFFFF;
}

 

わたしの場合は、背景画像を貼ったので、bodyに背景用のタグを記入しました。フレーム内に貼りたいのなら、#frame { }に入れてください。(実際にはやってないから結果は知らない)

 

メニューが並んでいるフレームは、#sub_a,  #sub_b みたいです。

 

(2) タグを一行ずつ解説すると・・・

 

★background-image: url(xxx.jpg);

xxx.jpg の部分に、好きな画像を貼りましょう。ただし、アメブロの画像フォルダは使えません。従って、自分の借りているプロバイダのHPスペースにアップして、そのURLを貼ればOK。

 

直リンクはやめてくださいね。詳しくは素材屋さんで確認しましょう。それから、cool や geo などの無料サーバは、ほかのサーバで画像だけの呼び出しができないようになっている可能性があります。

 

★background-repeat: no-repeat;

大きな背景画像は一枚だけ貼るので、no-repeat です。小さな画像の場合、横に並べる場合は、repeat-x 、縦に並べる場合は、repeat-y です。何も入れなければ全面に並ぶんじゃなかったっけ?

 

★background-attachment:fixed;

背景を固定させるタグ。

 

★background-position: left bottom;

背景画像を貼る位置を指定します。わたしの場合、今は左の下に貼っています。right, top, center などを組み合わせてることもできるし、%で指定することもできたはず。

 

★background-color: #FFFFFF;

背景色を指定します。画像が現れない時にはこちらの色が表示されるのはHPと同じ。

 

 

雨風呂改造編

雨風呂改造その2: リンクとフレームとフォントの変更

雨風呂改造その3: スクロールバーと記事まわりとヘッダー

雨風呂改造その4: 広告の背景色を透過する

 

⇒カラーチャート: 『ZSPC Super Color Chart』

⇒自分で壁紙をつくりたいなら: 『壁紙倶楽部』