【AFFINGER】タブ（切り替えボタン）でトップページをカスタマイズする方法、レイアウトがすっきりとして見やすくなった！

AFFINGER5のトップページでのカテゴリー別での切り替えを簡単にできるようにします。

こんなのを作ります。

タブを押すと切り替えができるようになり、「切り替えタブ機能」を使って、トップページにカテゴリ別の記事一覧を設置していきます。

この記事を読むと、簡単にタブ切り替えが作れるようになります。

このタブを作ってからは、カテゴリー分けが見やすく新着記事にスムーズに回遊してくれるようになりPVも上がりましたね。

私もトップページに使っています。

ムロ

このブログは、AFFINGERのテーマを買ったけど使い方がわからない！？そんな初心者さんに、記事作成ツールの使い方や、AFFINGERでSEOを効率よくするための記事を書いているブログです( ^ω^ ) 私も、AFFINGERのテーマを購入したときはかなり苦戦しました。そんな経験を元に使い方を記事で紹介していきます。

AFFINGER プラグインセット販売価格29,800円（税込）

[/st-mybox]

[/st-mybox]

＼当サイト限定特典付き／

AFFINGER プラグインセットショップはコチラ

ムロ

今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER５の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

 コチラも読まれています

＞＞【AFFINGER５】ブログのトップページをカスタマイズするやり方

＞＞【AFFINGER5】スライドボックスを作り、枠で囲む作り方

＞＞【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

AFFINGERタブ（切り替えボタン）の作り方の手順

切り替えボタンをつくる手順です。

タブ（切り替えボタン）を設置する

タグ＞レイアウト＞タブ（切り替えボタン）＞４つ

 command
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ4" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ3のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ4のコンテンツ
[/st-tab-main]
[/st-tab-content]

これがコードになります。

タブはコンテンツの数によって決まるので、自分でコンテンツの数を選びましょう。

それぞれのタブ（切り替えボタン）にカテゴリを設定する

【タブ1のコンテンツ】にコンテンツを入れます。

私は『カード』で自分の入れたい記事を入れましたが、今回はカテゴリーで記事一覧を入れる簡単なおすすめ方法を紹介します。

タグ＞記事一覧/カード＞カテゴリー覧

 command
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

カテゴリーIDの調べ方はこちら⬇️

投稿＞カテゴリー

こちらがコードです。

 command
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ4" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main]
[/st-tab-content]
 

『cat="0"』にカテゴリーI Dを入れます。

タブ（切り替えボタン）にカテゴリ名を表示させる

タブ（切り替えボタン）の色をアレンジ

今はまだ色がない状態なので、まずはタブの色のアレンジから。

 command
[st-input-tab fontawesome="" text="ブログ" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]

お好みのカラーコード（#〇〇〇〇〇〇）を書き入れてください。

切り替えタブにアイコンを入れる

カテゴリ名の前にアイコンを入れることもできます。

『fontawesome=""』にHTMLコードのアイコンを入れます。

 command[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="fa-blog" text="ブログ" bgcolor="#FFFF88" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="fa-books" text="AFFINGER5" bgcolor="#88FFFF" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="fa-user-md" text="アフィリエイト" bgcolor="#FFBBFF" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="fa-move" text="VOD" bgcolor="#5BFF7F" bordercolor="" color="" fontweight="" checked=""]

『fontawesome="アイコン名"』となります。

アイコンは「Font Awesome」で探せます。

「fa-」から始まるのがアイコン名（HTMLコード）です。

まとめ：タブ（切り替えボタン）でトップページをより見やすく

読者が読みやすい導線がトップページにあることは、SEO評価の点にでも重要です。

レイアウト的にもすっきりしますし、タブをクリックするだけでカテゴリーや記事も見ることができるので読者にとってはより見やすくなります。

こいうとことができるのが、AFFINGERのデフォルト機能なのです。