THOR」へ変更しました。その理由は..HOME記事一覧カスタマイズアフィンガー5[AFFINGER5の使い方]タブ(切替ボタン)の設定方法![AFFINGER5の使い方]タブ(切替ボタン)の設定方法!2020年1月9日2020年1月13日アフィンガー5アフィンガー5ここあです。AFFINGER5には非常に便利で、ユーザビリティが向上する「タブ(切替ボタン)」という機能が実装されています。実際にどういう機能かと言うと、こちらのデモサイトを見ていただけると非常に分かりやすいのですが例えば、以下の「スイーツ、育児、旅行」とあるタブの中から育児をクリックすると育児に関する記事一覧に切り替わりスイーツのタブをクリックするとスイーツに関する記事一覧が表示されるこんな便利なタブ機能がAFFINGER5には実装されています。最近アップデートされた「STORK19」にも実装されています。THORに実装されているタブ機能をサイドバーに採用して使っています。いうことで、今回は非常に便利でユーザビリティがアップするAFFIGER5のタブ切替ボタンの設定方法について詳しく解説していきますのでAFFINGER5のタブ切替ボタンを使ってみたいというあなたはぜひ参考にしてみてください。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:タブ切替ボタン内の文字の色それぞれタブの切替ボタン数に応じて、ボタンの背景色や、文字の色を調整してみてくださいね。罫線の色(bordercolor)も揃える方がデザインはきれいに整います。Awesomeのサイトからアイコン名をコピーしてショートコードに入力するとこのようにタブ切替ボタン内にアイコンを表示させることも可能です。※AFFINGER5とカメラのアイコンはミスマッチですけどね(笑)ちなみに、先ほどはタブ切替ボタンのショートコードにカテゴリーごとに設定できる記事一覧のショートコードを追加しましたが、それ以外にもカテゴリー一覧のスライドショーのショートコードをこのように追加入力することでタブ切替ボタンを使ったスライドショーを表示させることも可能です。※サンプル記事がないので、スライドショーにはなってませんが(笑)つまりは、タブ切替ボタンと他のショートコードを上手く組み合わせることで、あなたのサイトを訪れるネットユーザーに合わせたより分かりやすいコンテンツページが出来上がりユーザビリティをしっかりと上げることができます。試してみてくださいね。最後にAFFINGER5のタブ切替ボタンを使う時の注意点についても解説させていただきます。マニュアルサイトにも記載がありますがこのタブ切替ボタンはAMPには対応しておりません。Pages)というのは、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ。AMP機能を使えば、AFFINGER5ではスマホの表示速度を速くすることが可能ですが残念ながらタブ切替ボタンはAMPに対応していないためエラーになってしまうと最悪です。Googleから届くエラーメッセージをきちんと修正しておかないと、必死で書いたブログの記事が検索エンジンに表示されなくなってしまうからです。修正方法が分からないとか、修正が面倒なので放置してしまうという方には、AMP設定は向かない機能となります。THORのAMP機能を使ってモバイルページの表示は全てAMP化しておりますが定期的にGoogleからエラーメッセージが届きエラーメッセージを全て解消するのにかなり苦労しました。AMPエラーの解消方法を分かりやすく解説ということで、タブ切替ボタンはとにかく「AMPには対応していない」ということだけしっかりと覚えておいてくださいね。タブ切替ボタンとの相性もありますがスライドショーなど、コンテンツによっては表示が崩れる可能性もあります。タブ切替ボタンを使う場合はあなたが設定するコンテンツがタブ切替機能によって表示が崩れないかどうか必ず確認した上で採用するようにしてください。AFFINGER5のタブ切替ボタンの設定方法まとめ今回はAFFINGER5のオリジナル機能でもあるタブ切替ボタンの設定方法について解説させていただきました。THORにしろ、WordPressテーマにはそれぞれ様々な機能が実装されています。その機能を生かすも殺すも全てはあなた次第。今回、ご説明したタブ切替ボタンについてもただ珍しい機能だからといって、闇雲に設定してしまっては逆にユーザービリティが悪くなりネットユーザーが見たいコンテンツを探しにくくなってしまいます。どんな便利な機能であろうがその機能を最大限に生かすにはどうすれば良いのか?常にあなたのサイトを訪れるネットユーザーのことを考えなければなりません。非常にごちゃごちゃしているという印象を私は受けます。ただでさえ記事が読みづらいのにさらに広告まで挟んでおり正直、どれがアイキャッチでどれが広告なのかとにかく分かりにくい身勝手なサイトもたくさんあります。あなたは自分の欲しいコンテンツがすぐに見れるサイト構造になっていますか?そういう見方で自分のサイトを冷静に分析したりしていますか?多くの人は灯台下暗しで、他人のサイトは批判できても自分のサイトのことまでは周りからどう見られるかを冷静に分析できている人は決して多くはありません。あなたがテーマに実装されている便利な機能を使う場合は、ネットユーザーのユーザビリティを無視してただ機能を使うことだけを優先していないか?ということまでしっかりと考えてみてくださいね。最近はどのテーマも本当に多機能で誰でもある一定のレベルまでは綺麗なサイトを作り上げることが可能です。他のどのサイトよりもユーザビリティを追求しネットユーザーに分かりやすいサイトを作ることが重要です。ある意味、ネットユーザーファーストで自分のことだけを一切考えず、サイトデザインユーザビリティ記事の読みやすさなどに至るまでネットユーザーに配慮したサイトを作り込んでいけばあなたのサイトは確実にネットユーザーに信頼される価値の高いサイトになっていきます。AFFINGER5は非常に便利な機能も多い分ネットユーザーのユーザビリティを高めたりデザイン性を高めることも簡単にできるテーマですのでぜひ様々な機能を生かし、ネットユーザーに愛される分かりやすくて読みやすいサイト構築をしていただけたらと思います。最後までお読みいただきありがとうございました。「稼ぐ」ためだけに特化された究極のアフィリエイター向けテーマ「アフィンガー5」。日々変化するWebの状況に合わせ、確実に進化し続けている2020年も間違いなくイチオシの有料テーマです。THORの使い方】PWAの設定方法を詳しく解説!この記事を書いた人ここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。詳しいプロフィールはこちら人脈が成功への最短ルート!私がMonologueを勧める理由WordPress設置代行始めました!※設置代行はメルマガ読者限定です。THORSTORKここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?●安定を求めれば求めるほど不安定になる理由とは?●いくら知識があっても、あなたが絶対に成功できない理由など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。印刷会社と取引がある制作プロダクションで様々な経験や実績を積み、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、ネットを生かした情婦発信を行い、新しい働き方や楽しい人生の過ごし方についてもお伝えしています。