CSSでタブ切り替えを設置する(複数設置可)

アイキャッチ/タブカスタマイズ

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

釣りブログ

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

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

  • カテゴリーをタブ切り替えにしたいな

と思っていて。

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

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

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

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

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

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

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の解説

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

<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>(ラジオボタン)と <label>タグがセットで1つのタブができあがります。

<input>(ラジオボタン)に、タブのオン/オフ(そのタブが選択されているかいないか)を拾ってもらい、<label>の方でタブの見た目を整えます。

HTMLのポイント

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

  1. <input>name属性に同じ名前を付ける。

    1. ボタン① <input id=”TAB-01name=”TAB” />
    2. ボタン② <input id=”TAB-02name=”TAB” />
    3. ボタン③ <input id=”TAB-03name=”TAB” />

  2. 1行の<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でタブのデザインを整えます。
(このコードでは吹き出しにしています。)

/**************************
 タブ切り替え
***************************/
.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;
  border-radius: 2px;
  position: relative;
}

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

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.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;
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

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

この方法だとタブを複数設置できるので、

新着記事 人気記事

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

できるようにしました。

タブ複数設置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>

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

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

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

記事は見つかりませんでした。

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

人気記事は見つかりませんでした。

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

記事は見つかりませんでした。

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

人気記事は見つかりませんでした。

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

記事は見つかりませんでした。

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

人気記事は見つかりませんでした。

タブのデザイン

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

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

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

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

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

新着記事を表示するショートコード
[new_list]
人気記事を表示するショートコード
[popular_list]

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

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

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

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

シンプルでオシャレなサイト。とてもとても分かりやすいです!^^

ひとこと

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

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

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

  1. 匿名 より:

    コメント失礼します。

    HTMLにある「コンテンツをここに入れる」には何を入れたら良いのでしょうか?

    タブ自体は奇麗に表示されていますが、各タブの下にカテゴリーを表示したいのですが、URLなどを入力するようなものではないようですし…

    他のサイトも拝見したのですが、ここに何を入れるとカテゴリーや記事が表示されるのかわからず質問させて頂きました。

    • はっちゃんはっちゃん より:

      新着記事や人気記事を表示したいならこちらの記事に書いたショートコード(Cocoon独自のものです)を使いますが、

      カテゴリーを表示したいということであれば、トップページの作り方という記事を更新しましたのでこちらが参考になるかと思います^^

      https://turicco.com/2022/10/05/cocoon-toppage/#toc14

  2. 匿名 より:

    返信ありがとうございます。

    Cocoonではないのでショートコードは使えないのですが、記事拝見させて頂きました。
    色々と試みてみたのですが、結局、素人にはどの要素をいれるとカテゴリーの記事一覧が表示されるのかわからずでした…

    もう少し頑張ってみます。

タイトルとURLをコピーしました