Blogger TIPS

Googleのブログサービス「Blogger」のテンプレート・カスタマイズ・TIPSなどを紹介しています

2026/02/18

Bloggerでもタブメニューを使いたい

event_note2/18/2026 editBy まつゆう forumNo comments

タブパーツを使うと、1つのエリアに複数の情報をまとめて表示できます。読者は必要な内容だけをクリックで切り替えて確認できるため、ページがすっきり見えます。記事本文・サイドバー問わず導入可能で、情報整理やコンテンツ紹介、商品比較などに最適です。

サンプルコードを用意していますので興味がある方は導入してみてください。使い方はあなた次第MUGEN∞DAI

記事内3タブVer.

タブ1 タブ2 タブ3
タブ1の内容
タブ2の内容
タブ3の内容

こんなシーンで使えます

  • Bloggerトップページをホームページ風にしてWordPressのタブのように見せたいとき 
    → Bloggerでトップページをホームページ化する方法
  • 商品比較や機能紹介の切り替えをコンパクトに見せたいとき
  • 広告やコンテンツ紹介を邪魔せずまとめたいとき

サイドバー2タブVer.

人気記事 新着記事
  • 人気記事1
  • 人気記事2
  • 人気記事3
  • 新着記事1
  • 新着記事2
  • 新着記事3

こんなシーンで使えます

  • サイドバーで人気記事と新着記事を整理したいとき
  • コンパクトに情報を切り替えて表示したいとき
  • 読者が興味のあるカテゴリだけをすぐに確認できるようにしたいとき

タブメニュー用カスタムコードサンプル

記事内3タブ Ver. サイドバー用2タブ Ver 

<div class="custom-tab-wrapper">
  <!-- タブ見出し -->
  <div class="tab-buttons">
    <span class="content1 active">タブ1</span>
    <span class="content2">タブ2</span>
    <span class="content3">タブ3</span>
    <div id="lamp"></div>
  </div>

  <!-- タブ内容 -->
  <div class="tab-content">
    <div class="content1">タブ1の内容がここに表示されます。</div>
    <div class="content2" style="display:none;">タブ2の内容がここに表示されます。</div>
    <div class="content3" style="display:none;">タブ3の内容がここに表示されます。</div>
  </div>
</div>

<style>
.custom-tab-wrapper * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.custom-tab-wrapper {
  width: 100%;
  position: relative;
  font-family: 'Open Sans', sans-serif;
}

/* タブボタン */
.tab-buttons {
  position: relative;
  display: flex;
  background: #e0e0e0;
}

.tab-buttons span {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: color 0.3s;
}

.tab-buttons span.active {
  color: #5a3825; /* 下線と同色 */
}

.tab-buttons span:hover {
  color: #5a3825;
}

/* 下線スライダー */
#lamp {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #5a3825;
  transition: all 0.3s ease;
}

/* タブ内容 */
.tab-content {
  background: #e0e0e0;
  padding: 20px;
  clear: both;
  color: #333;
}

.tab-content > div {
  display: none;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
  var $wrapper = $('.custom-tab-wrapper');

  // 初期表示
  $wrapper.find('.tab-content>div').hide();
  $wrapper.find('.tab-content>div').first().show();

  // 初期下線
  var $first = $wrapper.find('.tab-buttons span.active');
  $('#lamp').css({
    left: $first.position().left + 'px',
    width: $first.outerWidth() + 'px'
  });

  $wrapper.find('.tab-buttons span').click(function(){
    var $this = $(this);
    var thisclass = $this.attr('class').split(' ')[0];

    // アクティブ切替
    $wrapper.find('.tab-buttons span').removeClass('active');
    $this.addClass('active');

    // 下線移動
    $('#lamp').css({
      left: $this.position().left + 'px',
      width: $this.outerWidth() + 'px'
    });

    // コンテンツ切替
    $wrapper.find('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(800);
      } else {
        $(this).hide();
      }
    });
  });
});
</script>
  

<div class="sidebar-tab-wrapper">
  <!-- タブ見出し -->
  <div class="tab-buttons">
    <span class="content1 active">人気記事</span>
    <span class="content2">新着記事</span>
    <div id="lamp"></div>
  </div>

  <!-- タブ内容 -->
  <div class="tab-content">
    <div class="content1">
      <ul>
        <li>人気記事1</li>
        <li>人気記事2</li>
        <li>人気記事3</li>
      </ul>
    </div>
    <div class="content2" style="display:none;">
      <ul>
        <li>新着記事1</li>
        <li>新着記事2</li>
        <li>新着記事3</li>
      </ul>
    </div>
  </div>
</div>

<style>
.sidebar-tab-wrapper * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sidebar-tab-wrapper {
  width: 350px; /* サイドバー幅 */
  position: relative;
  font-family: 'Open Sans', sans-serif;
}

/* タブボタン */
.tab-buttons {
  position: relative;
  display: flex;
  background: #e0e0e0;
}

.tab-buttons span {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: color 0.3s;
  font-size: 14px;
}

.tab-buttons span.active {
  color: #5a3825; /* 下線と同色 */
}

.tab-buttons span:hover {
  color: #5a3825;
}

/* 下線スライダー */
#lamp {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #5a3825;
  transition: all 0.3s ease;
}

/* タブ内容 */
.tab-content {
  background: #e0e0e0;
  padding: 12px;
  clear: both;
  color: #333;
  font-size: 13px;
}

.tab-content > div {
  display: none;
}

.tab-content ul {
  list-style: disc;
  padding-left: 16px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
  var $wrapper = $('.sidebar-tab-wrapper');

  // 初期表示
  $wrapper.find('.tab-content>div').hide();
  $wrapper.find('.tab-content>div').first().show();

  // 初期下線
  var $first = $wrapper.find('.tab-buttons span.active');
  $('#lamp').css({
    left: $first.position().left + 'px',
    width: $first.outerWidth() + 'px'
  });

  $wrapper.find('.tab-buttons span').click(function(){
    var $this = $(this);
    var thisclass = $this.attr('class').split(' ')[0];

    // アクティブ切替
    $wrapper.find('.tab-buttons span').removeClass('active');
    $this.addClass('active');

    // 下線移動
    $('#lamp').css({
      left: $this.position().left + 'px',
      width: $this.outerWidth() + 'px'
    });

    // コンテンツ切替
    $wrapper.find('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(400);
      } else {
        $(this).hide();
      }
    });
  });
});
</script>

タブメニュー 実働DEMO

筆者がBloggerで運営している CATCH!!｜東京パフォーマンスドール ファンサイト でもタブメニューを導入しています。 用途としましては、各年ごとにタブを作成し、ライブセットリストをリストアップしています。

DANCE SUMMIT

DANCE SUMMIT

東京パフォーマンスドール｜ダンスサミット セットリスト

www.performancedoll.com

まつゆう
アラフォーゲーマーがいろんなゲームを楽しみながらプレイしています。YouTube・Twitch・Mixerで配信中!! 東京パフォーマンスドールの狂信者。 好きすぎてドメインを取得してファンサイトを運営中。
tweet facebook Pocket B!はてブ LINE

0 comments:

コメントを投稿