kuu♪からのお知らせ

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

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

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

プルダウンタブをつける

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

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

---

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

/*-----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 カスタマイズ

コメント 15

コメントの受付は締め切りました

このようなタグを教えてくださり有難う御座います

質問なんですが、これを設定するとヘッダーデザインと
表示が被ってしまうのですがどうやって対処すればいいのでしょうか？
by 琉藺 (2008-07-31 16:23) 

★琉藺さん
今、スキンを見せていただいたのですが、もう少し詳しく状況を教えてもらえますか？
もう解決したのならいいのですが[ｳｰﾝ]
by kuu (2008-07-31 22:03) 

レス有難うございます

説明わかりにくくすみません

↓のようになってしまうです
[https://blog.so-net.ne.jp/_images/blog/_d43/ruisan_diary_notebook/m_E38394E382AFE38381E383A3202.png]
画像を入れても変わりません
by 琉藺 (2008-08-05 19:47) 

★琉藺さん
ありがとうございます。

上の見本のタグは

#tabs{
position: absolute;
margin: -21px 0 0 0;
}

の部分でタグを置く位置を決めています。
margin: -21px 0 0 0;　がそうです。
（バナーの上部-21pxの位置ってことです。）

なので、この数字を変えてみてください。

バナーの位置を少し下げてタブを入れる方法のタグをここに載せています。
このタグを使ったカスタムスキンはこんな感じなんです。
http://dayan.blog.so-net.ne.jp/archive/c30368144-1-1


by kuu (2008-08-05 21:39) 

すごいですね！！このようなタブをつけたくてどうしたらいいのかとずっと悩んでいました。。

お教えしてい頂けると嬉しいのですが、プルダウンタブをあなた様のページのように、バーナーの下に付けたいのです。どのようにすれば良いのでしょうか？？
by PRISM (2008-10-22 04:15) 

★PRISMさん

#tabs{
position: absolute;
margin: -21px 0 0 0;
}

の-21pxの数字を変えてみてください。
自分の使いたいバナーの数字を入れてみて、あとは微調整をしてくださいね。
by kuu (2008-10-22 12:39) 

HTMLを学び始めたばかりなので、
ｋｕｕさんの記事は大変ありがたく拝見しております。

自分のホームページを作りたくて
『ＣＳＳ』で検索していて、
運よくここにたどり着いた者です。

ブログでもここまでカスタマイズできるのですね。
これからも参考にさせてください、また参ります･･･。
by 草原のキツネ (2008-10-26 09:18) 

★草原のキツネさん
ソネットブログはかなりカスタマイズできます[ﾆｺｯ]
オリジナルスキンを作れるからうれしいですね～[♪]
by kuu (2008-10-28 12:43) 

検索で、偶然にもkuuさんのサイトを見つけました。
具体的なカスタムスキンをつくる方法とお手本となるこのサイトで、少しずつ私のサイトもスッキリする形になってきました。
特にプルダウンタブはすごい機能だなと感謝、感謝です。

これから、方法が増えていくのを楽しみにしております。

それから・・・
niceをいただいたプロフィール画像を、線で囲んだサイトを見かけたことがあるのですが、何か方法があるのでしょうか。教えていただけると幸いです。

by gutsism (2008-12-21 13:21) 

★gutsismさん

はじめまして。

こうちゃんのところにあるようなものですよね？

あれは枠線で囲むのではなく背景としてあるのだと思います。
もちろん枠線で囲むことも可能ですけどね。

niceのところは、これを全部挿入します。
#nice img{
padding:5px;
background-color: #000000;
}

コメントのところは
.each-comment img {　の中に
background-color: #000000;
を挿入。
その中に　padding:5px;　がなければ挿入。
あれば、お好きな数字に書き換える。

色の指定と、余白はご自分で変えてくださいね。

by kuu♪ (2008-12-22 13:51) 

nice、コメント画像の背景を変えることができました♪
丁寧に教えていただき、本当にありがとうございます。

これからもカスタムの技、楽しみにしております。

by gutsism (2008-12-22 20:39) 

★gutsismさん

できてましたね^^　よかったです。

by kuu♪ (2008-12-24 13:41) 

始めまして、こんばんは。
最近ブログを始めていつもこのサイト様に助けられています。
プルダウンタブを何度試してもプルダウンにならず、
そのままTOPへと飛んでしまいます・・・。
入れているタグは以下の通りです。


HTML

<div id="banner">
ここから
<div id="tabs">
<dl>
<dt><a href="http://ririkapime.blog.so-net.ne.jp/" >素材</a></dt>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300657394-1" >背景</a></dd>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300655084-1" >カーソル</a></dd>
</dl>
<dl>
<dt><a href="http://ririkapime.blog.so-net.ne.jp/" >アンケート</a></dt>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300656172-1">好きな色は？</a></dd>
</dl>
<dl>
<dt><a href="http://ririkapime.blog.so-net.ne.jp/" >餌屋 ～ 営業</a></dt>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300634987-1">餌屋営業ご案内</a></dd>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300636623-1">配達状況確認</a></dd>
</dl>
<dl>
<dt><a href="http://ririkapime.blog.so-net.ne.jp/" >無料でGLL</a></dt>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300634990-1">講座1</a></dd>
<dd><a href="http://ririkapime.blog.so-net.ne.jp/archive/c2300634990-2">講座2</a></dd>
</dl>
</div>
ここまで
<% content_header %>
</div>



CSS

#banner {
height:264px;
background:url("/_images/blog/_b55/ririkapime/E784A1E9A18C22-d399b.png") no-repeat;
margin-bottom:20px;
clear:both;
}
ここから
#tabs{
position: absolute;
margin: 264px 0 0 289px;
}

#tabs dl{
margin: 0;
float: left;
font-size: 80%;
background: #FFABCE;
width :120px;
color: #FF1A6F;
}

#tabs dt{
text-align: center;
border: 1px solid #000000;
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:#FFD5EC; }
#tabs a:visited{ text-decoration:none; color:#000000; }
#tabs a:active{ text-decoration:none; color:#FF1A6F; }
#tabs a:hover{ text-decoration:underline; color:#FFFFFF; }ここまで
/*-----Content-----*/

何度も読ませて頂いたのですが、私の理解力のなさなのか
どこが間違っているのかがわからないので、どうすれば良いのか困っています（ ＞＜）

お忙しい所申し訳ありませんが、お時間のある時にでもお返事頂けると助かりますm(_ _)m
宜しくお願い致します。
by RIRIKA姫 (2009-07-20 23:07) 

ごめんなさいね。
解決しました。

ありがとうございましたm(_ _)m
by RIRIKA姫 (2009-07-23 22:51) 

★RIRIKA姫さん

解決できてよかったです。
お役に立てなくてごめんなさいね。
by kuu♪ (2009-07-29 11:04) 

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

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