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

  • 投稿 : 2013-04-13
  • 更新 : 2013-05-22

タブ切り替え

こんな感じで、上の「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'/>

スポンサーリンク