スポンサーリンク

【つぶやき】タブでコンテンツの表示 | プラグインなしでやってみた！

結耶のつぶやき

当サイトの一部のページでタブボタンでコンテンツの表示切り替えられるようにしています。

今まではプラグインを使用して「タブ切り替え」を作成していましたが…自分好みのデザインにできず悩んでいました。そこで…

結耶
結耶

やっぱり自分好みのデザインにするには「自作」するしかないよね！難しそうだけどやってみよう！

と思いタブを自作してみることにしました。

スポンサーリンク

タブを作るには？

「タブ」を作る方法を調べると主に3つの方法があるようです。

  • プラグイン
  • CSS
  • JavaScript

今回はプラグインを使わずに作りたいので、「CSS」か「JavaScript」のどちらかなのですが…いろいろ調べてみると「CSS」はHTMLとCSSの2つで作れるので「楽かな？」とも思いましたが、タブを追加する場合HTMLとCSSを逐一増やさなければならないためちょっと手間です(^^;)

JavaScriptはJavaScript(JS)、jQualityとか種類(？)がありますが、タブを作るにはHTMLとJavaScript、CSSを設定する必要がありますが、タブの追加はHTMLだけで簡単にできます。

きらり
きらり

それでどっちにしたの？

結耶
結耶

実は以前「CSS」でタブ設置したけど…やっぱり追加が面倒でプラグインに戻しちゃったんだよねwだから今回はJavaScriptにしました。

タブを作ってみた！

とはいえ、私はJavaScriptに関しての知識がないので下の記事のコードを使わせてもらいました！

きらり
きらり

結耶さん、jQueryはJavaScriptなの？

結耶
結耶

そうみたいだよ。私もよく解らないけどね(^^;)

jQueryとは？

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。

引用：Wikipedia「jQuery」より引用

ということでJavaScript(jQuery)、HTML、CSSコードをコピーして所定の場所に貼り付け｡

結耶
結耶

jQueryコードの挿入先は上の記事でも紹介されています。Luxeritasをお使いの場合は［Luxeritas］→［子テーマ編集］→［JavaScript］に貼り付けてください。

jQuery、HTMLコードについては特に変更するところはありません。CSSもデザインがOKなら色をご自分のサイトに合わせて変更するだけでいいと思います。

きらり
きらり

へぇ～これで設置できるんだねぇ。思ったより簡単だね。

結耶
結耶

うんうん。簡単でしたね。まぁ、私はデザインを少しいじったけどねw

デザインを変えてみた！

タブ1
タブ2
タブ3
コンテンツ1（タブ1）
コンテンツ2（タブ2）
コンテンツ3（タブ3）

私はコピペしたCSSをベースに上のようにしてみました(*^^*) ボタンをクリックすると吹き出し風になるようにしてみました。

※参考にCSSを載せておきます。

/*--------------------------------------
  タブ切り替え
--------------------------------------*/
.tab-wrap{
    margin-bottom: 40px;
}
.tab-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}

/*タブボタン*/
.tab{
    flex-grow: 1;
    background: #FFF;   /*タブのの背景色*/
    border:1px solid #a61919;   /*枠線の太さ 線種 色*/
    color: #000;    /*文字の色*/
    cursor: pointer;
    display: inline-block;
    font-size: 13px;    /*文字サイズ*/
    font-weight: bold;   /*太字*/
    margin: 0 5px 15px;
    padding: 3px 8px;
    text-align: center;
    transition: 1s;
    vertical-align: bottom;
}

/* ボタン クリック(選択時)*/
.tab.is-active{
    color:#FFF;    /*文字の色*/
    transition: 1s;
    background:#a61919;    /*背景色*/
    position:relative;
}

.tab.is-active:after{  /*三角部分*/
content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #a61919;
}

/*コンテンツ表示部分*/
.panel-group{
    min-height:100px;
    margin-top:15px;
    border-top: 5px solid #a61919;
    border-bottom: 5px solid #a61919;
    padding: 10px;
}
.panel{
    display:none;
}

.panel.is-show{
    display:block;
}

タブを追加する

きらり
きらり

結耶～、タブを追加するにはどうしたらいいの？ついでに教えてよ～。

結耶
結耶

タブを追加するにはHTMLのボタンとコンテンツ部分を追加すればいいんだよ。

※ボタン部分

<div class="tab"> タブ </div>

※コンテンツ表示部分

<div class="panel"> コンテンツ </div>

ちなみに

ちなみに私が使わせて貰ったHTMLコードでタブボタンにdivga使われています。

他の記事をみるとdivではなくulを使っているものが多いです。なので試しにdivをulに変えてみました。

<ul class="tab-group">
    <li class="tab is-active">タブ1</li>
    <li class="tab">タブ2</li>
    <li class="tab">タブ3</li>
</ul>
結耶
結耶

ulに変えても少し余白などの微調整が必要ですが、特に問題ありませんでしたw

最後に

今回は「タブ」をJavaScript(jQuery)で実装してみたので、備忘録と紹介を兼ねて書いてみました。

これで私の悩みも解消しそうです(*^^*)

「私はCSSの方がいいな～」という方は検索すると解説(コピペOK)しているサイトがたくさんあるのでそちらを参考にしてください。

今回参考にさせてもらった記事

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM