ここあです。
AFFINGER5には非常に便利で、
ユーザビリティが向上する「タブ（切替ボタン）」
という機能が実装されています。
実際にどういう機能かと言うと、
こちらのデモサイトを見ていただけると
非常に分かりやすいのですが
例えば、以下の「スイーツ、育児、旅行」とあるタブの中から
育児をクリックすると
育児に関する記事一覧に切り替わり
スイーツのタブをクリックすると
スイーツに関する記事一覧が表示される
こんな便利なタブ機能がAFFINGER5には実装されています。
ちなみにこのタブ機能はAFFINGER5の他に
WordPressテーマ「JIN（ジン）」や、
最近アップデートされた「STORK19」にも実装されています。
ある意味、このタブ機能がトレンドになりつつありますので
おそらく今年中には多くのテーマがこのタブ機能を
実装してくるのではと私は勝手に予測しています（笑）
私はTHE THORに実装されているタブ機能を
サイドバーに採用して使っています。
ということで、今回は非常に便利でユーザビリティがアップする
AFFIGER5のタブ切替ボタンの設定方法について
詳しく解説していきますので
AFFINGER5のタブ切替ボタンを使ってみたいというあなたは
ぜひ参考にしてみてください。
AFFINGER5：タブ（切替ボタン）の使い方
AFFINGER5のタブ切替ボタンは
カテゴリー別に記事一覧を切り替えられる設定をするのが
ネットユーザーに対して最も効果的な使い方。
なぜなら、ネットユーザーが見たいと思うカテゴリーの
記事一覧だけをしっかりと表示させる方が
それだけ記事を読んでもらえたり
ブログの回遊率が高くなる可能性が大きいからです。
なので、タブ切替機能を使う場合はまず最初に
あなた自身のことを考えるのではなく、
あなたのブログに訪れるネットユーザーのことを考えましょう。
タブ切替ボタンと、記事一覧を組み合わせた設定方法は
AFFINGER5のマニュアルサイトにも記載がありますが
私は正直、少し分かりにくかったので
きっと私と同じようにもっと詳しい設定方法が
知りたいと思う方もいると考え、今回記事を書いています。
タブ切り替えボタンを使う場合は、まず最初に
ショートコードを表示させる「タグ」の部分から
レイアウト → タブ（切替ボタン）→ タブの数（任意）の順に
クリックします。
そうすると、このようにタブを表示させるための
ショートコードが表示されます。
今回はサンプルとして、タブの切替ボタン「３つ」を選択しています。
なので、各カテゴリーの記事一覧をそれぞれ計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のサイトからアイコン名をコピーして
ショートコードに入力すると
このようにタブ切替ボタン内にアイコンを表示させることも可能です。
※AFFINGER５とカメラのアイコンはミスマッチですけどね（笑）
ちなみに、先ほどはタブ切替ボタンのショートコードに
カテゴリーごとに設定できる記事一覧のショートコードを
追加しましたが、それ以外にも
カテゴリー一覧のスライドショーのショートコードを
このように追加入力することで
タブ切替ボタンを使ったスライドショーを表示させることも可能です。
※サンプル記事がないので、スライドショーにはなってませんが（笑）
つまりは、タブ切替ボタンと他のショートコードを
上手く組み合わせることで、
あなたのサイトを訪れるネットユーザーに合わせた
より分かりやすいコンテンツページが出来上がり
ユーザビリティをしっかりと上げることができます。
なので、ぜひ色々と試してみてくださいね。
タブ切替ボタンを使う時の注意点
最後にAFFINGER5のタブ切替ボタンを使う時の注意点についても
解説させていただきます。
マニュアルサイトにも記載がありますが
このタブ切替ボタンはAMPには対応しておりません。
AMP(Accelerated Mobile Pages)というのは、
Googleが推進しているモバイルページを
高速に表示させるための手法によって作成されているコンテンツ。
つまり、AMP機能を使えば、AFFINGER5では
スマホの表示速度を速くすることが可能ですが
残念ながらタブ切替ボタンはAMPに対応していないため
エラーになってしまうと最悪です。
なぜなら、Googleから届くエラーメッセージを
きちんと修正しておかないと、必死で書いたブログの記事が
検索エンジンに表示されなくなってしまうからです。
なので、仮にAMP設定したとしても、
修正方法が分からないとか、修正が面倒なので放置してしまう
という方には、AMP設定は向かない機能となります。
実際、私のこのサイトはTHE THORのAMP機能を使って
モバイルページの表示は全てAMP化しておりますが
定期的にGoogleからエラーメッセージが届き
エラーメッセージを全て解消するのにかなり苦労しました。
ということで、タブ切替ボタンはとにかく
「AMPには対応していない」ということだけ
しっかりと覚えておいてくださいね。
また、タブ切替ボタンとの相性もありますが
スライドショーなど、コンテンツによっては
表示が崩れる可能性もあります。
だから、もしもタブ切替ボタンを使う場合は
あなたが設定するコンテンツがタブ切替機能によって
表示が崩れないかどうか
必ず確認した上で採用するようにしてください。
AFFINGER5のタブ切替ボタンの設定方法まとめ
今回はAFFINGER5のオリジナル機能でもある
タブ切替ボタンの設定方法について解説させていただきました。
AFFINGER5にしろ、THE THORにしろ、
WordPressテーマにはそれぞれ様々な機能が実装されています。
しかし、その機能を生かすも殺すも全てはあなた次第。
今回、ご説明したタブ切替ボタンについても
ただ珍しい機能だからといって、闇雲に設定してしまっては
逆にユーザービリティが悪くなり
ネットユーザーが見たいコンテンツを
探しにくくなってしまいます。
なので、例えどんな便利な機能であろうが
その機能を最大限に生かすにはどうすれば良いのか？
常にあなたのサイトを訪れるネットユーザーのことを
考えなければなりません。
事実、最近は
テーマの機能が充実しすぎている分、どのサイトを見ても、
非常にごちゃごちゃしているという印象を私は受けます。
ただでさえ記事が読みづらいのにさらに広告まで挟んでおり
正直、どれがアイキャッチでどれが広告なのか
とにかく分かりにくい身勝手なサイトもたくさんあります。
あなたは自分の欲しいコンテンツがすぐに見れる
サイト構造になっていますか？
そういう見方で自分のサイトを
冷静に分析したりしていますか？
多くの人は灯台下暗しで、他人のサイトは批判できても
自分のサイトのことまでは周りからどう見られるかを
冷静に分析できている人は決して多くはありません。
だから、もしもあなたが
テーマに実装されている便利な機能を使う場合は、
ネットユーザーのユーザビリティを無視して
ただ機能を使うことだけを優先していないか？
ということまでしっかりと考えてみてくださいね。
特に最近はどのテーマも本当に多機能で
誰でもある一定のレベルまでは綺麗なサイトを
作り上げることが可能です。
ですが、大事なのは、誰もができる範囲内で
サイトデザインや記事のデザインを留めるのではなく
そこから先、さらに一歩踏み込んだ、
他のどのサイトよりもユーザビリティを追求し
ネットユーザーに分かりやすいサイトを作ることが重要です。
ある意味、ネットユーザーファーストで
自分のことだけを一切考えず、
- サイトデザイン
- ユーザビリティ
- 記事の読みやすさ
などに至るまで
ネットユーザーに配慮したサイトを作り込んでいけば
あなたのサイトは確実にネットユーザーに信頼される
価値の高いサイトになっていきます。
なので、AFFINGER5は非常に便利な機能も多い分
ネットユーザーのユーザビリティを高めたり
デザイン性を高めることも簡単にできるテーマですので
ぜひ様々な機能を生かし、
ネットユーザーに愛される分かりやすくて読みやすい
サイト構築をしていただけたらと思います。
ということで、
最後までお読みいただきありがとうございました。
