大まかにカテゴリーを分けると釣りとブログについて書いている当サイト。
トップページを開いたときにごちゃごちゃ記事が混ざっているのは嫌だったので、
と思っていて。
今回、思い切って導入してみました！
タブ切り替えの動作イメージ
初期状態ではボタン①が選択されているので（変更可能）、ボタン②、ボタン③を押してみてください。
クリックすることによって下部に表示されるコンテンツが切り替わっていると思います。
See the Pen タブ切り替え by はっちゃん (@hacchan) on CodePen.
参考にさせていただいたサイト
今回『ものぐさWEBノート』さんから知恵をお借りしました！！ヾ(*・∀・)
タブ切り替えするためのコード
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><input>（ラジオボタン）と <label>タグがセットで１つのタブができあがります。
<input>（ラジオボタン）に、タブのオン／オフ（そのタブが選択されているかいないか）を拾ってもらい、<label>の方でタブの見た目を整えます。
HTMLのポイント
※ポイントとなる部分のみを抜粋しています。
<input>のname属性に同じ名前を付ける。- ボタン① <input id=”TAB-01” name=”TAB” />
- ボタン② <input id=”TAB-02” name=”TAB” />
- ボタン③ <input id=”TAB-03”name=”TAB” />
- １行の
<input>のid属性と<label>のfor属性に同じ名前を付ける。- ボタン①<input id=”TAB-01” /><label for=”TAB-01“></label>
- ボタン②<input id=”TAB-02” /><label for=”TAB-02“></label>
- ボタン③<input id=”TAB-03” /><label for=”TAB-03“></label>
- 初期状態でアクティブにするタブ
<input>のchecked=”checked“を指定します
タブを複数設置する場合、タブ切り替え毎に<input>のname属性にそれぞれ別の名前を付けます。
名前の付け方はTAB-1、TAB-2、TAB1-1など、他と同じにならなければ自分の分かりやすいようになんでもOK。
CSS
タブのデザインはこのサイトに合わせた色の吹き出しにしています。
/**************************
タブ切り替え
***************************/
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:5px 0;
}
.tab-label {
color: White;
background: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:#AEC4E5;/*背景色*/
}
.tab-switch:checked+.tab-label:after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top:10px solid #AEC4E5;
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;
}
タブを入れ子にして複数設置
この方法を使えばタブを複数設置できるとのことで、
新着記事 人気記事
この２つを各カテゴリごとにタブ切り替え
できるようにしました。
タブ複数設置DEMO
カテゴリーのタブの中に新着／人気の切り替えタブを入れています。
See the Pen タブ切り替え（複数設置） 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>当ブログのトップページに採用
そんなこんなで当ブログにもタブ切り替えが設置され、新トップページが完成いたしました～＼(^-^)／
ショートコードを利用した新着記事と人気記事
新着記事と人気記事についてはワードプレステーマ「Cocoon」のショートコードを使って表示しています。
記事作成画面でショートコードのブロックを選択してコードを書きます。
[new_list][popular_list]カテゴリや表示する記事数を指定したり、表示形式をある程度変えることもできます。
使い方はCocoon公式サイトをご覧ください。
ひとこと
HTMLは複雑そうに見えてもそのままコピペでき、それぞれの属性につける名前を間違わないように（かぶらないように）すれば難なく設置できるかと思います。
自分で作るには難しいと思っていたタブ切り替えを、情報を公開しているサイト様々のおかげで実装することができて満足しています♪(*・ω・人)
コメント