Wordpress

アフィンガー5(AFFINGER5)の切替タブボタンを使いやすくアレンジしてみよう!

2020年7月11日

アフィンガー5(AFFINGER5)の切替タグの使い道は?

 

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

 

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

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

 

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

こちらもCHECK

アフィンガー5(AFFINGER5)は初心者には難しい?実際に使用してみた感想

アフィンガー5(AFFINGER5)ってよくおススメされるけど実際使いやすいの? アフィンガー5(AFFINGER5)は何に優れてるの?初心者でも使える?   今回は上記のフィンガー5(AF ...

続きを見る

 

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

 

当ブログもアフィンガー5(AFFINGER5)を使用しております
いばらさん

 

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

 

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

 

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

 

アフィンガー5(AFFINGER5)で記事に使える切替タグとは?

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

  1. タグ
  2. レイアウト
  3. タグ(切替ボタン)
  4. 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箇所の色を変えてみました。

【メリットタブ】

  • タブ内の色⇒ #ffebee
  • タブ内の枠色⇒ #e53935
  • タブ内の文字色⇒#f44336"
  • コンテンツ内色⇒#ffebee
  • コンテンツ枠色⇒#e53935

【デメリットタブ】

  • タブ内の色⇒#E1F5FE
  • タブ内の枠色⇒#039BE5
  • タブ内の文字色⇒#00008b
  • コンテンツ内色⇒#E1F5FE
  • コンテンツ枠色⇒#039BE5

 

✔カラーコードはアフィンガー5(AFFINGER5)だとタグ一覧から17種類のコードが簡単に分かるようになっています!

 

  1. タグ
  2. ショートコード補助
  3. HTMLカラーコード
  4. 好きなカラー選択

 

カラーコードは他にもありますので自分の好みを見つけてみましょう。

 

参考にするのならばたくさんの色見本があり分かりやすいサイト⇒原色大辞典

 

文字のイメージと合わせた色に変えるだけでメリハリついた見やすいボタンになります!
いばらさん

 

【補足】記事内にコードをそのままの状態表示したい場合には”pre"コードを使用しましょう!

アフィンガー5(AFFINGER5)だとタグ一覧に”pre"タグがあり挿入することで<pre>~</pre>のタグが挿入できます。

 

 

作成したタグを保存するにはプラグインを使う

作成したコードを保存するには2種類の簡単な方法があります。

  • STINGERタグ管理プラグイン3
  • AddQuickTagプラグイン

以上のプラグインを使用することで作成したコードをショートコード化でき、保存することで簡単に使えるように管理できるプラグインです!

 

私のおススメはアフィンガー5(AFFINGER5)を使用しているのであれば今だけ購入特典でついてくるSTINGERタグ管理プラグイン3を使う事です!
いばらさん

 

✔アフィンガー5を購入すると「STINGERタグ管理プラグイン3」が無料で手に入るのは今だけ!!!

 

作ったコードをいちいち記事から引っ張ってきてコピペするのは大変面倒な作業ですよね。保存して呼び出すだけで管理するのが一番効率が良い方法です。

 

ポイント

STINGERタグ管理プラグイン3によく使うものは何でも登録できます!

  1. 良く使うテキスト
  2. アフィリエイト広告コード
  3. 作成したカスタムボタンコード
  4. 構造をアレンジしたコード
  5. 色を変えてアレンジしたコード

 

まとめ

今回はアフィンガー5(AFFINGER5)の切替タグで切り替えタブボタンを作り色を変えるアレンジ方法を紹介してきました。

切替タブボタンを設置するだけで少しこなれた感も出て見やすい記事へと変えることもできます。

  • 簡単なアレンジとして色を変えてみる
  • 切替タグを使いやすいタブボタンへとアレンジしてみる
  • 色を変えて使いやすくしたタグを保存しすぐ呼び起こせるようにしておく

 

タグをそのまま使うのもいいけども、少し色を変えたり工夫を入れることで

読み手にとって見やすい記事へ改善していけます!

 

ここまで読んでくださりありがとうございました。

-Wordpress
-

© 2020 IBARAのMITI