20071123 カスタムスキンに初めて挑戦！

思い立ってブログのスキンカスタマイズに挑戦してみました！
今までちょっと難しそう……面倒だし……と思って手をつけてなかったんですけど、やり始めるとハマるわ、これ！

……んが、やっぱり自分の思ってたイメージに近づけるのは至難の業でー；；

とりあえず先生はこちら。　→　So-net　blogのブログ教室

かなり丁寧に解説してくれてるんですけど、まずはヘッダーに入れる画像で苦心惨憺ですよ。
“ヘッダー用に、横幅770ピクセル（縦の高さは任意）の画像を用意”ってありますけど、そんな都合のいい素材が見つかるわけない。自分で描けとか写真使えとか、そんなんできませんしー、素敵素材サイトさんはいろいろあるわけですので、そちらさまからお借りしたいわけですよ。
……ってわけで、ブログ教室にあるようにヘッダーの部分に入れるのは諦めて、blogそのものの背景として設定しちゃった！（爆）

↑　これが素材サイト「HEAVEN'S GARDEN」さんからいただいてきた元素材。

　【背景の設定】
　「/*-----Common-----*/」の部分にあるbodyタグに赤字の部分を追加。

　body {
　background:url(/blog/_images/blog/背景ファイル名) repeat-x;
　}

こんな感じ。“repeat-x”は横方向にのみ繰り返すために入れてあります。

ついでにスクロ－ルバーも色変え。

　【スクロールバーの色変え】
　同じく「/*-----Common-----*/」の部分に以下を追加。

　html{
　scrollbar-face-color: #○;
　scrollbar-highlight-color: #○;
　scrollbar-shadow-color: #○;
　scrollbar-3dlight-color: #○;
　scrollbar-arrow-color: #○;
　scrollbar-track-color: #○;
　scrollbar-darkshadow-color: #○;
　}

○の部分は任意のカラーコードで。それぞれの意味は……他に詳しいところがあるのでそこで見てみてください（爆）。

とりあえず見栄えをこんな感じで決めて、あとはサイドバーの設定やらカレンダーの色設定やら……まるまる半日かかったよ！
詳細は自分でもよくわからずにやってるのでこれ以上詳しく書けません……orz
特にmarginとpaddingの意味というか使い分けがよくわからん……；；

でもあれだ！　今回のでコツがつかめた気がするので次回また年明けにでも挑戦することがあるやも！？
……日和ってまた公式スキンに替えちゃうかもだけど(^_^;)
とにかく頑張った、自分！　偉いぞ自分！（心がくじけそうなのでせめて自分で自分をほめておく……；；）

コメント 2

[らぶっ] サイトのTOPも凄い綺麗です～～！
HTMLのわからない自分には、手間がかかるんだなーって印象だけど
ほんとにブログの雪だるまちゃんも可愛いし、ツリーも見事です。[おんぷ]
　
by (2007-11-29 00:06) 

＞信乃っち
ほめてくれてありがとう！[わはっ]
雪だるまちゃんもツリーも素材サイトさんからもらってきたものなので
その点では苦労知らずなんだけど、
きちんと見えるようにするにはそれなりの苦労があったわけで…
でも、他所のブログではテンプレート職人さんなどもいらっしゃるので、
わたしなんかまだまだ！[たらー]
ただ、今回ので味を占めたので、素敵な素材が見つかったら
また模様替えに挑戦するつもりでっす[じーっ]
応援してねっ（笑）。
by 美耶 (2007-11-29 02:41)