AFFINGER6でタブを設定する方法は超簡単です【初心者向け】

困ってる人

●WordPressテーマAFFINGER6を購入したけどタブの切り替え方法がわからない。。

●タブ表示の切り替えを使っている人を見るけど、どうやればいいのかわからない。。

今回はこんなお悩みに答えていきます。

本記事の信頼性

AFFINGER5（アフィンガー）は『タブ切り替え』というのが簡単にできますが、そんな設定があったのかとそもそも知らない方も多いと思います。

今回はAFFINGER5の便利機能であるタブ切り替えを簡単に設定できるように画像を使って丁寧に説明していきます。

本記事を読めば、タブ切り替えの設定方法がわかるので、ブログサイトをさらにおしゃれでわかりやすく行うことができます。

それでは早速始めていきます。

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

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

困ってる人

AFFINGER5（アフィンガー）でタブってのが使えるって聞いたけど、タブって何なの？

タブとは切り替えボタンのことです。ボタン1つで画面を切り替えることができる機能をタブといいます。

具体的には下記のような表示ができます。

上記はボタン切替タブとスライドショーを組み合わせてカテゴリーごとに表示しています。

AFFINGER5（アフィンガー）のスライドショーの設定がわからない方は、『AFFINGER5でスライドショー設定＆カスタマイズ方法』をご覧ください。

タブを使って複数画面に表示させたいときは、かなり使える機能ですよ。

それではAFFINGER5でのタブ作成方法について解説していきますね。

AFFINGER5 タブの設定方法について手順を解説【1分でできます】

AFFINGER5 タブの設定方法について手順を解説【1分でできます】

それではAFFINGER5（アフィンガー）でのタブ設定方法について解説します。

タブの設定は超簡単です。

タグ⇒レイアウト⇒タブ（切り替えボタン）で選択

設定方法としてはこれだけです。

タブ切替のショートコードが挿入されます。

タブのショートコード

では次にタブの各項目について1つずつ解説します。

[ad01]

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

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

AFFINGER5のタブ切替ボタンのカスタマイズ方法について解説していきます。

先ほどの手順でタブ（切替ボタン）をクリックすると以下のような表示になると思います。

タブのショートコード

各項目のカスタマイズ方法は以下になります。

また赤枠の中に記事やスライドショーを挿入すれば、タブ切替で記事の表示ができます。

カスタマイズはこれだけでOKです。お好みでタブをカスタマイズしてみて下さい。

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

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

ここまで紹介してきたAFFINGER5のタブ切替ボタンですが、１つ注意点があります。

それはAMP対応していないということです。

AMPについては、【AMP】Googleが推進するAMPとは？概要と対応方法まとめで詳しくまとめられていたので、参考にしてください。

タブは１記事内に１つの表示にするようにしましょう。

２つ以上配置すると、高速化ができず2つ目のタブ切替の中身が表示されない可能性があります。

便利な機能ではありますが、タブの使いすぎには注意しましょう。

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

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

今回はAFFINGER5（アフィンガー）のタブ作成方法＆カスタマイズ方法について解説しました。

アフィンガーのショートコードを使えば簡単にタブ切替ボタンを作ることができます。

カスタマイズ方法も難しくないので、本記事を参考にぜひ実践して下さい。

記事内だけでなく、TOPページに使うこともおすすめですよ。

最後まで読んでいただきありがとうございました。本記事が参考になれば幸いです。

それでは本日はこの辺りで。