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

nice! ありがとう 9

コメント 9

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

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

kuu

★miyabi25さん
お役に立ててよかったです[ニコッ]
設定しだいでタブの大きさや形も変えることができますよ[ガンバレ]
by kuu (2008-05-29 09:35) 

kana

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

kuu

★kanaさん

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

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

kana

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

kuu♪

★kanaさん

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

kana

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

kana

kuu♪さん、
できましたーーー!!!
うれしいです><!! 感謝ですーー!!
タグをつけるのに1時間ちょっとかかってしまいましたが^^;
(これでもかなり早いほうです・笑)
なんとか思うようにできました!

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

kuu♪

★kanaさん

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

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

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

  

         

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

×

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