オリジナルスキンに変えてみた

画像をアップロードして、それを挿入するだけなら私にもできるかも…
ということで、やってみました。
わかんなくなったらsknysさんに聞いてみればいいや
（sknysさん、ありがとうございます☆）

1. カスタムスキンを選ぶ
   〈スキン作成〉をクリック
2. タグの羅列をスクロールして
   #banner {
   height:140px;
   clear:both;
   }
   という部分を見つける
3. 「カスタムスキンの作り方」にはこう書いてあります。
   
   {}（カッコ）の中にカーソルをあわせて画像サムネイルをクリックしてください。下の例の赤文字部分ように背景画像を指定する記述が追加されます。
   
   例）
   #banner {
   background:url(/blog/_images/blog/任意のファイル名) no-repeat;
   height:140px;
   }
   
   これで#bannerセレクタ（ブログタイトルバナー）に画像を表示する設定ができました。

画像サイズはどの程度の大きさにすればいいんだろう…わかんない…

こういうときはsknysさんのところにいってみよう。
〈猫にも出来るオリジナル・スキン〉を読んでみる。
すぐに解答がわかっちゃう＾＾　「770×200px」くらいでよさそう。
素材をおかりして、ペイントで画像をつくって、アップロード。
できたっ！
うれしいです

 ※背景画像をリピート（繰り返し）表示したい場合は、
「no-repeat」の記述を削除してください。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　「カスタムスキンの作り方」より

　お借りした素材を使って試してみた。

「no-repeat」、「no-」を消しただけでも大丈夫でした。
こんなかんじに仕上がりました。

そして、著作権を全く考慮しないスキンをつくってしまった
『FINAL FANTASY VII ADVENT CHILDREN』　クラウド

 
すいません、すいません、ちょっとの間だけですから勘弁してください（＞＜。）。。

他にもいろいろカスタマイズできるようですが、私には時間がかかりそう。
このへんでやめておきます＾＾；　肩凝っちゃうし…
くわしく知りたい方は、〈猫にも出来るオリジナル・スキン〉をどうぞ。

コメント 14

miyucoさん、こんばんは。
すごい、すごい！（←こればっかし）
‥‥スニーズ・スキンより、スタイリッシュでカッコ良いかも＾＾
リンクありがとう、TBしておきますね。

画像の縦幅は自由に設定出来ますが、
スクロールしないと記事（本文）が出て来ない長尺バナーは本末顛倒？
‥‥多少長め（200〜300px）に設定して、微調整するのがコツです。

「プチCSS講座１」
みっきいさん、ブログ・タイトル文字を、かなスペースで右に寄せたでしょ。
それだと「読んでいるブログ」に登録しているブロガーのサイド欄の表示も
右にズレちゃうの＾＾;
解消するには下記のようなCSSを書き加えるだけ。

#banner h1 a{margin-left:24px}

「24px」の数値を大きくすると、文字列が右に移動して行きます。
by sknys (2007-01-27 21:12) 

ワーイ！　クラウドだ！　クラウドだ！
と、大急ぎで息子をパソコンの前に連れてきて見せてしまいましたわ！
私も何か素材を探してみようかなぁ・・・。
マジカルメーカーも使ってみたいし・・・。
ソネブロさん、一時は重くてどうなることかと思ったこともありましたが、今は動きも快適だし、いろいろ機能が増えて・・・後は私に使いこなせるかどうかです。
by びっけ (2007-01-27 21:38) 

すごーい[目玉]
miyucoママさんすごいです(|||ノ｀□´)ノオオオォォォー!!
sknysさんちにもあとで伺ってみようっと！
予想以上に早くＥｖｅｒｌｙスキン実現できそう？[ラブラブハート]
by (2007-01-28 03:03) 

＞sknysさん
お褒めいただいて嬉しいです[ラブラブハート]
ご指摘のとおり、タイトルをカーソルで右に寄せてました。
そっかー「読んでいるブログ」に登録していただいている方、すべての表示がおかしくなってしまうんですね。やっと意味がわかりました。
すみやかに訂正させていただきます(￣＾￣ゞ

さらに調子にのって、「So-net blogの最新情報をお知らせします」の
「What's new?」にもＴＢしてしまった＾＾；
また何か困ったことがありましたら、ご相談に伺います[ぴかぴか]
コメントありがとうございました♪
by miyuco (2007-01-28 17:31) 

びっけさん、クラウドに反応していただいて嬉しいです[ラブラブハート]
「FF7AC」好きなんですよ。教会にいるクラウドです。
ヴィンセントも大好きだし、炎につつまれたセフィロスもいいなと思ったのですが、あまりにもダークな世界になってしまうので、自粛しました(v_v｡)

オリジナルスキンは思いのほか、簡単でした。
時間があるときにやってみるとおもしろいですよ＾＾
nice!とコメントありがとうございました♪
by miyuco (2007-01-28 17:40) 

松matsuさんのＥｖｅｒｌｙスキンお見事です[ラブラブハート]
素材選びに困ることはありませんものね＾＾
困ったときにはsknysさんちに質問しに行こうと思っていると
わりと気楽にチャレンジできました[目玉]
ありがたや、ありがたや[ぴかぴか]
nice!とコメントありがとうございました♪
by miyuco (2007-01-28 17:45) 

うわーい、ＡＣのクラウドだ～[ラブハート]
私はヴィンセント派ですが、クラウド君ももちろん好きですよ！！
凄いですね～。とっても綺麗です。
by (2007-01-29 21:17) 

＞ミミ猫さん
おお～ここにもクラウドに反応してくださるかたが＾＾嬉しいな[ラブラブハート]
私も実はヴィンセント派、けれどもいい画像がなくて断念。
ヴィンセント主役の『ダージュ オブ ケルベロス』欲しかったのですが
ガンアクションができないのであきらめて、オープニングムービーが入ってる
Gacktが唄うテーマ曲「REDEMPTION」を手に入れてしまいました[ラブハート]
nice!とコメントありがとうございました♪
by miyuco (2007-01-30 18:09) 

[ぴかぴか]素敵だ～～[ぴかぴか]

猫ちゃんスキンもカワイかったけど、
こちらもクールですっごく良いです～[ラブラブハート]
by こにゃ (2007-02-01 23:18) 

こにゃさん、お褒めいただいてうれしいです[ラブラブハート]
バナーを変えるだけの最もシンプルなカスタマイズ＾＾；
しかも、趣味全開のデザインでございました[汗汗]
nice!とコメントありがとうございました♪
by miyuco (2007-02-02 16:33) 

『Ｗｈａｔ'ｓ Ｎｅｗ』の該当ページに ＴＢしてみたら、貴女のＴＢを見つけて
伺いました[ニコニコ]
カスタムスキン…拘りだしたら キリがないかも。。。ですね[汗]
服装のワードローブは 黒が多いのに、スキン＝黒にする 自信のない・・・
流星☆彡より。。。(^_^;A)
by 流星☆彡 (2007-02-08 23:57) 

＞流星☆彡 さん
わたしのカスタマイズは画像をオリジナルにしただけの基本パターンです＾＾；
クラウドくんを引き立てたかったので、黒いスキンにしてみました。
『Ｗｈａｔ'ｓ Ｎｅｗ』にＴＢしたのは、実はsknysさんの「猫オス」への誘導という
たくらみでもあったのでした[ラブラブハート]
ほかのスキンも作ってはみたのですが、いまいち気に入らなくてボツ(v_v｡)
気に入ったのを作るって難しいですね。時間かかっちゃうし…
nice!とコメントありがとうございました♪
by miyuco (2007-02-09 20:00) 

miyucoｻﾝの｢オリジナルスキン[！？]」発言が端緒となってカスタマイズしました[チョキ]
背中を押して頂き[パー]ありがとうございます[ニコニコ]

最終的にはシンプルワイド+３カラムで固定
全体に茶～橙あたりの暖色にして
本文記事やコメント欄にもサイドバーと同系色の淡い背景をつけたいと思っています[ラブラブハート]

できれば[汗汗]

掲示板で<魔法使いスニー>を呼んじゃいましたよ[電話]
　　　　　　　　　　　　　　　　　　　　　　　　　　　♪箒に乗ってやってき♪てくれるかしら[飛行機]
by おきざりスゥ。 (2007-02-15 11:06) 

＞スゥ。さん
ヘンなフラグをたててしまって申し訳ありません[汗汗]
kovaioさんのワイド変更の記事を読んで試してみました。
http://blog.so-net.ne.jp/b_chboy2/2007-01-31
でもやっぱり２カラムのような広さにはなりません。
微調整すればいいんでしょうけれど…
タイトルのフォントはsknysさんのものをパクったのでした[目玉]

３００nice!ありがとうございます♪
by miyuco (2007-02-15 18:01)