SANGOのテーマに合いそうなタブ切り替えボタンのデザイン2種

SANGOのテーマのトップページにはタブ切り替えで、各カテゴリのサムネイル表示ができるブロックがありますが、これを好きなところに色々使えるようにタブ切り替えのデザイン2種を作ってみました。

今回は、SANGOのテーマに合いそうなタブ切り替えボタンのデザイン2種についてご紹介します。

2つとも、各タブ内にはHTMLでfontawesomeを入れ、HTML＋CSSのコピペでできるように作っています。

2つボタンのタブ切り替え
3つボタンのタブ切り替え

2つボタンのタブ切り替え

SANGOのテーマにトップページ用に標準で搭載されている、2つボタンのタブ切り替えのオブジェクトです。

[card2 id="投稿ID"]

サンプルの切り替えで表示される関連記事は、card2で出力される横長タイプのショートコードを使って表示しています。

tabs. の色は#FFFFFFで背景白で入れていますが、

background-color: transparent;

背景を透明の transparent にするなどして、サイト内のトンマナに合わせてご利用ください。

総合 WEB

2020年5月20日SEOでやってはいけないHTML＋CSSの6つの偽装行為とHTMLの適切なマークアップ

2020年5月16日SANGOのテーマに合いそうなボタン＋アコーディオンのデザイン3種

コードを表示する

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つボタンのタブ切り替えのオブジェクトです。

　１つ目　２つ目　３つ目

2020年5月16日SANGOのテーマに合いそうなボタン＋アコーディオンのデザイン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;
}