kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

カスタムスキン作成方法・1 [バナー編]

それでは、実際にスキンを作成してみましょう。

・今回は、[ベーシックの白]の[記事幅　標準][サイドバー幅　標準]を使用します。
　もちろん他のタイプでも大丈夫です。
　でも、カスタマイズの途中で自分で変更していけるので、[ベーシックの白]がいいと思います。
・開き方は、【カスタムスキンの始め方】をご覧ください。

＊カスタムスキンを作るにはタブブラウザを使うと作りやすいです。
　私は[Grani]というのをＤＬして使っています。
　いろいろなブラウザを使いましたが、これが一番使いやすいです。

---

【1】バナーを載せよう

[準備.1] 自分の作っているカスタムスキンの横幅を知りましょう。 横幅はここを見るとわかります。 width :770px;　が全体の横幅になります。

/*-----Common-----*/  #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; }

[準備.2]
バナーを作成しましょう。
自分のカスタムスキンの横幅に合わせたバナーを準備します。

＊今回、見本で使用するバナーは　横幅770ｐｘ　高さ200ｐｘです。（クリックで拡大）
　　

[作成]

①バナーを挿入

/*-----Header-----*/ #banner { height:140px; margin-bottom:20px; clear:both; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

■height:140px;　→　height:200px;　（自分の使うバナーの高さに変える）
■画像を挿入
　　＊挿入方法は【背景色の指定と画像の挿入方法】をご覧ください。
　　＊もし画像が小さく入ってしまうときは【画像が小さくなるときの対処法】をご覧ください。

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; margin-bottom:20px; clear:both; }

（クリックで拡大）

②”プレビュー”で確認

③ＯＫなら”保存”

参考：【オリジナルバナーを作ろう】【バナーの位置を変えよう】

---

【2】バナーの文字位置・フォント・文字サイズ・文字色を変えよう

①文字位置・フォント・文字サイズ・文字色の変更

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;　 margin-bottom:20px; clear:both; } #banner h1{ margin:0; padding: 40px 0 8px 0; font-family: Helvetica,Arial,sans-serif; font-size:large; } #banner h1 a{ color:#444444; } #lead{ margin:0; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

[ブログタイトルの設定]
■文字位置
　　padding: 40px 0 8px 0;　（上、右、下、左）を変更
　　　　　・40pxを変えるとタイトルの上からの位置が変わる
　　　　　・8pxを変えるとタイトルとサブタイトルの間が広がる
　　　　　・0を変えるとタイトルの左からの位置が変わる
　　　　　　　　　　（変える時は必ず　pxを付ける　〔例. 10px〕）
　　　　　・詳しくは、【ブログタイトル＆サブタイトルの文字の位置を変えよう】をご覧ください。

■フォントの変更
　　font-family: Helvetica,Arial,sans-serif;　を変えると字体が変わります。
　　　　・フォントの変更については【字体を変更する】をご覧ください。

■文字サイズ　　　
　　font-size:large;　を変えると文字のサイズが変わる
　　　　・文字サイズについては【文字サイズを変更する】をご覧ください。

■文字色
　　color:#444444;　を変えると文字色が変わります。
　　　　・文字色については【ブログタイトル＆サブタイトルの字の色を変えよう】をご覧ください。

　　　　　　

[ブログサブタイトルの設定]
■文字位置
　　　padding-left:20px;　を付け加えるとサブタイトルの左からの位置が変わる
　　　　・数字はご自分で変更してください
　　　　・すでにある場合は、数値の変更
　　　　・詳しくは、【ブログタイトル＆サブタイトルの文字の位置を変えよう】をご覧ください。

■文字色
　　　color:#FFFFFF;　を付け加えるとサブタイトルの文字色が変わる
　　　　・#FFFFFF;はご自分の好きな色に変更してください
　　　　・文字色については【ブログタイトル＆サブタイトルの字の色を変えよう】をご覧ください。

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;　 margin-bottom:20px; clear:both; } #banner h1{ margin:0; padding: 60px 0 20px 20px; font-family: Helvetica,Arial,sans-serif; font-size:large; } #banner h1 a{ color:#444444; } #lead{ margin:0; padding-left:20px; color:#FFFFFF; }    （クリックで拡大） padding: 60px 0 20px 20px; padding-left:20px; に変更してみました。

②”プレビュー”で確認

③ＯＫなら”保存”

〔参考〕
　＊文字色の変え方
　＊ 文字のサイズの変え方
　＊ 文字の右寄せ・左寄せ・真ん中寄せ
　＊ 字体の変え方
　＊ "margin"と"padding"の違い

タグ：ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ 作成方法 バナーの変更 バナーの文字位置・フォント・文字サイズ・文字色

コメント 8

コメントの受付は締め切りました

質問なんですが、タイトルの所に画像をいれたいんですが
わかりやすく説明していただけないでしょうか？
すみません；
by みぴ (2009-01-10 10:43) 

★みぴさん

タイトルというのはどこのことですか？
バナーのこと？
記事のタイトルのこと？
サイドバータイトルのこと？

ブログを拝見しましたが、バナーのことだったのかな？
バナーのことであればこの記事をよく読んで、同じように順番どおりにしてください。
画像が切れているのは、画像の高さ指定の数値がおかしいからです。
そのことも上に書いてあるので見てくださいね。



by kuu♪ (2009-01-14 10:04) 

初めまして！
とってもわかりやすくて僕でも出来ました！
ありがとうございました！
これからも参考にさせてもらいます！！！

＊僕の母もソネブロなのですが、ハーボッとのカーソルにヒトメボレしたらしいです（笑
by hyoko (2009-01-19 21:51) 

あ；；すみません；その事まで書いていませんでした；
色々と説明して下さってありがとうございます；；
by みぴ (2009-01-28 18:25) 

初めまして、参考になりました
ありがとうございました！
by たまご侍 (2009-01-30 21:24) 

★hyokoさん

お役に立ててよかったです。
ハーボットカーソルは配布しているので、よかったら使ってくださいね^^
by kuu (2009-02-04 11:41) 

★みぴさん

無事できたみたいですね^^
よかったです♪
by kuu (2009-02-04 11:42) 

★たまご侍さん

お役に立ててよかったです^^
by kuu (2009-02-04 11:46) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。