AFFINGER

【AFFINGER5】タブ(切り替えボタン)でトップページをカスタマイズする

2021年2月17日

 

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

 

 

こんなのを作ります。

 

 

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

 

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

 

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

 

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

 

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

 

 

 コチラも読まれています

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

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

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

 

 

 

タブ(切り替えボタン)の作り方

ではスタート!!

タブ(切り替えボタン)を設置する

 

 

 

タグ>レイアウト>タブ(切り替えボタン)>4つ

 

 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"]

 

「cat="カテゴリID"」です。「cat」は「category」の略です。

 

カテゴリー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を入れます。

 

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

 

「text=”"」に、カテゴリ名を書き込みます。

 

 

完成したのがこちら






リライトSEO対策の基本テクニック3つを紹介、初心者はこれでさえやればOK

悩む男性リライトを簡単にできる方法はありますか?   悩む女性ブログ初心者ですが、いつリライトをすれば良いのですか?   悩む男性ライバルチェックって必要なのですか?   ...

【稼ぐ手順】7ステップでブログのサイト設計をして稼ぐブログにする方法を紹介【徹底解説】

ブログが稼ぐことができないのは、サイト設計をしていないからです。   サイト設計が重要なのは知っているが、サイト設計の方法が分からないという人もいるはずです。     & ...

ブログ収益をあげる、まとめ記事の構成と作り方を3ステップで紹介

悩む男性『まとめ記事』ってどう書けばいいですか?   悩む女性収益をあげたいのですが、収益化できる記事をどう『まとめ記事』に繋げるかわかりません   悩む男性『まとめ記事』の構成は ...

ブログを始めるならレビュー記事から書くと稼げる【完全マニュアル】

    悩む男性ブログを書いたのない初心者でも書ける記事ってなんですか?   悩む女性商品レビュー記事を書いても収益化しないんですが、やり方が間違えてますか? &nbsp ...

【Yahoo知恵袋を活用】ブログネタ探しとアフィリエイトで稼ぐ方法

悩む男性知恵袋を使ってアフィリエイトするってどういうことですか?   悩む女性知恵袋は記事を書くのにどうやって使いますか?   悩む男性知恵袋を活用して稼いでいる人って、どんな活用 ...

【AFFINGER5】完全ガイド

AFFINGER5の使い方まとめ   WordPressテーマは正直、とても悩まれると思います。   なぜなら、世の中には無料テーマが数多く存在しているからです。   例 ...

AFFINGER5は無料なの?有料テーマを買って稼げるのか?

AFFINGER5はWordPressの有料テーマです。   料金は14,800円です。 (2021年3月時点)   14,800円は人によっては高く感じる人もいるはず。 無料版が ...

【AFFINGER5】1カラムでPC表示を見やすくする方法

ブログを見ていてもなんだか、窮屈に感じることってありませんか?   これはPCで閲覧するときのことなんですが。   スマホでは、画面サイズが決まっているので、そのサイズに合わせて記 ...

AFFINGER5のトップ画
【AFFINGER5】サイトの記事スペース横幅を広げる方法

AFFINGER5で、記事スパースの横幅を広げて記事を読みやすくしましょう。   縦に、横に長くスクロールするのではなく   実際に見やすいサイズで読者には記事を楽しんで見てもらい ...

【AFFINGER5】ブログカードの『参考』と『CHECK』をカスタマイズするやり方

  AFFINGER5のブログカードがグレードアップしました。   ブログカードは以前に記事で書いたのですが、最近になって機能が追加になっていたのでもう一度紹介します。 &nbsp ...

【アフィリエイト】ライティング術で人を操る徹底解説【超入門マニュアル】

悩む男性売れるライティング術を教えて欲しいです。   悩む女性記事を書くのですが、売り方がわかりません。セールスライティングを教えて欲しいです。   悩む男性どうしても、読者にどう ...

【超入門】SEOライティングのコツ7個【集客記事でGoogle上位表示】

悩む男性SEOライティングで集客はできるのですか?   悩む女性初心者でライティングがうまくないですうまくなれますか?   悩む男性SEOライティングとは、普通にライティングするこ ...

【収益が爆伸び】アフィリエイトを外注化して自動化する方法3つ

悩む男性サイトを自動化するってどういうことですか?   悩む女性自動化すると自分で手を加えることはしないの?   悩む男性外注化すると記事の質や、サイトの内容に違いができそうで怖い ...

【無料】ラッコツールズの使い方!SEO対策ができるツールを使った【レビュー付き】

悩む男性ラッコツールズってあるけど、どうやって使うの?   悩む女性ラッコツールズは何が出来るツールなの?   悩む男性SEO対策にはどんなメリットがあるの   こんなお ...

【体験談】VODアフィリエイトで成約が取れやすい記事の書き方【継続して収益があがる】

悩む男性VODでなかなか成約が取れない   悩む女性どんなVOD記事の書き方をすればいいのですか?   悩む男性訴求の仕方が下手なんでしょうか?   こんな悩みにお答えし ...

【まだ知らないの?】アマゾンプライム会員が絶対おすすめ!買い物や読書好きな人は納得のサービス

  今や「皆様の生活の一部になっている」と言っても過言ではないAmazonのサービスについてのお話です。 ムロ みんなはもうAmazon(アマゾン)のプライム会員になってる?   &nbsp ...

Hulu『THE HEAD』登場人物(キャスト)・全話あらすじ感想・予告動画【14日間の無料トライアル期間アリ】

配信中の海外ドラマ「THE HEAD」について1話〜最終話まで、まとめました。   「THE HEAD」雰囲気は抜群。シチュエーションも抜群。本格的な密室ミステリーを楽しめそうです。 &nb ...

Hulu『THE HEAD』最終話レビュー、全てが終わり、南極を後にする。【14日間の無料トライアル期間アリ】

海外ドラマ「THE HEAD」最終話のあらすじと感想です。   「THE HEAD」雰囲気は抜群。シチュエーションも抜群。本格的な密室ミステリーを楽しめそうです。   全6話なので ...

Hulu『THE HEAD』第5話レビュー、果たして犯人は??アキはどうなる?【14日間の無料トライアル期間アリ】

海外ドラマ「THE HEAD」第5話のあらすじと感想です。   「THE HEAD」雰囲気は抜群。シチュエーションも抜群。本格的な密室ミステリーを楽しめそうです。   全6話なので ...

Hulu『THE HEAD』第4話レビュー、すべての発端は8年前の火災事故【14日間の無料トライアル期間アリ】

海外ドラマ「THE HEAD」第4話のあらすじと感想です。   「THE HEAD」雰囲気は抜群。シチュエーションも抜群。本格的な密室ミステリーを楽しめそうです。   全6話なので ...


 

 

タブ(切り替えボタン)の色をアレンジ

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

 

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

 

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

 

 

ココがポイント

  • 「bgcolor=""」:背景色
  • 「bordercolor=""」:枠線色
  • 「color=""」:文字色

 

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

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

『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評価の点にでも重要です。

 

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

>>WPテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

  • 「もっと美しく、簡単に。」基本デザインパターンも48種!

無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ

記事がサクサク書ける!豊富で自由度の高いデザインパーツ

記事作成に欠かせない様々な装飾をクリック1つで設定できる

 

\当サイト限定特典付き/

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

 

 

 

 

 

  • この記事を書いた人
  • 最新記事

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間10万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いていますので、よろしくです!!

人気記事一覧

1

  転職サイトの大手3社をまとめて紹介します。   リクナビ、マイナビ、doda   転職したい人でも、どこのサイトに登録したら良いの迷いますので。   それぞ ...

2

悩む男性アフィリエイトで稼ぐコツが知りたい。いま、個人ブログを運営しているけど月1,000円未満です・・月5万円を目指したい。   悩む女性収益化するためには、どうしたらいいですか? &nb ...

3

  悩む女性個性的なブログはアクセスあるの?   悩む男性ブログの独自性ってどうすればいいの?   悩む男性オリジナリティって一体なに?     こん ...

4

悩む男性ブログの書き方がわかりません、どうすれば良い記事が書けるようになるんでしょうか   悩む女性ブログの構成ってどのようにづればいいいですか?   悩む男性どのように書けば読ま ...

-AFFINGER

© 2021 MURO BLOG Powered by AFFINGER5