HTMLとCSSだけでタブ切り替えを自作する（複数設置可／JavaScriptなし）

大まかにカテゴリーを分けると

釣りと ブログ

について書いている当サイト。

トップページを開いたときにごちゃごちゃ記事が混ざっているのは嫌だったので、

と思っていて。

タブ切り替えは実は人気有料テーマのSWELLではHTMLやCSSをいじらずにサクッと作れてしまうようですが、私が使っている無料テーマのCocoonはそう簡単にはいかないのです。

手作りでなんとか設置できないかな～と調べること数日。

今回、思い切って導入を決めました！

この記事を読めばタブ切り替えを自作し機能的な有料テーマ風にすることができます。

WordPressで使う際の注意点

まずはじめに注意点です。

（自動的に<p></p>で囲まれ強制的に改行されてしまうため、タブのレイアウトが崩れます）

いずれかの方法を選択してください。

• ブロックエディタでカスタムHTMLに記述する（こちらがベストです）
• <p></p>がついてしまった場合はタグを削除する
• TinyMCE Advancedプラグインで段落を保持するように設定する（未検証なのでおすすめしません）

タブ切り替えの動作イメージ

初期状態ではタブ①が選択されているので（変更可能）、タブ②、タブ③を押してみてください。

クリックすることによって下部に表示されるコンテンツが切り替わっていると思います。

See the Pen タブ切り替え by はっちゃん (@hacchan) on CodePen.

タブ切り替えするためのコード

まずはこちらをご覧ください。

HTML

記事作成画面：HTMLモードで入力します。

<div class="tab-wrap">
 <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">タブ①</label>
    <div class="tab-content">
      コンテンツ①をここに入れる
    </div>

 <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">タブ②</label>
    <div class="tab-content">
      コンテンツ②をここに入れる
    </div>

 <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">タブ③</label>
    <div class="tab-content">
      コンテンツ③をここに入れる
    </div>
</div>

HTMLの解説

ずらーっと並ぶと何がなんだかよく分からないように見えますが、タブ１つのコードはこの部分です。

<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>
    <div class="tab-content">
      コンテンツ①をここに入れる
    </div>

タブ自体を作るHTML部分

<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>

<input>（radioボタン）と<label>タグがセットで１つのタブができあがります。

<input>のtypeは”radio”にします。

radioボタンの「同時にひとつのボタンしか選択できない」（ひとつのradioボタンをチェックすると他のradioボタンのチェックが自動的に外れる）性質を利用してタブ切り替えを作成します。

<input>（radioボタン）に、タブのオン／オフ（そのタブが選択されているかいないか）を拾ってもらい、タブとなる部分は<label>を使って表示させて見た目を整えます。

それぞれの<input>のid属性と<label>のfor属性の名前を合わせます。

タブが選択された際に表示する内容のHTML部分

<div class="tab-content">
      コンテンツ①をここに入れる
</div>

ここでは「tab-content」というクラス名をつけ、タブが選択された際の表示切り替えに利用します。

HTMLのポイント

※ポイントとなる部分のみを抜粋しています。

1. <input> のname属性に同じ名前を付ける。
   
   
   1. タブ① <input id=”TAB-01” name=”TAB” />
   2. タブ② <input id=”TAB-02” name=”TAB” />
   3. タブ③ <input id=”TAB-03”name=”TAB” />


2. １行の<input>のid属性と<label>のfor属性に同じ名前を付ける。
   
   
   1. タブ①<input id=”TAB-01” /><label for=”TAB-01“></label>
   2. タブ②<input id=”TAB-02” /><label for=”TAB-02“></label>
   3. タブ③<input id=”TAB-03” /><label for=”TAB-03“></label>


3. 初期状態でアクティブにするタブ
   1. <input>のchecked=”checked“を指定します

ここがとても大事

同一ページ内にタブを複数設置する場合に注意すること。

1. タブ切り替え毎に<input>のname属性にそれぞれ別の名前を付けます。


2. <input>のid属性と<label>のfor属性が別のタブ切り替えとかぶらないように気をつける。（もちろん同タブ切り替え内でもかぶらないようにします）

名前の付け方はTAB-1、TAB-2、TAB1-1など、他と同じにならなければ自分の分かりやすいようになんでもOK。

作りたいタブ切り替えすべてに違う名前が必要なんだね！HTMLをコピペしてそのまま使い回すと重複してタブ切り替えが動かなくなってしまうよ。

CSS

CSSでタブのデザインを整えます。
（このコードでは吹き出しにしています。）

/**************************
 タブ切り替え
***************************/

/* 親要素でタブの横並びのためflexを指定
*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
}


/* タブ１～３と書いているタブメニュー部分
*/
.tab-label {
  color: White;
  background-color:lightgray;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* アクティブなタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
 background-color:#999fad;/*背景色*/
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
       border-top:10px solid #999fad;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に*/
.tab-switch {
  display: none;
}

タブの数は自由に変更できます

HTMLの解説でも書いた通り、タブひとつ分のHTMLはこのように<input><label>とタブに表示するコンテンツがワンセットになっています。

<input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">タブ③</label>
    <div class="tab-content">
      コンテンツ③をここに入れる
    </div>

タブを増やす場合

１行の<input>のid属性と<label>のfor属性は必ず合わせ、

既存のタブとは違う名前をつけてワンセットのHTMLコードを追加、タブ名、表示する内容等を編集します。

タブを減らす場合

必要ないタブをワンセットまるごと削除します。

このとき外側の<div class=”tab-wrap”>を閉じている一番最後の</div>まで削除しないように注意しましょう。

タブを入れ子にして複数設置

このカスタマイズ方法を使うとタブを入れ子にして複数設置できるので、

新着記事 人気記事

この２つを各カテゴリごとにタブ切り替え

できるようにしました。

タブ複数設置DEMO

カテゴリーのタブの中に新着／人気の切り替えタブを入れています。

See the Pen Untitled by はっちゃん (@hacchan) on CodePen.

HTML（少し長くなります）

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked"><label class="tab-label" for="TAB-01">カテゴリ①</label>
    <div class="tab-content">
        
<div class="tab-wrap">
    <input name="TAB-1" class="tab-switch" id="TAB-1-1" type="radio" checked="checked"><label class="tab-label" for="TAB-1-1">新着記事</label>
    <div class="tab-content">
↓ここにカテゴリ①の新着記事を表示↓
      
    </div>

    <input name="TAB-1" class="tab-switch" id="TAB-1-2" type="radio"><label class="tab-label" for="TAB-1-2">人気記事</label>
    <div class="tab-content">
↓ここにカテゴリ①人気記事を表示↓

    </div>
</div>
    </div>


    <input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">カテゴリ②</label>
    <div class="tab-content">

<div class="tab-wrap">
    <input name="TAB-2" class="tab-switch" id="TAB-2-1" type="radio" checked="checked"><label class="tab-label" for="TAB-2-1">新着記事</label>
    <div class="tab-content">
↓ここにカテゴリ②の新着記事を表示↓

    </div>

    <input name="TAB-2" class="tab-switch" id="TAB-2-2" type="radio"><label class="tab-label" for="TAB-2-2">人気記事</label>
    <div class="tab-content">
↓ここにカテゴリ②の人気記事を表示↓

    </div>
</div>

    </div>

    <input id="TAB-03" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-03">カテゴリ③</label>
    <div class="tab-content">

<div class="tab-wrap">
    <input name="TAB-3" class="tab-switch" id="TAB-3-1" type="radio" checked="checked"><label class="tab-label" for="TAB-3-1">新着記事</label>
    <div class="tab-content">
↓ここにカテゴリ③の新着記事を表示↓

    </div>

    <input name="TAB-3" class="tab-switch" id="TAB-3-2" type="radio"><label class="tab-label" for="TAB-3-2">人気記事</label>
    <div class="tab-content">
↓ここにカテゴリ③の人気記事を表示↓

    </div>
</div>



    </div>
</div>

当ブログのトップページに採用

そんなこんなで当ブログにもタブ切り替えが設置され、新トップページが完成いたしました～＼(^-^)／

カテゴリー①

新着記事

↓ここにカテゴリ①の新着記事を表示↓

カスタマイズ

Pochipp（ポチップ）／リンクボタンの並び順をアマゾン先頭にする方法（CSS）

2023年03月24日2023年03月25日

カスタマイズ

【Cocoon】表示する記事を選べるナビカードが便利／横並び、リボンの色を変更する方法（ショートコード、ウィジェット、CSS利用）

2023年03月14日2023年03月24日

カスタマイズ

Pochipp(ポチップ)をウィジェットで使う方法（カスタムHTMLにショートコード）

2023年02月10日2023年03月24日

人気記事

↓ここにカテゴリ①人気記事を表示↓

カスタマイズ

CSSでテキストをなめらかに点滅させる方法（コピペＯＫ）

2021年01月25日2023年03月24日

カスタマイズ

ボックスデザイン（囲み枠）CSSコピペOK！／ブログを見やすく装飾しよう

2022年08月24日2023年03月24日

カスタマイズ

Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ使用）

2022年10月05日2023年03月24日

カテゴリー②

新着記事

↓ここにカテゴリ②の新着記事を表示↓

運営

パーマリンクを変更するには？（日付を削除）エックスサーバーでの301リダイレクト方法（サブドメイン、サブディレクトリによる違い）まとめ

2023年03月14日2023年03月24日

運営

「Pochipp(ポチップ)」と「もしもアフィリエイト」比較／Amazonアソシエイト、セール情報が使えるメリットをご紹介

2023年02月19日2023年03月26日

運営

ブログ運営／検索パフォーマンス、ドメインパワー、収益、Twitterなどを見る

2023年02月02日2023年03月13日

人気記事

↓ここにカテゴリ②の人気記事を表示↓

運営

GoogleAdSense（グーグルアドセンス）導入！審査に合格するための準備

2020年01月20日2023年03月25日

運営

「Pochipp(ポチップ)」と「もしもアフィリエイト」比較／Amazonアソシエイト、セール情報が使えるメリットをご紹介

2023年02月19日2023年03月26日

運営

自己クリックによるポリシー違反！GoogleAdSense（グーグルアドセンス）アカウントが一時停止になってしまった

2020年02月01日2023年03月24日

カテゴリー③

新着記事

↓ここにカテゴリ③の新着記事を表示↓

カスタマイズ

Pochipp（ポチップ）／リンクボタンの並び順をアマゾン先頭にする方法（CSS）

2023年03月24日2023年03月25日

カスタマイズ

【Cocoon】表示する記事を選べるナビカードが便利／横並び、リボンの色を変更する方法（ショートコード、ウィジェット、CSS利用）

2023年03月14日2023年03月24日

カスタマイズ

Pochipp(ポチップ)をウィジェットで使う方法（カスタムHTMLにショートコード）

2023年02月10日2023年03月24日

人気記事

↓ここにカテゴリ③の人気記事を表示↓

カスタマイズ

CSSでテキストをなめらかに点滅させる方法（コピペＯＫ）

2021年01月25日2023年03月24日

カスタマイズ

ボックスデザイン（囲み枠）CSSコピペOK！／ブログを見やすく装飾しよう

2022年08月24日2023年03月24日

カスタマイズ

Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ使用）

2022年10月05日2023年03月24日

タブのデザイン

ＣＳＳを少し変更すると、シンプルなタブのデザインにすることもできます。

See the Pen タブ切り替え（複数設置） by はっちゃん (@hacchan) on CodePen.

ショートコードを利用した新着記事と人気記事

新着記事と人気記事についてはワードプレステーマ「Cocoon」のショートコードを使って表示しています。

記事作成画面でショートコードのブロックを選択してコードを書きます。

[new_list]

[popular_list]

カテゴリや表示する記事数を指定したり、表示形式をある程度変えることもできます。

使い方はCocoon公式サイトをご覧ください。

参考にさせていただいたサイト

今回『ものぐさWEBノート』さんから知恵をお借りしました！！ヾ(*・∀・)

CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する

先日コメントにてCocoonで使えるのオプションと使い方まとめで実装しているタブ切り替えについて質問をいただきました。これ↓このタブ切り替えは、ラジオボタンを利用してCSSだけで切り替えを実装出来るこちらのページを参考にカスタマイズしたもの

web.monogusa-note.com

ひとこと

HTMLは複雑そうに見えてもそのままコピペでき、それぞれの属性につける名前を間違わないように（かぶらないように）すれば難なく設置できるかと思います。

自分で作るには難しいと思っていたタブ切り替えを、情報を公開しているサイト様々のおかげで実装することができて満足しています♪(*・ω・人)