
●タブ表示の切り替えを使っている人を見るけど、どうやればいいのかわからない。。
今回はこんなお悩みに答えていきます。
こんな方におすすめ
- WordPressブログ初心者
- 有料テーマAFFINGER5(アフィンガー)を使いこなしたい方
- AFFINGER5の設定がうまくできない方
本記事の信頼性
AFFINGER5(アフィンガー)は『タブ切り替え』というのが簡単にできますが、そんな設定があったのかとそもそも知らない方も多いと思います。
今回はAFFINGER5の便利機能であるタブ切り替えを簡単に設定できるように画像を使って丁寧に説明していきます。
本記事を読めば、タブ切り替えの設定方法がわかるので、ブログサイトをさらにおしゃれでわかりやすく行うことができます。
ちなみに当ブログでは『AFFINGER5』を使用していますが、WordPressテーマ導入がまだの方は方は、『WordPressブログのおすすめ有料テーマ7つを徹底比較』をご覧ください。
それでは早速始めていきます。
目次
【AFFINGER5】そもそもタブとは何か?

【AFFINGER5】そもそもタブとは何か?

タブとは切り替えボタンのことです。ボタン1つで画面を切り替えることができる機能をタブといいます。
具体的には下記のような表示ができます。
上記はボタン切替タブとスライドショーを組み合わせてカテゴリーごとに表示しています。
AFFINGER5(アフィンガー)のスライドショーの設定がわからない方は、『AFFINGER5でスライドショー設定&カスタマイズ方法』をご覧ください。

それではAFFINGER5でのタブ作成方法について解説していきますね。
AFFINGER5 タブの設定方法について手順を解説【1分でできます】

AFFINGER5 タブの設定方法について手順を解説【1分でできます】
それではAFFINGER5(アフィンガー)でのタブ設定方法について解説します。
タブの設定は超簡単です。
投稿画面で『タグ⇒レイアウト⇒タブ(切替ボタン)』を選択して、切替表示を2つ~4つから選択します。

タグ⇒レイアウト⇒タブ(切り替えボタン)で選択
設定方法としてはこれだけです。
タブ切替のショートコードが挿入されます。

タブのショートコード

[ad01]
AFFINGER5 タブ切替ボタンのカスタマイズ方法【各項目の見方も解説】

AFFINGER5 タブ切替ボタンのカスタマイズ方法【各項目の見方も解説】
AFFINGER5のタブ切替ボタンのカスタマイズ方法について解説していきます。
先ほどの手順でタブ(切替ボタン)をクリックすると以下のような表示になると思います。

タブのショートコード
各項目のカスタマイズ方法は以下になります。
・text:タブ切替ボタンに表示される文字
・bgcolor:タブ切替ボタンの背景色
・bordercolor:タブ切替ボタンの枠線の色
・color:タブ切替ボタン内の文字色
・fontweight:テキストのフォント指定
また赤枠の中に記事やスライドショーを挿入すれば、タブ切替で記事の表示ができます。

AFFINGER5 タブ切替ボタンを使う際の注意点

AFFINGER5 タブ切替ボタンを使う際の注意点
ここまで紹介してきたAFFINGER5のタブ切替ボタンですが、1つ注意点があります。
それはAMP対応していないということです。
AMP対応とは
AMP(Accelerated Mobile Pages)とは、「モバイルページを高速に表示させるための手法」を表しています。
AMPについては、【AMP】Googleが推進するAMPとは?概要と対応方法まとめで詳しくまとめられていたので、参考にしてください。
簡単に言うとAMP対応していないと、高速表示のための手法がないため、サイトのレイアウトや記事の表示が崩れてしまうことがあるということです。
タブは1記事内に1つの表示にするようにしましょう。
2つ以上配置すると、高速化ができず2つ目のタブ切替の中身が表示されない可能性があります。

まとめ:AFFINGER5のタブ機能を活用してサイトレイアウトを整えよう

まとめ:AFFINGER5のタブ機能を活用してサイトレイアウトを整えよう
今回はAFFINGER5(アフィンガー)のタブ作成方法&カスタマイズ方法について解説しました。
アフィンガーのショートコードを使えば簡単にタブ切替ボタンを作ることができます。
カスタマイズ方法も難しくないので、本記事を参考にぜひ実践して下さい。

最後まで読んでいただきありがとうございました。本記事が参考になれば幸いです。
それでは本日はこの辺りで。
AFFINGER5のレビュー記事について
その他AFFINGER5の設定方法について
-
AFFINGER6でスライドショー設定方法【初心者でも簡単にできます】
続きを見る
-
【AFFINGER6】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】
続きを見る