●タブ表示の切り替えを使っている人を見るけど、どうやればいいのかわからない。。
今回はこんなお悩みに答えていきます。
こんな方におすすめ
- WordPressブログ初心者
- 有料テーマAFFINGER5（アフィンガー）を使いこなしたい方
- AFFINGER5の設定がうまくできない方
本記事の信頼性
AFFINGER6（アフィンガー）は『タブ切り替え』が簡単にできますが、そんな設定があったのかとそもそも知らない方も多いと思います。
今回はAFFINGER6の便利機能であるタブ切り替えを簡単に設定できるよう画像を使ってご紹介します。
本記事を読めば、タブ切り替えの設定方法がわかるので、ブログサイトをさらにおしゃれでわかりやすく行うことができます。
ちなみに当ブログではAFFINGER6使用していますが、WordPressテーマ導入がまだの方は方は、WordPressブログのおすすめテーマ11選を徹底比較をご覧ください。
それでは早速始めていきます。
目次
AFFINGER6のタブとは何か？
AFFINGER6のタブとは何か？
タブとは切り替えボタンのことです。ボタン1つで画面を切り替えることができる機能をタブといいます。
具体的には下記のような表示ができます。
上記はボタン切替タブとスライドショーを組み合わせてカテゴリーごとに表示しています。
AFFINGER6（アフィンガー）のスライドショーの設定がわからない方は、『AFFINGER6でスライドショー設定＆カスタマイズ方法』をご覧ください。
それではAFFINGER6でのタブ作成方法について解説していきますね。
AFFINGER6 タブの設定方法について手順を解説【1分で完了】
AFFINGER6 タブの設定方法について手順を解説【1分で完了】
AFFINGER6（アフィンガー）でのタブ設定方法について解説します。タブの設定は超簡単です。
投稿画面で『タグ⇒レイアウト⇒タブ（切替ボタン）』を選択して、切替表示を2つ～4つから選択します。
タグ⇒レイアウト⇒タブ（切り替えボタン）で選択
設定方法としてはこれだけです。タブ切替のショートコードが挿入されます。
タブのショートコード
スポンサーリンク
AFFINGER6 タブ切替ボタンのカスタマイズ方法【各項目の見方も解説】
AFFINGER6 タブ切替ボタンのカスタマイズ方法【各項目の見方も解説】
AFFINGER6のタブ切替ボタンのカスタマイズ方法について解説していきます。
先ほどの手順でタブ（切替ボタン）をクリックすると以下のような表示になると思います。
タブのショートコード
各項目のカスタマイズ方法は以下になります。
タブ切替ボタン各項目カスタマイズ方法
- text：タブ切替ボタンに表示される文字
- bgcolor：タブ切替ボタンの背景色
- bordercolor：タブ切替ボタンの枠線の色
- color：タブ切替ボタン内の文字色
- fontweight：テキストのフォント指定
また赤枠の中に記事やスライドショーを挿入すれば、タブ切替で記事の表示ができます。
AFFINGER6 タブ切替ボタンを使う際の注意点
AFFINGER6 タブ切替ボタンを使う際の注意点
AFFINGER6のタブ切替ボタンですが、１つ注意点があります。それはAMP対応していないということです。
AMP対応とは
AMP(Accelerated Mobile Pages)とは、「モバイルページを高速に表示させるための手法」を表しています。
AMPについては、【AMP】Googleが推進するAMPとは？概要と対応方法まとめで詳しくまとめられていました。
簡単に言うとAMP対応していないと、高速表示のための手法がないため、サイトのレイアウトや記事の表示が崩れてしまうことがあるということです。
タブは１記事内に１つの表示にするようにしましょう。２つ以上配置すると、高速化ができず2つ目のタブ切替の中身が表示されない可能性があります。
まとめ：AFFINGER6のタブ機能を活用してサイトレイアウトを整えよう
まとめ：AFFINGER6のタブ機能を活用してサイトレイアウトを整えよう
今回はAFFINGER6（アフィンガー）のタブ作成方法＆カスタマイズ方法について解説しました。
アフィンガーのショートコードを使えば簡単にタブ切替ボタンを作ることができます。カスタマイズ方法も難しくないので、本記事を参考にぜひ実践して下さい。
最後まで読んでいただきありがとうございました。本記事が参考になれば幸いです。
それでは本日はこの辺りで。
その他AFFINGER6をさらに使いこなしたい！という方は合わせて以下もどうぞ。
-
AFFINGER6（アフィンガー6）の使い方はこれでOK【徹底解説します】
続きを見る
-
AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】
続きを見る
ちなみにAFFINGER6の機能を完全に発揮したい方は、AFFINGER PACK3がおすすめです。
当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益6桁までグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
