[ssブログ]バナーをカスタマイズ

この記事には、ssブログ(so-netブログ)のデザインをカスタマイズする方法が記載されています。

※so-netブログの「カスタムスキンへの道」で2008年に公開された記事のため現在の仕様とは異なる場合があります。

スポンサーリンク

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

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

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

バナーを挿入しよう

オリジナルバナーの設置方法
  • 自分で写真や絵などの画像を用意して、アップロードする
  • 画像を入れる

    /*—–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;
}

スポンサーリンク

タイトルとURLをコピーしました