kuu♪からのお知らせ

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

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

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

タブをつける

バナーの上部にタブをつけてみましょう！（クリックで拡大）


今回は、「スタイルシートの編集」と「ＨＴＭＬの編集」　両方行ないます。


①「スタイルシートの編集」
　　デザイン　→　スキン管理　→　編集するカスタムスキン

/*-----Header-----*/　に下記タグを書き加えます。
場所は、/*-----Header-----*/の一番下（/*-----Content-----*/　の上）がいいと思います。

#tabs{ padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; font-weight:bold; } #tabs ul{ list-style:none; margin:0; padding:0; } #tabs ul li{ display:inline; margin:0; text-transform:capitalize; } #tabs ul li a{ padding:5px 16px; background:#96C800 url("/_images/blog/_■■■/*****/cr-003-b7c7c.gif") no-repeat left center; color:#FFF; float:left; text-decoration:none; border:1px solid #DDFFC8; border-left:1px solid #96C800; margin:0; text-transform:capitalize; } #tabs ul li a:hover{ background:#DDFFC8  url("/_images/blog/_■■■/*****/cr-003-b7c7c.gif") no-repeat left center; color:#96C800; text-decoration:none; border:1px solid #96C800; } #tabs ul li a.active{ background:#DDFFC8 url("/_images/blog/_■■■/*****/cr-003-b7c7c.gif") no-repeat left center; color:#96C800; border:1px solid #96C800; }

 

url("/_images/blog/_■■■/*****/cr-003-b7c7c.gif") no-repeat left center;
は、タグの字の前の画像です。画像がいらなければこのタグは消して大丈夫です。

background:#96C800　は、通常の時のタグの色
background:#DDFFC8　は、カーソルを合わせたときのタグの色

color:#FFF;　は、通常の時の字の色
color:#96C800;　は、カーソルを合わせたときの字の色

border:1px solid #DDFFC8;　は、通常の時の線の色
border:1px solid #96C800;　は、カーソルを合わせたときの線の色

border-left:1px solid #96C800;　は、通常の時の線の左側の色
これを入れないと線が太くなって嫌だったので私は入れました。
色は通常の時のタグの色に合わせてあります。
必要なければこのタグは消して大丈夫です。

②「ＨＴＭＬの編集」　
　　デザイン　→　ＨＴＭＬの編集　→　ＨＴＭＬの追加（適用で新しいＨＴＭＬを選択してくださいね。）

★下記タグを書き加えます。赤字の部分は自分の飛ばしたいリンク先と変えてください。

<div id='tabs'> <ul> <li><a href="http://www.harbotsfield.com/" target="_blank">Harbot's FIELD</a></li> <li><a href="http://dayan.blog.so-net.ne.jp/" target="_blank">風を道しるべに・・・・</a></li> <li><a href="http://simu.blog.so-net.ne.jp/" target="_blank">ソネブロ：カスタムスキンへの道</a></li> <li><a href="http://harbot-funclub.blog.so-net.ne.jp/" target="_blank">ハーボット写真館</a></li> </ul> </div>

★挿入場所・・・これを間違えるとタブが変な場所にできるので気をつけてください。

<div id="container">
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/_contents/js/ad_plugin.js"></script>
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/_common/images/mp3player.js"></script>

ここに挿入

<div id="banner">
<% content_header %>
</div>

 

 

ソネットブログ(so-netblog)：カスタムスキンへの道【目次】へ

 

タグ：ソネブロ ソネット カスタムスキン タブ ＣＳＳ ｈｔｍｌ

プルダウンタブをつける

イメージ（クリックで拡大）
 

■前回の【タブをつける】　から少し進化して、プルダウンのタブを付けてみます。
■リンク先をＴＯＰひとつにすれば、プルダウンではないタブにもなります。
■「スタイルシートの編集」と「ＨＴＭＬの編集」　両方行ないます。（ＨＴＭＬとＣＳＳのみで作っています。）

---

①「スタイルシートの編集」
　　デザイン　→　スキン管理　→　編集するカスタムスキン　→　青文字の部分をコピーして貼付

/*-----Header-----*/　に下記タグを書き加えます。
場所は、
/*-----Header-----*/の一番下（/*-----Content-----*/　の上）がいいと思います。

【ＣＳＳ】（青文字が書き加えた部分、挿入場所に気をつけましょう）

#lead{ padding-left:35px; color: #000000; font-family: Helvetica,Arial,sans-serif; } #tabs{ position: absolute; margin: -21px 0 0 0; } #tabs dl{ margin: 0; float: left; font-size: 80%; background: #BB97D7; width :120px; color: #399900; } #tabs dt{ text-align: center; border: 1px solid #E6DBEE; padding: 0px; } #tabs dd{ display: none; margin: 0; padding-left:5px; border: 1px solid #E6DBEE; } #tabs dl:hover dd{ display: block; } #tabs a{ display: block; -width: 90px; line-height: 180%; background: #BB97D7; padding: 0px; } #tabs a:hover{ background-color: #BB97D7; } #tabs a:link{ text-decoration:none; color:#FFFFFF; } #tabs a:visited{ text-decoration:none; color:#FFFFFF; } #tabs a:active{ text-decoration:none; color:#FFFFFF; } #tabs a:hover{ text-decoration:underline; color:#FFFFFF; } /*-----Content-----*/

 

★背景色を変えるときは　background: #BB97D7;　
★線の色を変えるときは　border: 1px solid #E6DBEE;
★文字色を変えるときは　color: #399900;
★文字リンク色を変えるときは
　　　　　　　　　　　　　　　　　　　　　　#tabs a:link{ text-decoration:none; color:#FFFFFF; }
　　　　　　　　　　　　　　　　　　　　　　#tabs a:visited{ text-decoration:none; color:#FFFFFF; }
　　　　　　　　　　　　　　　　　　　　　　#tabs a:active{ text-decoration:none; color:#FFFFFF; }
　　　　　　　　　　　　　　　　　　　　　　#tabs a:hover{ text-decoration:underline; color:#FFFFFF; }

★タブの位置を変えるときは
#tabs{
position: absolute;
margin: -21px 0 0 0;
}
の中の　margin: -21px 0 0 0;　を変えます。

★★各記述方法についての説明は【よく出てくるタグの説明】をごらんください。

---

②「ＨＴＭＬの編集」　
　　デザイン　→　ＨＴＭＬの編集　→　ＨＴＭＬの追加（適用で新しいＨＴＭＬを選択してくださいね。）
　　　→　赤文字の部分をコピーして正しい位置に貼付　　→　リンク先を変更

【ＨＴＭＬ】（赤文字が書き加えた部分、挿入場所に気をつけましょう）

<div id="banner"> <div id="tabs">  <dl>  <dt><a href="http://dayan.blog.so-net.ne.jp/" target="_blank">風を道しるべに・・・・</a></dt>   <dd><a href="http://dayan.blog.so-net.ne.jp/2006-10-04" target="_blank">ブログの小技</a></dd>   <dd><a href="http://dayan.blog.so-net.ne.jp/2006-11-29" target="_blank">ハーボットカーソル</a></dd>   <dd><a href="http://dayan.blog.so-net.ne.jp/2007-11-11-1" target="_blank">ハーボット絵文字</a></dd>   <dd><a href="http://dayan.blog.so-net.ne.jp/2007-01-12" target="_blank">ﾏｲﾊﾞﾝｶｰﾄﾞ置場</a></dd>  </dl>  <dl>  <dt><a href="http://dayan.blog.so-net.ne.jp/" target="_blank">ブログパーツ</a></dt>   <dd><a href="http://meropar.jp/home/index.do?flashvars=ukey=******" target="_blank">メロのすず</a></dd>   <dd><a href="http://www.livly.com/mypage.php?uid=*****" target="_blank">リヴリーのクイック</a></dd>   <dd><a href="http://twitter.com/kuu_" target="_blank">kuuのTwitter</a></dd>   <dd><a href="http://neco.tter.jp/necos/help" target="_blank">necoったー</a></dd>  </dl>  <dl>  <dt><a href="http://simu.blog.so-net.ne.jp/" target="_blank">ｶｽﾀﾑｽｷﾝへの道</a></dt>  <dd></dd>  </dl>  <dl>  <dt><a href="http://kuikku.blog.so-net.ne.jp/" target="_blank">Ｌｉｖｌｙな日々</a></dt>  <dd></dd>  </dl>  <dl>  <dt><a href="http://harbot-funclub.blog.so-net.ne.jp/" target="_blank">ハーボット写真館</a></dt>  <dd></dd>  </dl>  <dl>  <dt><a href="http://www.harbotsfield.com/" target="_blank">Harbot's FIELD</a></dt>   <dd><a href="http://harbotsfield.blog.so-net.ne.jp/" target="_blank">Harbot's FIELD別館</a></dd>  </dl> </div> <% content_header %> </div>

こんな感じです。自分でアレンジしてみてくださいね。

タグ：ソネブロ カスタムスキン プルダウンタブ タブ ソネットブログ So-net　blog カスタマイズ

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

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