SANGOのテーマのトップページにはタブ切り替えで、各カテゴリのサムネイル表示ができるブロックがありますが、これを好きなところに色々使えるようにタブ切り替えのデザイン2種を作ってみました。
今回は、SANGOのテーマに合いそうなタブ切り替えボタンのデザイン2種についてご紹介します。
2つとも、各タブ内にはHTMLでfontawesomeを入れ、HTML＋CSSのコピペでできるように作っています。
2つボタンのタブ切り替え
SANGOのテーマにトップページ用に標準で搭載されている、2つボタンのタブ切り替えのオブジェクトです。
[card2 id="投稿ID"]サンプルの切り替えで表示される関連記事は、card2で出力される横長タイプのショートコードを使って表示しています。
tabs. の色は#FFFFFFで背景白で入れていますが、
background-color: transparent;背景を透明の transparent にするなどして、サイト内のトンマナに合わせてご利用ください。
コードを表示する
HTML
<div class="wrapper">
<div class="tabs">
<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item tab_item01" for="all"><i class="fas fa-rss"></i> 総合</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item tab_item02" for="programming"><i class="fas fa-rss"></i> プログラミング</label>
<div class="tab_content" id="all_content">
総合の内容がここに入ります
</div>
<div class="tab_content" id="programming_content">
プログラミングの内容がここに入ります
</div>
</div>
</div>
CSS
.wrapper{
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
width: 100%;
margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
width: calc(100%/2);
height: 50px;
background-color: #FFFFFF;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.tab_item01 {
border-radius: 6px 0 0 6px;
}
.tab_item02 {
border-radius: 0 6px 6px 0;
}
.tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 20px 2px 0;
clear: both;
overflow: hidden;
}
.tab_content{
position: relative; /* 位置指定 */
animation: anime1 1s ease; /* アニメーション指定 */
}
@keyframes anime1 {
0% {
opacity: 0; /* 透明度指定 */
top: 50px; /* 位置指定 */
}
100% {
opacity: 1; /* 透明度指定 */
top: 0; /* 位置指定 */
}
}
/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #6bb6ff;
color: #fff;
}3つボタンのタブ切り替え
2つボタンの1個ボタンを増やした3つボタンのタブ切り替えのオブジェクトです。
コードを表示する
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="wrapper">
<div class="tabs">
<input id="at1" type="radio" name="tab_item2" checked>
<label class="tab_item2 tab_item01" for="at1"><i class="fas fa-rss"></i> １つ目</label>
<input id="at2" type="radio" name="tab_item2">
<label class="tab_item2 tab_item02" for="at2"><i class="fas fa-rss"></i> ２つ目</label>
<input id="at3" type="radio" name="tab_item2">
<label class="tab_item2 tab_item03" for="at3"><i class="fas fa-rss"></i> ３つ目</label>
<div class="tab_content" id="at1_content">
１つ目の内容がここに入ります
</div>
<div class="tab_content" id="at2_content">
2つ目の内容がここに入ります
</div>
<div class="tab_content" id="at3_content">
3つ目の内容がここに入ります
</div>
</div>
</div>
CSS
/*--------------------------------------
3つのタブ切り替え
--------------------------------------*/
.wrapper{
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
width: 100%;
margin: 0 auto;
}
/*タブのスタイル*/
.tab_item2 {
width: calc(100%/3);
height: 50px;
background-color: #FFFFFF;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.tab_item01 {
border-radius: 6px 0 0 6px;
}
.tab_item02 {
border-radius: 0;
}
.tab_item03 {
border-radius: 0 6px 6px 0;
}
/*ラジオボタンを全て消す*/
input[name="tab_item2"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 20px 2px 0;
clear: both;
overflow: hidden;
}
.tab_content{
position: relative; /* 位置指定 */
animation: anime1 1s ease; /* アニメーション指定 */
}
@keyframes anime1 {
0% {
opacity: 0; /* 透明度指定 */
top: 50px; /* 位置指定 */
}
100% {
opacity: 1; /* 透明度指定 */
top: 0; /* 位置指定 */
}
}
/*選択されているタブのコンテンツのみを表示*/
#at1:checked ~ #at1_content,
#at2:checked ~ #at2_content,
#at3:checked ~ #at3_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item2 {
background-color: #6bb6ff;
color: #fff;
}