AFFINGER

AFFINGER5でタブを設定する方法・使い方もご紹介【初心者向け】

困ってる人
●WordPressテーマAFFINGER5を購入したけどタブの切り替え方法がわからない。。

●タブ表示の切り替えを使っている人を見るけど、どうやればいいのかわからない。。

 

今回はこんなお悩みに答えていきます。

 

こんな方におすすめ

  • WordPressブログ初心者
  • 有料テーマAFFINGER5(アフィンガー)を使いこなしたい方
  • AFFINGER5の設定がうまくできない方

 

本記事の信頼性

当サイトではAFFINGER5を使用しています。初心者でもタブ設定が簡単にできるように画像を使って丁寧に紹介します。

 

AFFINGER5(アフィンガー)は『タブ切り替え』というのが簡単にできますが、そんな設定があったのかとそもそも知らない方も多いと思います。

 

今回はAFFINGER5の便利機能であるタブ切り替えを簡単に設定できるように画像を使って丁寧に説明していきます。

 

本記事を読めば、タブ切り替えの設定方法がわかるので、ブログサイトをさらにおしゃれでわかりやすく行うことができます

 

ちなみに当ブログでは『AFFINGER5』を使用していますが、WordPressテーマ導入がまだの方は方は、『WordPressブログのおすすめ有料テーマ7つを徹底比較』をご覧ください。

 

それでは早速始めていきます。

 

 

【AFFINGER5】そもそもタブとは何か?

【AFFINGER5】そもそもタブとは何か?

 

困ってる人
AFFINGER5(アフィンガー)でタブってのが使えるって聞いたけど、タブって何なの?

 

タブとは切り替えボタンのことです。ボタン1つで画面を切り替えることができる機能をタブといいます。

 

具体的には下記のような表示ができます。





2021/5/4

ブログをリライトしてSEO順位を上げる手順・方法・注意点を解説【初心者向け】

困ってる人●ブログでリライトが必要ってよく聞くけど、具体的にどうすればいいんだろう?やり方を教えてほしい。 ●ブログのリライトが正しくできているかわかりません。アクセスを伸ばしていきたいので、適切なリライト方法が知りたい。   今回はこんなお悩みに答えていきます。   こんな方におすすめ ブログのリライト方法が知りたい ブログリライトの手順がわかってない ブログをリライトしてアクセスを増やしたい   本記事の信頼性 ブログでリライトを実施し、検索順位上位を獲得しています。(下 ...

ReadMore

2021/4/4

ブログをアクセスアップする方法5つ&役立つツールを解説【初心者向け】

困ってる人●ブログをアクセスアップしたい。記事を書きまくってるのに全然アクセスが増えない。 ●ブログをアクセスアップする方法や役立つツールについて教えてほしい。   今回はこんなお悩みに答えていきます。   こんな方におすすめ ブログをアクセスアップしたい方 ブログアクセスアップしない原因がわからない ブログをアクセスアップして収益を伸ばしたい方   本記事の信頼性 副業ブロガー。アクセスをアップさせ、ブログ収益月5桁を達成しています。   ブログのアクセスアップが ...

ReadMore

2021/4/6

Rank Tracker(SEO検索順位チェックツール)の登録方法・使い方をレビュー

困ってる人●SEO検索順位をチェックしたいけど、何かいいツールはないかな? ●Rank Trackerてツールが良いって聞いたけど料金や使い方がわからないなあ。詳しく教えてほしい。   今回はこんなお悩みに答えていきます。   こんな方におすすめ SEO検索順位チェックツールを導入したい方 ブログ収益を伸ばしていきたい方 リライトすべき記事がわからない方   本記事の信頼性 この記事を書いる僕は今まで150記事以上を執筆している副業ブロガーです。当ブログもRank Track ...

ReadMore

2021/3/19

ブログ記事に目次はいらない?必要?目次の作成方法を解説【初心者向け】

困ってる人●ブログに目次は必要ですか?ほとんど見てる人がいないようだし目次はいらないのでは? ●ブログ記事の目次の必要性について教えてください。   今回はこんなお悩みに答えていきます。   こんな方におすすめ ブログに目次がいらないか迷ってる方 ブログの目次の必要性について詳しく知りたい ブログ記事で目次を作成する方法がわからない   ブログ記事に目次が必要か不要かどうかは状況によって異なります。   しかし特にブログ初心者であれば、目次は作成しておくのが無難です ...

ReadMore

2021/5/1

ブログでwebライティングスキルが上達する方法を解説【すぐにできるコツあり】

困ってる人●ブログを書いていますが、ライティングスキルが上達しません。webライティングスキルを上達させる方法について教えてほしい。 ●初心者でもライティングスキルは上達するのか不安です。上手くなる感じがしていません。   今回はこんなお悩みに答えていきます。   こんな方におすすめ Webライティングスキルを伸ばしたい方 文章力を上げて記事を長く読んでほしい方 ブログ初心者でWebライティングスキルに自信がない方   本記事の信頼性 ブログを150記事以上執筆し月5桁収益を ...

ReadMore

2020/12/19

転職を検討する20代におすすめの転職本10冊をご紹介

困ってる人●仕事がつらい。。転職したい。 ●まずは事前に転職の知識を身に付けたい。おすすめ本が知りたい。   今回はこんな方に向けた本を紹介します。   こんな方におすすめ 転職を検討している方 将来が不安な方 20代会社員   本記事の信頼性 今までに100冊以上本を読んでいます。転職について読んだ本の中からおすすめ本をご紹介します。   仕事が辛くてやめたい、会社の将来が不安で早いうちから転職を意識して行動しておきたい。   こんな悩みは多いはず。僕自 ...

ReadMore

2020/11/19

【副業したいサラリーマン必見】会社員が在宅でできるオススメの副業6つ

困ってる人●コロナで会社の先行きが不安。何か副業を始めたい。 ●サラリーマンとして働いているので、家でもできる副業が知りたい。   今回はこんなお悩みに答えていきます。   こんな方におすすめ これから副業を始めたい方 本業が会社員で副業を考えてる方 将来・お金について不安な方   コロナウイルスの蔓延により、景気が悪くなり将来の先行きがさらに見えない世の中になってきました。 ボーナスカットや雇用を守れずリストラする企業や倒産してしまう企業も出てきています。   そ ...

ReadMore

2020/11/16

会社員が副業を始めるきっかけは?副業サラリーマンがきっかけ・疑問に答えます

困ってる人●何か副業を始めたいけど一歩勇気が出ない。 ●サラリーマンとして働いてるけど副業を始めてみたい。きっかけについて知りたい。   今回はこんなお悩みに答えていきます。   こんな方におすすめ これから副業を始めたい方 本業が会社員で副業を考えてる方 副業のきっかけについて知りたい方   本記事の信頼性 会社員として働きながら副業をしています。僕自身の経験も踏まえてきっかけについて紹介します。   あなたは副業に興味があるでしょうか?   コロナウイ ...

ReadMore

2020/10/3

大企業で設計開発をするエンジニアの働き方【4年以上働いた筆者が実態を解説】

不安な人●理系で設計開発として将来働きたいと思ってるけど、実際働いてる方の働き方を聞きたい。 ●大企業で設計開発をしたくて転職を考えてるけど実態を教えてほしい。   今回はこのようなお悩みにお答えします。   こんな方におすすめ 大企業で設計開発としてエンジニア就職がしたい方 これから就職活動を控えてる方 大手企業で設計開発をしたいと考えている方   本記事の信頼性 この記事を書いてる僕は、社員5万人以上の企業でエンジニアとして設計開発をしています。実際の働き方について詳しく ...

ReadMore

2020/9/23

【結論】大企業のエンジニアはスキルが伸びない【就職前に見てほしい】

悩んでいる人●エンジニアとして、大企業就職を考えています。みんな大手企業目指すし大きい方が良いよね? ●大企業のエンジニアでバリバリスキルを身に付けたいなあ。実際に働いてる人の意見を聞きたい。   今回はこのようなお悩みにお答えします。   こんな方におすすめ 大企業へエンジニア就職がしたい方 これから就職活動を控えてる方 実際に働いてる生の声を聴いてみたい方   本記事の信頼性 この記事を書いてる僕は、社員5万人以上の企業でエンジニアとして設計開発をしています。実際に働いて ...

ReadMore

2020/12/19

転職を検討する20代におすすめの転職本10冊をご紹介

困ってる人●仕事がつらい。。転職したい。 ●まずは事前に転職の知識を身に付けたい。おすすめ本が知りたい。   今回はこんな方に向けた本を紹介します。   こんな方におすすめ 転職を検討している方 将来が不安な方 20代会社員   本記事の信頼性 今までに100冊以上本を読んでいます。転職について読んだ本の中からおすすめ本をご紹介します。   仕事が辛くてやめたい、会社の将来が不安で早いうちから転職を意識して行動しておきたい。   こんな悩みは多いはず。僕自 ...

ReadMore

2021/3/20

お金をたくさん稼いでる人に共通する真実【本質を考えてみようって話】

  どうもTetsu(てつ)です。本記事をご覧になってる方はお金を稼ぐことについて興味がある方だと思います。   お金を稼ぎたいって思いは生きていたら誰にでもあると思いますし、もちろん僕自身も思います。   今回はお金を稼ぐ方法や、またお金を稼いでる人に共通していることについて紹介します。   今よりもっとお金を稼ぎたい、お金持ちになりたい、お金をたくさん稼いで楽に暮らしていきたいと欲望いっぱいな方は本記事をぜひ参考にしてみて下さい。   それでは早速始め ...

ReadMore

2021/2/23

軽井沢に泊まるなら?おすすめスポットは?実際に行ってみたレビュー・感想を解説

知りたい人●軽井沢に旅行に行きたいけどおすすめのホテルについて教えてほしい。 ●GOTOトラベルを使ってお得に軽井沢旅行を楽しみたい。   今回はこのようなお悩みにお答えします。   こんな方におすすめ 旅行好きな方 軽井沢への旅行を検討されている方 軽井沢のおすすめスポットやホテルについて知りたい方   本記事の信頼性 実際に軽井沢に旅行に行ってみた感想をレビューします。おすすめスポットも紹介するので最後まで見てね。   コロナウイルスの経済対策としてGOTOトラ ...

ReadMore

2021/5/5

ブログ運営・アフィリエイトにおすすめの本17冊を紹介【ブログ初心者向け】

困ってる人●最近ブログを始めたけど、ブログ運営におすすめの本を知りたいな。 ●WordPressブログを始めたけど、収益化に向けて効率よく学びたい。   今回は疑問にお答えします。   こんな方におすすめ WordPressブログ初心者 ブログ運営のおすすめ本を知りたい方 ブログアフィリエイトに向けて文章術について学びたい方   本記事の信頼性 僕が実際に読んだブログに関する書籍の中で、特によかった本を厳選してご紹介します。   ブログ始めてみたけど右も左もわからな ...

ReadMore

2021/3/20

コンフィデンスJP 映画プリンセス編(2020年)を見た感想・レビュー【もう一度見たい】

知りたい人コンフィデンスマンJP プリンセス編が上映されてるけど実際に見た感想を教えてほしいな!   今回はコンフィデンスマンJPプリンセス編を見た感想とレビューをお伝えします。   本記事を書いてる人 映画が好きでよく見に行きます。コンフィデンスマンJPに関しては前作のロマンス編も含めてドラマも全部見ました。   コンフィデンスマンJPプリンセス編、コロナウイルスの影響で延期になっていましたが、先日見てきました。   結論から言うと、めちゃよかったです! &nbs ...

ReadMore


 

上記はボタン切替タブとスライドショーを組み合わせてカテゴリーごとに表示しています。

 

AFFINGER5(アフィンガー)のスライドショーの設定がわからない方は、『AFFINGER5でスライドショー設定&カスタマイズ方法』をご覧ください。

 

タブを使って複数画面に表示させたいときは、かなり使える機能ですよ。

 

それではAFFINGER5でのタブ作成方法について解説していきますね。

 

AFFINGER5 タブの設定方法について手順を解説【1分でできます】

AFFINGER5 タブの設定方法について手順を解説【1分でできます】

 

それではAFFINGER5(アフィンガー)でのタブ設定方法について解説します。

 

タブの設定は超簡単です。

 

投稿画面で『タグ⇒レイアウト⇒タブ(切替ボタン)』を選択して、切替表示を2つ~4つから選択します。

 

タグ⇒レイアウト⇒タブ(切り替えボタン)で選択

 

設定方法としてはこれだけです。

 

タブ切替のショートコードが挿入されます。

タブのショートコード

 

では次にタブの各項目について1つずつ解説します。

 

AFFINGER5 タブ切替ボタンのカスタマイズ方法【各項目の見方も解説】

AFFINGER5 タブ切替ボタンのカスタマイズ方法【各項目の見方も解説】

 

AFFINGER5のタブ切替ボタンのカスタマイズ方法について解説していきます。

 

先ほどの手順でタブ(切替ボタン)をクリックすると以下のような表示になると思います。

 

タブのショートコード

 

各項目のカスタマイズ方法は以下になります。

 

タブ切替ボタン各項目カスタマイズ方法について

・text:タブ切替ボタンに表示される文字

・bgcolor:タブ切替ボタンの背景色

・bordercolor:タブ切替ボタンの枠線の色

・color:タブ切替ボタン内の文字色

・fontweight:テキストのフォント指定

 

また赤枠の中に記事やスライドショーを挿入すれば、タブ切替で記事の表示ができます。

 

カスタマイズはこれだけでOKです。お好みでタブをカスタマイズしてみて下さい。


 

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

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

 

ここまで紹介してきたAFFINGER5のタブ切替ボタンですが、1つ注意点があります。

 

それはAMP対応していないということです

 

AMP対応とは

AMP(Accelerated Mobile Pages)とは、「モバイルページを高速に表示させるための手法」を表しています。

 

AMPについては、【AMP】Googleが推進するAMPとは?概要と対応方法まとめで詳しくまとめられていたので、参考にしてください。

 

簡単に言うとAMP対応していないと、高速表示のための手法がないため、サイトのレイアウトや記事の表示が崩れてしまうことがあるということです。

 

タブは1記事内に1つの表示にするようにしましょう。

 

2つ以上配置すると、高速化ができず2つ目のタブ切替の中身が表示されない可能性があります

 

便利な機能ではありますが、タブの使いすぎには注意しましょう。

 

まとめ:AFFINGER5のタブ機能を活用してサイトレイアウトを整えよう

まとめ:AFFINGER5のタブ機能を活用してサイトレイアウトを整えよう

 

今回はAFFINGER5(アフィンガー)のタブ作成方法&カスタマイズ方法について解説しました。

 

アフィンガーのショートコードを使えば簡単にタブ切替ボタンを作ることができます。

 

カスタマイズ方法も難しくないので、本記事を参考にぜひ実践して下さい。

 

記事内だけでなく、TOPページに使うこともおすすめですよ。

 

最後まで読んでいただきありがとうございました。本記事が参考になれば幸いです。

 

それでは本日はこの辺りで。

 

 

その他AFFINGER5の設定方法について

関連記事
AFFINGER5でスライドショー設定&カスタマイズする方法【初心者でも簡単にできます】

続きを見る

関連記事
【AFFINGER5】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】

続きを見る

-AFFINGER

© 2021 Tetsu blog Powered by AFFINGER5