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

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

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

記事内3タブVer.

タブ1 タブ2 タブ3

タブ1の内容

タブ2の内容

タブ3の内容

こんなシーンで使えます

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

サイドバー2タブVer.

こんなシーンで使えます

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

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

記事内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!!｜東京パフォーマンスドールファンサイトでもタブメニューを導入しています。用途としましては、各年ごとにタブを作成し、ライブセットリストをリストアップしています。

Blogger TIPS

Pages

2026/02/18

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

記事内3タブVer.

こんなシーンで使えます

サイドバー2タブVer.

こんなシーンで使えます

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

タブメニュー実働DEMO

0 件のコメント:

コメントを投稿

Pages

2026/02/18

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

記事内3タブVer.

こんなシーンで使えます

サイドバー2タブVer.

こんなシーンで使えます

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

タブメニュー 実働DEMO

0 件のコメント:

コメントを投稿

タブメニュー実働DEMO