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

kuu♪からのお知らせ

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

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

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

ブログタイトル&サブタイトルの文字の位置を変えよう [バナー]

【ブログタイトル&サブタイトルの文字の位置を変えよう】

変える部分を  ピンクで書いています。

使うカスタムスキンによって変わらない場合があります。



/*-----Header-----*/ とあります(上のほう)

[完成見本]

#banner {
height: 250px;
margin-top:10px;
background:url(/blog/_images/blog/_▲▲▲/■■■/1234567.jpg) no-repeat center top;
clear:both;
}

#banner h1{
margin:0;
padding:85px 0 30px 20px;
font-size:20px;
font-family: Helvetica,Arial,sans-serif;
}

#banner h1 a{
color: #ffffff;
}

#lead{
padding-left:20px;
color: #ffffff;
}

 

 ★padding:85px 0 30px 20px; (上、右、下、左)
   ・85px
を変えるとタイトルの上からの位置が変わる
   ・30pxを変えるとタイトルとサブタイトルの間が広がる
   ・20pxを変えるとタイトルの左からの位置が変わる

 font-size:20px;を変えると文字のサイズが変わる

 ★padding-left:20px;を変えるとサブタイトルの左からの位置が変わる

 


nice!(16)  コメント(4) 

バナーをリンクボタンにしてみよう [バナー]

バナーをクリックしたらTOPページや任意のページに飛ぶようにする方法です。

①管理ページ → デザイン → レイアウト → ブログのタイトル を開く。

②挿入テキスト(上部)に使いたいバナーを載せ、リンクをつける。

これで完成!!

 

ただし、ブログタイトルとブログサブタイトルは表示されなくなります。

できれば、スキン管理のスタイルシートの編集で元々あったバナーの画像URLは消す方がいいでしょう。

入れたい画像のサイズを合わせるには、スキン管理のスタイルシートの編集の
#banner {
height: 300px;
clear:both;
}

height: 300px;の数字で調整します。

 


posted by kuu at nice!(6)  コメント(4) 
共通テーマ:blog

バナーの位置を変えよう [バナー]

【バナーの位置を変えよう】

変える部分をで書いています。



/*-----Header-----*/ とあります(上のほう)

[完成見本]

#banner {
height:200px;
margin-top:10px;
padding:0 20px;
background:url(/blog/_images/blog/_▲▲▲/■■■/1234567.jpg) no-repeat center bottom;
clear:both;
}

 

margin-top:10px; を付け加えます。(元々入っている場合もあります。)
10pxの部分を変えるとバナーの上からの幅が変わります


nice!(3)  コメント(0) 
共通テーマ:blog

オリジナルバナーを作ろう [バナー]

【オリジナルバナーを作ろう】

■変える部分をで書いています。

★元にするスキンによって、バナーの画像タグが入っている場所が違います。
/*-----Common-----*/ の中の #container { 
もしくは 
/*-----Header-----*/ の中の #banner { 
に入っているようです。

★バナーのタグを消せばバナーなしのスキンになります。



①自分で写真や絵などの画像を用意して、アップロードします。

②画像を入れます。
挿入したいポイントにマウスポインタを置いておき、アップロードした画像をクリックすると
background:url(/blog/_images/blog/_△△△/□□□□□/0123456.gif) no-repeat;
こういうのが自動ででます。

■これ以上何も扱わなければ、画像は左寄せになります。
■画像を真ん中に置きたい場合は、「center」を付け加えます。
background:url(/blog/_images/blog/_7b3/*****/0123456.gif) no-repeat center;

■画像を右に寄せたい場合は「right」を付け加えます。
background:url(/blog/_images/blog/_7b3/*****/0123456.gif) no-repeat right;


/*-----Common-----*/ の中の #container { 
もしくは 
/*-----Header-----*/ の中の #banner { 
の中に”height”があると思います。

その”height”をバナーの高さにあわせるといいでしょう。

 

 


nice!(18)  コメント(11) 
共通テーマ:blog
バナー ブログトップ

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

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

  

         

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

×

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