[AFFINGER5の使い方]タブ(切替ボタン)の設定方法!

ここあです。

 

AFFINGER5には非常に便利で、

ユーザビリティが向上する「タブ(切替ボタン)」

という機能が実装されています。

 

実際にどういう機能かと言うと、

こちらのデモサイトを見ていただけると

非常に分かりやすいのですが

 

例えば、以下の「スイーツ、育児、旅行」とあるタブの中から

育児をクリックすると

affinger5タブ機能

 

育児に関する記事一覧に切り替わり

affinger5タブ機能

 

スイーツのタブをクリックすると

affinger5タブ機能

 

スイーツに関する記事一覧が表示される

affinger5タブ機能

 

こんな便利なタブ機能がAFFINGER5には実装されています。

 

ちなみにこのタブ機能はAFFINGER5の他に

WordPressテーマ「JIN(ジン)」や、

最近アップデートされた「STORK19」にも実装されています。

 

ある意味、このタブ機能がトレンドになりつつありますので

おそらく今年中には多くのテーマがこのタブ機能を

実装してくるのではと私は勝手に予測しています(笑)

 

私はTHE THORに実装されているタブ機能を

サイドバーに採用して使っています。

 

ということで、今回は非常に便利でユーザビリティがアップする

AFFIGER5のタブ切替ボタンの設定方法について

詳しく解説していきますので

 

AFFINGER5のタブ切替ボタンを使ってみたいというあなたは

ぜひ参考にしてみてください。

 

AFFINGER5:タブ(切替ボタン)の使い方

AFFINGER5のタブ切替ボタンは

カテゴリー別に記事一覧を切り替えられる設定をするのが

ネットユーザーに対して最も効果的な使い方。

 

なぜなら、ネットユーザーが見たいと思うカテゴリーの

記事一覧だけをしっかりと表示させる方が

 

それだけ記事を読んでもらえたり

ブログの回遊率が高くなる可能性が大きいからです。

 

なので、タブ切替機能を使う場合はまず最初に

あなた自身のことを考えるのではなく、

あなたのブログに訪れるネットユーザーのことを考えましょう。

 

タブ切替ボタンと、記事一覧を組み合わせた設定方法は

AFFINGER5のマニュアルサイトにも記載がありますが

 

私は正直、少し分かりにくかったので

きっと私と同じようにもっと詳しい設定方法が

知りたいと思う方もいると考え、今回記事を書いています。

 

タブ切り替えボタンを使う場合は、まず最初に

ショートコードを表示させる「タグ」の部分から

 

レイアウト → タブ(切替ボタン)→ タブの数(任意)の順に

クリックします。

タブ切替ボタン

 

そうすると、このようにタブを表示させるための

ショートコードが表示されます。

タブ機能ショートコード

 

今回はサンプルとして、タブの切替ボタン「3つ」を選択しています。

 

なので、各カテゴリーの記事一覧をそれぞれ計3つ設定するために

タブ1のコンテンツからタブ3のコンテンツ部分に

記事一覧のショートコードをそれぞれ追加・挿入していきます。

 

カテゴリー記事一覧の設定方法

カテゴリーごとの記事一覧を設定する場合は

 

ショートコードを表示させる「タグ」の部分から

記事一覧 → カテゴリ一覧をクリックすると

カテゴリー記事一覧

 

このように、カテゴリ一覧のショートコードが表示されます。

カテゴリ一覧ショートコード

 

そして、以下のようにタブ1のコンテンツから、

タブ3のコンテンツと表示されている部分にカテゴリ一覧の

ショートコードをそれぞれ挿入していきましょう。

タブ切替ボタンショートコード

 

タブ切替ボタンを3つ設定する場合は、このように挿入すばOKです。

タブ切替ボタン設定

 

上記それぞれ、タブの切替ボタンのコンテンツ部分に

記事一覧のショートコードが挿入できたら

続いてあなたが表示させたいカテゴリーの設定をしていきます。

 

なお、カテゴリーの設定に関しては

ダッシュボードメニューから、投稿 → カテゴリーをクリックし

ダッシュボードメニュー

 

カテゴリ一覧を表示させます。

カテゴリ一覧

 

記事一覧の設定で必要なのは、上記カテゴリ一覧の個別IDです。

 

ということで、あなたが設定したいカテゴリーのIDを

全てメモしておいてくださいね。

 

カテゴリーのIDがメモできたら

先ほどショートコードで作成した記事一覧の設定項目に

それぞれカテゴリーのIDを入力します。

 

タブ切替ボタン設定

 

上記、cat=”0″となっている部分に、あなたが選んだ

カテゴリーのID番号それぞれ全て入力してください。

 

カテゴリーIDを入力した後に、プレビュー画面で確認すると

それぞれきちんと、タブの切替ボタンで

必要なカテゴリーの記事一覧が表示されるはずです。

 

タブ切替ボタン

 

とは言え、デフォルトのままではタブの切替ボタンが

タブ1、タブ2、タブ3となっておりますので

 

タブ切替ボタンのショートコード内にある

text=”タブ1″と表示されている部分をそれぞれ

あなたが選んだカテゴリー名に変更していきましょう。

タブ切替ボタン設定

 

入力ができたら念のためプレビュー画面で

確認してみてくださいね。

 

タブ切替ボタン

 

タブ切替ボタンのデザインを整える方法

AFFINGER5のタブ切替ボタンを使い、

カテゴリーごとの記事一覧設定がある程度準備できたら

 

さらにユーザビリティを高めるため

デザインの設定をしていきましょう。

 

私がタブ切替ボタンでおすすめの設定は

タブの色と、カテゴリー表示の色を揃えるという方法。

 

タブ切替ボタン設定

デザインというのは、こういった些細な気遣いが非常に大事です。

 

なお、タブの切替ボタンの色を設定する場所は以下の3箇所。

タブ切替ボタン設定

 

  • bgcolor:タブ切替ボタンの背景色
  • bordercolor:タブ切替ボタンの罫線の色
  • color:タブ切替ボタン内の文字の色

それぞれタブの切替ボタン数に応じて、

ボタンの背景色や、文字の色を調整してみてくださいね。

 

なお、上記AFFIGER5のタブ設定カラーのように

タブ切替ボタンに背景色をつける場合は、

罫線の色(bordercolor)も揃える方がデザインはきれいに整います。

 

また、タブ切替ボタンのショートコード内にある

fontawesome=””の部分にアイコンフォントである

Font Awesomeのサイトからアイコン名をコピーして

FontAwesome

 

ショートコードに入力すると

タブ切替ボタン設定

 

このようにタブ切替ボタン内にアイコンを表示させることも可能です。

タブ切替ボタン

※AFFINGER5とカメラのアイコンはミスマッチですけどね(笑)

 

ちなみに、先ほどはタブ切替ボタンのショートコードに

カテゴリーごとに設定できる記事一覧のショートコードを

追加しましたが、それ以外にも

 

カテゴリー一覧のスライドショーのショートコードを

スライドショー追加

 

このように追加入力することで

ショートコード

 

タブ切替ボタンを使ったスライドショーを表示させることも可能です。

スライドショー

※サンプル記事がないので、スライドショーにはなってませんが(笑)

 

つまりは、タブ切替ボタンと他のショートコードを

上手く組み合わせることで、

あなたのサイトを訪れるネットユーザーに合わせた

 

より分かりやすいコンテンツページが出来上がり

ユーザビリティをしっかりと上げることができます。

 

なので、ぜひ色々と試してみてくださいね。

 

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

最後にAFFINGER5のタブ切替ボタンを使う時の注意点についても

解説させていただきます。

 

マニュアルサイトにも記載がありますが

このタブ切替ボタンはAMPには対応しておりません。

 

AMP(Accelerated Mobile Pages)というのは、

Googleが推進しているモバイルページを

高速に表示させるための手法によって作成されているコンテンツ。

 

つまり、AMP機能を使えば、AFFINGER5では

スマホの表示速度を速くすることが可能ですが

残念ながらタブ切替ボタンはAMPに対応していないため

 

エラーになってしまうと最悪です。

 

なぜなら、Googleから届くエラーメッセージを

きちんと修正しておかないと、必死で書いたブログの記事が

検索エンジンに表示されなくなってしまうからです。

 

なので、仮にAMP設定したとしても、

修正方法が分からないとか、修正が面倒なので放置してしまう

という方には、AMP設定は向かない機能となります。

 

実際、私のこのサイトはTHE THORのAMP機能を使って

モバイルページの表示は全てAMP化しておりますが

 

定期的にGoogleからエラーメッセージが届き

エラーメッセージを全て解消するのにかなり苦労しました。

AMPエラーの解消方法を分かりやすく解説

 

ということで、タブ切替ボタンはとにかく

AMPには対応していない」ということだけ

しっかりと覚えておいてくださいね。

 

また、タブ切替ボタンとの相性もありますが

スライドショーなど、コンテンツによっては

表示が崩れる可能性もあります。

 

だから、もしもタブ切替ボタンを使う場合は

あなたが設定するコンテンツがタブ切替機能によって

表示が崩れないかどうか

 

必ず確認した上で採用するようにしてください。

 

AFFINGER5のタブ切替ボタンの設定方法まとめ

AFFINGER5のタブ切替ボタンの設定方法まとめ

 

今回はAFFINGER5のオリジナル機能でもある

タブ切替ボタンの設定方法について解説させていただきました。

 

AFFINGER5にしろ、THE THORにしろ、

WordPressテーマにはそれぞれ様々な機能が実装されています。

 

しかし、その機能を生かすも殺すも全てはあなた次第。

 

今回、ご説明したタブ切替ボタンについても

ただ珍しい機能だからといって、闇雲に設定してしまっては

逆にユーザービリティが悪くなり

 

ネットユーザーが見たいコンテンツを

探しにくくなってしまいます。

 

なので、例えどんな便利な機能であろうが

その機能を最大限に生かすにはどうすれば良いのか?

 

常にあなたのサイトを訪れるネットユーザーのことを

考えなければなりません。

 

事実、最近は

テーマの機能が充実しすぎている分、どのサイトを見ても、

非常にごちゃごちゃしているという印象を私は受けます。

 

ただでさえ記事が読みづらいのにさらに広告まで挟んでおり

正直、どれがアイキャッチでどれが広告なのか

とにかく分かりにくい身勝手なサイトもたくさんあります。

 

あなたは自分の欲しいコンテンツがすぐに見れる

サイト構造になっていますか?

 

そういう見方で自分のサイトを

冷静に分析したりしていますか?

 

多くの人は灯台下暗しで、他人のサイトは批判できても

自分のサイトのことまでは周りからどう見られるかを

冷静に分析できている人は決して多くはありません。

 

だから、もしもあなたが

テーマに実装されている便利な機能を使う場合は、

 

ネットユーザーのユーザビリティを無視して

ただ機能を使うことだけを優先していないか?

ということまでしっかりと考えてみてくださいね。

 

特に最近はどのテーマも本当に多機能で

誰でもある一定のレベルまでは綺麗なサイトを

作り上げることが可能です。

 

ですが、大事なのは、誰もができる範囲内で

サイトデザインや記事のデザインを留めるのではなく

 

そこから先、さらに一歩踏み込んだ、

他のどのサイトよりもユーザビリティを追求し

ネットユーザーに分かりやすいサイトを作ることが重要です。

 

ある意味、ネットユーザーファーストで

自分のことだけを一切考えず、

  • サイトデザイン
  • ユーザビリティ
  • 記事の読みやすさ

などに至るまで

 

ネットユーザーに配慮したサイトを作り込んでいけば

あなたのサイトは確実にネットユーザーに信頼される

価値の高いサイトになっていきます。

 

なので、AFFINGER5は非常に便利な機能も多い分

ネットユーザーのユーザビリティを高めたり

デザイン性を高めることも簡単にできるテーマですので

 

ぜひ様々な機能を生かし、

ネットユーザーに愛される分かりやすくて読みやすい

サイト構築をしていただけたらと思います。

 

ということで、

最後までお読みいただきありがとうございました。

 

 

WordPressテーマ「AFFINGER5」
「稼ぐ」ためだけに特化された究極のアフィリエイター向けテーマ「アフィンガー5」。日々変化するWebの状況に合わせ、確実に進化し続けている2020年も間違いなくイチオシの有料テーマです。

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG