AFFINGER

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

※PRを含みます
困ってる人
●WordPressテーマAFFINGER6を購入したけどタブの切り替え方法がわからない。。

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

 

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

 

こんな方におすすめ

  • WordPressブログ初心者
  • 有料テーマAFFINGER5(アフィンガー)を使いこなしたい方
  • AFFINGER5の設定がうまくできない方

 

本記事の信頼性

当サイトではAFFINGER6を使用しています。初心者でもタブ設定が簡単にできるように画像を使って丁寧に紹介します。

 

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

 

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

 

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

 

ちなみに当ブログではAFFINGER6使用していますが、WordPressテーマ導入がまだの方は方は、WordPressブログのおすすめテーマ11選を徹底比較をご覧ください。

 

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

 

 

AFFINGER6のタブとは何か?

AFFINGER6のタブとは何か?

AFFINGER6のタブとは何か?

 

困ってる人
AFFINGER6(アフィンガー)でタブってのが使えるって聞いたけど、タブって何なの?

 

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

 

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

 

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

 

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

 

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

 

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

 

AFFINGER6 タブの設定方法について手順を解説【1分で完了】

AFFINGER6 タブの設定方法について手順を解説【1分で完了】

AFFINGER6 タブの設定方法について手順を解説【1分で完了】

 

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

 

投稿画面で『タグ⇒レイアウト⇒タブ(切替ボタン)』を選択して、切替表示を2つ~4つから選択します。

 

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

 

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

 

タブのショートコード

 

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

 

スポンサーリンク

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

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

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

 

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

 

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

 

タブのショートコード

 

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

 

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

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

 

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

 

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

 


 

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

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

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

 

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

 

AMP対応とは

AMP(Accelerated Mobile Pages)とは、「モバイルページを高速に表示させるための手法」を表しています。

 

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

 

簡単に言うとAMP対応していないと、高速表示のための手法がないため、サイトのレイアウトや記事の表示が崩れてしまうことがあるということです。

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

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

 

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

使い方
AFFINGER6(アフィンガー6)の使い方はこれでOK【徹底解説します】

続きを見る

カスタマイズ方法
AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】

続きを見る

 

ちなみにAFFINGER6の機能を完全に発揮したい方は、AFFINGER PACK3がおすすめです。

当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益6桁までグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。

関連記事
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】

続きを見る

 

-AFFINGER