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)：カスタムスキンへの道【目次】へ

 

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

コメント 9

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

[ｺﾊﾞﾜ]これをどうやってしようか？と思考錯誤をしていました。
色々と試してみましたが、失敗しましたので、非常に助かり
増す。カラーコードも同じ感じなので、チャレンジしてみます。
[ｶﾞﾝﾊﾞﾛ]
by miyabi25 (2008-05-28 21:38) 

★miyabi25さん
お役に立ててよかったです[ﾆｺｯ]
設定しだいでタブの大きさや形も変えることができますよ[ｶﾞﾝﾊﾞﾚ]
by kuu (2008-05-29 09:35) 

このようなやり方を教えていただいて嬉しいです！
難しそうですが、一度チャレンジしてみたいと思っています。
ちなみに、バナーの下に、この様なタグをつけたい場合は、
どのようにすればよいのでしょうか？
HTML編集でのタグの挿入場所が違うのでしょうか？
by kana (2008-11-17 22:00) 

★kanaさん

バナーの位置を変えるのは、cssの方で行ないます。
ただ、このタグは位置の変更はできたかなぁ？

http://simu.blog.so-net.ne.jp/2008-07-09
こっちの方だとできるのですが・・・
プルダウンタグの方をもう少しわかりやすく書き直すのでよかったらそっちをやってみてください。
by kuu (2008-11-18 13:16) 

ありがとうございます！
なるほど、プルダウンの方でやって一度やってみます！
あまりよくわかっていないので苦労しそうですが＾＾；
がんばってみます。
また質問に伺うかもしれませんが
よろしくお願いします！
しかし・・ほんと、ここまでお出来になるのがすごいです！
by kana (2008-11-23 14:18) 

★kanaさん

がんばってやってみてくださいね♪
by kuu♪ (2008-11-24 10:22) 

ありがとうございます＾＾；
やっと取り掛かることができて、ただ今必死です（笑）
プルダウンの方の記事を頼りに、おかげさまでタグは思うようについたのですが、
なぜか右のサイドバーが記事欄の下に入ってしまい、
今、原因をさぐっております。
シロウトがCSSやHTMLの編集にとりかかると、
いつもとっても時間がかかります。ふぅぅ。。。
by kana (2008-11-30 22:27) 

kuu♪さん、
できましたーーー！！！
うれしいです＞＜！！　感謝ですーー！！
タグをつけるのに1時間ちょっとかかってしまいましたが＾＾；
（これでもかなり早いほうです・笑）
なんとか思うようにできました！

教えていただいたプルダウンのほうでやってみたので、
ブログ記事を整理したら、プルダウンとしても活用したいと思います。
本当にありがとうございました！！
by kana (2008-11-30 22:49) 

★kanaさん

よかったです～♪
ぜひ、活用してくださいね^^
by kuu♪ (2008-12-01 14:49) 

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

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