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

困ってる人

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

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

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

本記事の信頼性

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

今回はAFFINGER6の便利機能であるタブ切り替えを簡単に設定できるよう画像を使ってご紹介します。

本記事を読めば、タブ切り替え方法がすぐにわかるので、参考にしてみてください。

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

AFFINGER6のタブとは？

AFFINGER6のタブとは何か？

困ってる人

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

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

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

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

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

てつ

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

AFFINGER6のタブ設定方法を解説

AFFINGER6のタブ設定方法を解説

AFFINGER6（アフィンガー）でのタブ設定方法について解説します。タブの設定は超簡単です。

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

設定方法としてはこれだけです。タブ切替のショートコードが挿入されます。

タブのショートコード

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

てつ

スポンサーリンク

AFFINGER6 タブ切替ボタンの変更方法【各項目の見方も解説】

AFFINGER6 タブ切替ボタンの変更方法【各項目の見方も解説】

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

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

タブのショートコード

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

タブ切替ボタン各項目カスタマイズ方法

• text：タブ切替ボタンに表示される文字
• bgcolor：タブ切替ボタンの背景色
• bordercolor：タブ切替ボタンの枠線の色
• color：タブ切替ボタン内の文字色
• fontweight：テキストのフォント指定

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

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

てつ

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

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

AFFINGER6のタブ切替ボタンですが、１つ注意点があります。それはAMP対応していないということです。

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

タブは１記事内に１つの表示にするようにしましょう。２つ以上配置すると、高速化ができず2つ目のタブ切替の中身が表示されない可能性があります。

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

てつ

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

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

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

アフィンガーのショートコードを使えば簡単にタブ切替ボタンを作ることができます。カスタマイズ方法も難しくないので、本記事を参考にぜひ実践して下さい。

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

てつ

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

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

>>AFFINGER6の特典14個付きレビュー！に戻る

その他AFFINGER6をさらに使いこなしたい！という方は合わせて以下もどうぞ。

ちなみにAFFINGER6の機能を完全に発揮したい方は、AFFINGER PACK3がおすすめです。当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益6桁までグンと伸びました。

収益をさらに伸ばしたい方は、参考に以下もどうぞ。