Bloggerで「人気記事/ラベル/アーカイブ」をタブ切り替えにする方法

タブ切り替え

こんな感じで、上の「Popular/Tags/Blog Archives」をクリックすると、切り替わるというやり方です。
なるべくテンプレートを触らないという路線です。jQueryは使用しています。

事前準備

HTML/Javascript、人気の投稿、ラベル、ブログアーカイブを追加します。

この設定でブラウザで表示させて、HTMLのソースを見てみてください。
以下のようなものが含まれていると思います。

<div class='widget PopularPosts' id='PopularPosts1'>
<div class='widget Label' id='Label1'>
<div class='widget BlogArchive' id='BlogArchive1'>
1行ずつは離れてます。この部分のid=という部分が今回は重要で、これを指定して表示・非表示を実現しています。
通常は、追加したガジェットの順番に連番がつくので、ほとんどの場合この状態だと思います。



やり方

HTML/Javascriptの部分に以下のコードを貼り付けるだけです。

<style>
#tabnavi{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
#tabnavi li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
#tabnavi li:first-child{margin:0}
#tabnavi li a{color:#333;padding:6px 10px;display:block;text-decoration:none;font:bold 12px/12px Arial,Helvetica,Sans-serif;border-bottom:2px solid #333;margin:0 6px}
#tabnavi li a:hover,#tabnavi li a.tabnavi-current{color:#F27255;border-bottom:2px solid #F27255;text-decoration:none}
</style>
<script type='text/javascript'>
jQuery(function($){
 $('#tabnavi a').click(function () {
   $('#PopularPosts1').hide();
   $('#Label1').hide();
   $('#BlogArchive1').hide();

   var index = $("#tabnavi a").index(this);
   $('#tabnavi a').removeClass('tabnavi-current');
   $('#tabnavi a').eq(index).addClass('tabnavi-current');
   switch (index){
     case 0:
      $('#PopularPosts1').fadeIn();                
      break;
     case 1:
      $('#Label1').fadeIn();
      break;
     case 2:
      $('#BlogArchive1').fadeIn();
       break;
     }
     return false; //アンカーリンクにしないために
 }).filter(':eq(0)').click(); //最初の要素をクリックした状態に
});
</script>
<ul id='tabnavi'>
<li><a href='#PopularPosts1'>Popular</a></li>
<li><a href='#Label1'>Tags</a></li>
<li><a href='#BlogArchive1'>Blog Archives</a></li>
</ul>

事前準備で説明した部分は、
#PopularPosts1、#Label1、#BlogArchive1と#付きの部分がそうです。書き換える必要があれば書き換えてください。

上の部分は、タブ切り替えの色などのスタイル(Style)を指定しまいます。
中ほどで、Javascriptをもちいて切り替え部分を実現しています。
一番下の部分が、タブの表示部分です。このあたりの文言を変えれば、表示される文字が変ります。

補足

jQueryが必要です。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

スポンサーリンク

『Bloggerで「人気記事/ラベル/アーカイブ」をタブ切り替えにする方法』へのコメント

  1. 名前:universe : 投稿日:2013/05/22 07:18

    KUROさん、
    度々コメント失礼します、

    こちらの記事とても参考になりました。
    ありがとうございます。

    そこでちょっと気づいたのですが、
    KUROさんのこの「Bloggerで「人気記事/ラベル/アーカイブ」をタブ切り替えにする方法」
    http://blog2.k05.biz/2013/04/01192.html
    での表示ですが、
    紹介されているタブ切り替えにする方法のページだけ、
    タブ切り替えが上手く言っていないように思います。

    人気記事はアクセスした最初は表示されていますが、
    その後、タブをクリックするとアドセンス広告がどのタブをクリックしても表示されてしまっているように思います。
    (IEでもwebkitでもそのようです。:私の環境だけでしたらすみません。)

    ちょっと気になったのでコメントさせて頂きました。

    有用な方法の掲載いつもありがとうございます。

  2. 名前:管理人 : 投稿日:2013/05/23 00:26

    ご指摘通りでした。
    修正しました。
    記事中のソースが干渉してるようです。

    どうもありがとうございます。

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。