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

kuu♪からのお知らせ

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

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

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

タブをつける [タブ]

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

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


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

/*-----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;
は、タグの字の前の画像です。画像がいらなければこのタグは消して大丈夫です。
tabu-04.PNG

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

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

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

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


②「HTMLの編集」 
  デザイン → HTMLの編集 → HTMLの追加(適用で新しいHTMLを選択してくださいね。)

tabu-02.PNG

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

<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>

tabu-03.PNG

 

 

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

 


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

プルダウンタブをつける [タブ]

イメージ(クリックで拡大)
プルダウンタブ.PNG 

■前回の【タブをつける】 から少し進化して、プルダウンのタブを付けてみます。
■リンク先をTOPひとつにすれば、プルダウンではないタブにもなります。
「スタイルシートの編集」「HTMLの編集」 両方行ないます。(HTMLとCSSのみで作っています。)


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

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

【CSS】(青文字が書き加えた部分、挿入場所に気をつけましょう)
 #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; を変えます。

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


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

tabu-02.PNG
【HTML】(赤文字が書き加えた部分、挿入場所に気をつけましょう)
 <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">Livlyな日々</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>

 


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


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

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

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

  

         

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

×

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