So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

カスタムスキン作成方法・1 [バナー編] [最初の一歩]

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

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

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



【1】バナーを載せよう

[準備.1]
自分の作っているカスタムスキンの横幅を知りましょう。
横幅はここを見るとわかります。
width :770px; が全体の横幅になります。
/*-----Common-----*/ 
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444444;
}

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

*今回、見本で使用するバナーは 横幅770px 高さ200pxです。(クリックで拡大)
  sakusei-03.PNG

[作成]

①バナーを挿入

/*-----Header-----*/
#banner {
height:140px;
margin-bottom:20px;
clear:both;
}
 
sakusei-01.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

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

②”プレビュー”で確認

③OKなら”保存

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



【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;
}

 
 sakusei-04.PNG(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

cross_03.GIF

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

cross_03.GIF

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

cross_03.GIF

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

cross_03.GIF

cross_03.GIF
      

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

cross_03.GIF

■文字色
   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;
}


 sakusei-05.PNG
 (クリックで拡大)
padding: 60px 0 20px 20px;
padding-left:20px;
に変更してみました。


②”プレビュー”で確認

③OKなら”保存

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


nice!(23)  コメント(8) 
共通テーマ:blog

nice! ありがとう 23

コメント 8

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

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

kuu♪

★みぴさん

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

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



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

hyoko

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

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

みぴ

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

たまご侍

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

kuu

★hyokoさん

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

kuu

★みぴさん

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

kuu

★たまご侍さん

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

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

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

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。