オリジナルバナーを作ろう
バナーを挿入しよう
- ①自分で写真や絵などの画像を用意して、アップロードする
- ②画像を入れる
/*—–Common—–*/ の中の #container { もしくは
/*—–Header—–*/ の中の #banner { の中に画像のURLを挿入します。<挿入方法>
挿入したいポイントにマウスポインタを置いておき、アップロードした画像をクリックすると
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”の数字をバナーの高さにあわせます。
<参考>
#banner { height:210px; padding:0 20px; background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat center bottom; clear:both; }
バナーの位置を変えよう
- ①上からの幅をかえよう
/*—–Common—–*/ の中の #container { もしくは
/*—–Header—–*/ の中の #banner { の中に
margin-top:10px; を付け加えます。(元々入っている場合もあります。)10pxの部分を変えるとバナーの上からの幅が変わります。
<参考>
#banner { height:200px; margin-top:10px; padding:0 20px; background:url(/blog/_images/blog/_▲▲▲/■■■/1234567.jpg) no-repeat center bottom; clear:both; }
↓ marginについてはこちらを参考にしてください ↓
バナーをリンクボタンにしてみよう
バナーをクリックしたらTOPページや任意のページに飛ぶようにする方法です。
これをすると、ブログタイトルとブログサブタイトルは表示されなくなります。
できれば、スキン管理のスタイルシートの編集で元々あったバナーの画像URLは消す方がいいでしょう。
- ①管理ページ → デザイン → レイアウト → ブログのタイトル を開く
- ②挿入テキスト(上部)に使いたいバナーを載せ、リンクをつける
入れたい画像のサイズを合わせるには、スキン管理のスタイルシートの編集の height: 300px;の数字で調整します。
#banner {
height: 300px;
clear:both;
}
ブログタイトル&サブタイトルの文字の色を変えよう
/*—–Header—–*/ とあります。(上の方です。) その中の color:#ffffff; 書き換えます。
※colorの指定がない場合は入力してください
ブログタイトルの色は #banner h1 a{
サブタイトルの色は #lead{ です。
/*—–Header—–*/ #banner h1{ margin:0; padding:50px 0 25px 0; font-size:x-large; } #banner h1 a{ color:#ffffff; } #lead{ margin:0; color:#ffffff; } |
↓ 文字色とカラーはこちらを参考にしてください ↓
ブログタイトル&サブタイトルの文字の位置を変えよう
使うデザインによって変わらない場合があります。
/*—–Header—–*/ とあります。(上の方です。)
その中の3つを変えます
#banner h1{ の padding:85px 0 30px 20px; と font-size:20px;
#lead{ の padding-left:20px;
★padding:85px 0 30px 20px; (上、右、下、左)
・85pxを変えるとタイトルの上からの位置が変わる
・30pxを変えるとタイトルとサブタイトルの間が広がる
・20pxを変えるとタイトルの左からの位置が変わる
★font-size:20px;を変えると ブログタイトルの文字のサイズが変わる
★padding-left:20px;を変えるとサブタイトルの左からの位置が変わる
/*—–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; } |
スポンサーリンク