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

kuu♪からのお知らせ

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

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

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

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

イメージ(クリックで拡大)
プルダウンタブ.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) 

nice! ありがとう 8

コメント 15

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

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

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

kuu

★琉藺さん
今、スキンを見せていただいたのですが、もう少し詳しく状況を教えてもらえますか?
もう解決したのならいいのですが[ウーン]
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) 

kuu

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

上の見本のタグは

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

PRISM

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

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

kuu

★PRISMさん

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

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

草原のキツネ

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

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

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

kuu

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

gutsism

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

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

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

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

kuu♪

★gutsismさん

はじめまして。

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

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

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

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

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

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

gutsism

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

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

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

kuu♪

★gutsismさん

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

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

RIRIKA姫

始めまして、こんばんは。
最近ブログを始めていつもこのサイト様に助けられています。
プルダウンタブを何度試してもプルダウンにならず、
そのまま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) 

RIRIKA姫

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

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

kuu♪

★RIRIKA姫さん

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

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

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

  

         

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

×

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