AFFINGER

AFFINGER5でタブを設定する方法・使い方もご紹介【初心者向け】

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

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

 

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

 

こんな方におすすめ

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

 

本記事の信頼性

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

 

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

 

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

 

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






 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

タブのショートコード

 

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

 

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

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

 

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

 

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

 

タブのショートコード

 

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

 

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

・text:タブ切替ボタンに表示される文字

・bgcolor:タブ切替ボタンの背景色

・bordercolor:タブ切替ボタンの枠線の色

・color:タブ切替ボタン内の文字色

・fontweight:テキストのフォント指定

 

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

 

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


 

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

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

 

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

 

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

 

AMP対応とは

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

その他AFFINGER5の設定方法について

関連記事
AFFINGER6でスライドショー設定方法【初心者でも簡単にできます】

続きを見る

関連記事
【AFFINGER5】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】

続きを見る

-AFFINGER