アフィンガー５（AFFINGER5）の使える切替タブボタンをちょこっとアレンジしてみよう！

アフィンガー５（AFFINGER5）の切替タグの使い道は？

今回は上記の記事投稿画面で使用できる切替タグコードをの使用方法とちょこっとしたアレンジ方法を紹介します。

☑この記事は以下の内容で構成しています。

アフィンガー５（AFFINGER5）の切替タグの使い道
作成したタグを保存するのにおススメなプラグイン

そもそもアフィンガー５って何？という方は下記の記事をご参照ください！

こちらもCHECK

: アフィンガー５（AFFINGER５）は初心者には難しい？実際に使用してみた感想
アフィンガー5（AFFINGER5）ってよくおススメされるけど実際使いやすいの？アフィンガー5（AFFINGER5）は何に優れてるの？初心者でも使える？今回は上記のフィンガー5（AF ...
続きを見る

アフィンガー５には記事で使用できる装飾期のが多数あり、どれも簡単に使用出来ちゃうのが魅力的なWordpress専用の有料テーマです。

当ブログもアフィンガー５（AFFINGER5）を使用しております

うさぎさん

アフィンガー５（AFFINGER5）は初心者でも操作が簡単なそのまま使える”タグ”が用意されています。

✔その中で「切替タグを使用した切替タブボタンを作成」し記事で見やすくするため、ちょこっとアレンジしていきます。

本記事を読めば知識がなくてもアフィンガー５（AFFINGER5）のタグをちょこっとアレンジ出来るようになります。

1 アフィンガー５（AFFINGER5）で記事に使える切替タグとは？
- 1.1 切替タブボタンのの色を変えてみよう
2 作成したタグを保存するにはプラグインを使う
3 まとめ

アフィンガー５（AFFINGER5）で記事に使える切替タグとは？

記事投稿画面でクリックするだけで使用できるタグの中にあります。

タグ
レイアウト
タグ（切替ボタン）
2つ

以上の流れでクリックするだけで下記のタブボタンが表示できます。

タブ1
タブ2

タブ1のコンテンツ

タブ2のコンテンツ

非常に簡単にタブボタンが設置できるんです！

うさぎさん

あざらし（ペット）

でも少しシンプルすぎない？

確かに知識がなくても使えそうな切り替えタブボタンなんですが、シンプルすぎます（　＾ω＾）

シンプルな上記のタブボタンを使えそうな切り替えボタンにしていきます！

切替タブボタンのの色を変えてみよう

切替タブボタンの色を変えて「メリット・デメリット切替タブボタン」にしてみます。

完成系は下記のようになります！

メリット
デメリット

メリットのイメージカラーは赤に設定

デメリットのイメージカラーは青に設定

 html
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="メリット" bgcolor="タブ内の色" bordercolor="タブの枠色" color="タブ内の文字色" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="デメリット" bgcolor="タブ内の色" bordercolor="タブの枠色" color="" fontweight="タブ内の文字色" checked=""]
[st-tab-main bgcolor="コンテンツ内色" bordercolor="コンテンツ枠色"]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="コンテンツ内色" bordercolor="コンテンツ枠色"]
タブ2のコンテンツ
[/st-tab-main]
[/st-tab-content]

計10箇所の色を変えてみました。

【メリットタブ】