
この記事の信頼性
.jpg)
この記事を書いている僕は、アフィンガー5を使用してこのブログを運営している、アラフィフ・ハゲ・ブロガーです。あ、ハゲは関係ないですね。(笑)
前回は、【スライドショー】をご紹介しました。<<WordPressテーマ:アフィンガー5の便利な機能 その1【スライドショー】>>
-
-
WordPressテーマ:アフィンガー5の便利な機能 その1【スライドショー】
続きを見る
今回は、【切替タブ】について解説していきます。
【スライドショー】とおなじく、上手に利用すれば、ブログ全体が引き締まり、伝えたい情報をコンパクトにまとめることが出来ます。
それでは始めていきますね。
もくじ
- 1 アフィンガー5 【切替タブ】の設定方法
- 1.0.0.1 個別指導塾の良い講師(先生)とは~元教室長が解説~
- 1.0.0.2 オンライン家庭教師に向いている生徒【ベテラン家庭教師が解説】
- 1.0.0.3 オンライン家庭教師のデメリット【ベテラン家庭教師が解説】
- 1.0.0.4 副業としての家庭教師の魅力【その1・説明力がアップする】
- 1.0.0.5 ブログのネタが探せて、記事作成がはかどる【Twitter活用術】
- 1.0.0.6 ブログとの向き合い方【ブログ開設2年が経過して思うこと】
- 1.0.0.7 WordPress有料テーマ比較【アフィンガー6 vs SWELL(スウェル)】
- 1.0.0.8 【2022年のトレンド】ライフハック? いいえ、ハゲハックです!
- 1.0.0.9 ブログのネタが探せて、記事作成がはかどる【Twitter活用術】
- 1.0.0.10 ブログとの向き合い方【ブログ開設2年が経過して思うこと】
- 1.0.0.11 WordPress有料テーマ比較【アフィンガー6 vs SWELL(スウェル)】
- 1.0.0.12 ブログ開設1年6か月記念!【継続できた理由は?】
- 1.0.0.13 WordPressテーマ:アフィンガー5の便利な機能 その4【スペーサー(行間調整】
- 1.0.0.14 F1 2021年シーズンをDAZNで【野球やサッカーも視聴可能】
- 1.0.0.15 45日で15kg減量に成功! 40代のダイエット法を解説します
- 1.0.0.16 知識ゼロから始める!【中学英語の復習】シリーズ3『進行形とは?』
- 1.0.0.17 知識ゼロから始める!【中学英語の復習】シリーズ2『一般動詞とは?』
- 1.0.0.18 知識ゼロから始める!【中学英語の復習】シリーズ1『be動詞とは?』
- 1.0.0.19 【2022年のトレンド】ライフハック? いいえ、ハゲハックです!
- 1.0.0.20 ハゲだけど・・・自信を取り戻し、一目置かれる人物になる!【教養あるハゲを目指す】
- 1.0.0.21 カッコいいハゲを目指す道!【完全版・すべてのハゲで悩む方々へ】
- 1.0.0.22 ハゲはモテない?【ハゲ歴20年超の僕が全力否定します】
- 1.0.0.23 ハゲは怖くない! ~ハゲ坊主にするためのおすすめバリカン~
- 1.0.0.24 アフィンガー5のタグ一覧【記事作成時に役立つ!!】
- 1.0.0.25 アフィンガー5のスタイル一覧【記事作成時に役立つ!!】
- 2 アフィンガー5 【切替タブ】のアレンジ方法
アフィンガー5 【切替タブ】の設定方法

【切替タブ】は、『クラシック版の段落』から設定します。以下の画像を参考にしましょう。
レイアウト>タブ(切替ボタン)>2~4 の順に選択していきます。
タブの数は、2~4個の範囲で選択できます。

タブの数が2個の場合、以下のような表示になりますね。
タブ1のコンテンツ
タブ2のコンテンツ
まだ、なぁんにもアレンジしてないので、味気ないですね(笑) ここから、好きなようにアレンジできます。
例えば、僕の場合、ブログのトップページに以下のように切替タブを配置しています。
-
-
個別指導塾の良い講師(先生)とは~元教室長が解説~
2022/6/26
-
-
オンライン家庭教師に向いている生徒【ベテラン家庭教師が解説】
2022/6/9
-
-
オンライン家庭教師のデメリット【ベテラン家庭教師が解説】
2022/5/5
-
-
副業としての家庭教師の魅力【その1・説明力がアップする】
2022/4/30
-
-
ブログのネタが探せて、記事作成がはかどる【Twitter活用術】
2022/5/1
-
-
ブログとの向き合い方【ブログ開設2年が経過して思うこと】
2022/4/24
-
-
WordPress有料テーマ比較【アフィンガー6 vs SWELL(スウェル)】
2022/4/10
-
-
【2022年のトレンド】ライフハック? いいえ、ハゲハックです!
2022/3/22
-
-
ブログのネタが探せて、記事作成がはかどる【Twitter活用術】
2022/5/1
-
-
ブログとの向き合い方【ブログ開設2年が経過して思うこと】
2022/4/24
-
-
WordPress有料テーマ比較【アフィンガー6 vs SWELL(スウェル)】
2022/4/10
-
-
ブログ開設1年6か月記念!【継続できた理由は?】
2021/10/12
-
-
F1 2021年シーズンをDAZNで【野球やサッカーも視聴可能】
2021/3/21
-
-
45日で15kg減量に成功! 40代のダイエット法を解説します
2020/9/13
-
-
知識ゼロから始める!【中学英語の復習】シリーズ3『進行形とは?』
2021/3/28
-
-
知識ゼロから始める!【中学英語の復習】シリーズ2『一般動詞とは?』
2020/10/16
-
-
知識ゼロから始める!【中学英語の復習】シリーズ1『be動詞とは?』
2020/9/6
-
-
【2022年のトレンド】ライフハック? いいえ、ハゲハックです!
2022/3/22
-
-
ハゲだけど・・・自信を取り戻し、一目置かれる人物になる!【教養あるハゲを目指す】
2022/1/25
-
-
カッコいいハゲを目指す道!【完全版・すべてのハゲで悩む方々へ】
2022/4/12
-
-
ハゲはモテない?【ハゲ歴20年超の僕が全力否定します】
2022/1/2
-
-
ハゲは怖くない! ~ハゲ坊主にするためのおすすめバリカン~
2022/1/2
このように、カテゴリごとにタブで表示されるようにすると、それぞれの記事の一覧が表示されるので、どのような記事があるのかが一目でわかりますね。
それでは、アレンジしていきましょう!(^^)!
アフィンガー5のその他の『タグ』、『スタイル』機能の一覧は、下の参考記事から確認できます。
-
-
アフィンガー5のタグ一覧【記事作成時に役立つ!!】
続きを見る
-
-
アフィンガー5のスタイル一覧【記事作成時に役立つ!!】
続きを見る
アフィンガー5 【切替タブ】のアレンジ方法

まずは、切替タブのコードを確認してみましょう。コードはデフォルトでは以下のようになっています。
shortcode
[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]
まずは以下のコードをカスタマイズしていきましょう。
shortcode
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
step.1
●fontawesome="" Font Awesomeのアイコンを使用するときに記述します。
たとえば、fontawesome="fas fa-check"と記述すると、✔マークがtext="○○○"に記述した文字の前に付きます。
Font Awesomeのサイトでお気に入りのアイコンを見つけましょう。
※Font Awesomeのアイコンを使用するために、プラグイン『Font Awesome』を入れておきましょう。
step.2
●text="" ここにはタブ内に表示したい文字を記述します。
たとえば、text="新着記事"、text="Blog・SNS" のようにです。僕はカテゴリ名を記述しています。
step.4
●bordercolor="" タブの輪郭の色を指定することが出来ます。
たとえば、bordercolor="#000000" と記述すれば、タブの輪郭が黒色になります。
step.5
●color="" タブ内の文字色を指定します。
たとえば、color="#ffffff" と記述すれば、白色の文字になります。
step.6
●fontweight="" タブ内の文字を太字にするときに記述します。
たとえば、fontweight="bold" と記述すれば、太字になります。
step.7
●checked="" 指定したタブの中身をデフォルトで表示させます。
たとえば、checked="chekced" にしたタブの中身がデフォルトで表示されます。
パソコンとスマホ・タブレットでの切替タブの表示は異なるため、その都度ご確認ください。
このようにして、タブの数だけ設定していきましょう。タブごとに色分けすると見栄えが良くなりますね。
次に、以下のコード内を記述していきましょう。
shortcode
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main]
<タブ○のコンテンツ>内には、文章、画像のほか、僕のようにカテゴリごとの記事一覧を配置できます。
カテゴリごとの記事一覧を設定する方法について、解説していきますね。
『クラシック版の段落』から、タグ>記事一覧/カード>カテゴリ一覧を選択します。以下の画像を参考にしてください。

デフォルトだと、以下のようなコードですね。
shortcode
[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"]
必要に応じて、コードの記述を変更していきます。
step.1
●st-catgroup cat="0" カテゴリIDを"123"、"99" のように指定します。
step.2
●page="5" 表示する記事数を指定します。"5"、"8" のように指定します。
step.3
●order="desc" 表示する記事の新旧を指定します。"desc"は新しい順に、"asc"は古い順に表示します。
step.4
●orderby="id" 表示する記事の順番を指定します。"id"はid順に、"date"は日付順に、"rand"はランダムに表示します。
step.5
●child="on" 子カテゴリーを表示させるかどうかを指定します。"on"で表示、"off"で非表示。
step.6
●slide="off" "on"でスライドします。"off"でスライドさせないようにできます。
step.7
●slides_to_show="3,3,2"
表示する記事の数をpxごとに指定します。左から順に、
960px以上で3列表示、600px~959pxで3列表示、599px以下で1列表示となります。
step.8
●slide_date="" "on"で投稿日を表示します。何も指定しなければ、表示されません。
step.9
●slide_more="ReadMore" "ReadMore"がデフォルトです。"続きを読む"、などに変更できます。
step.10
●slide_center="off" "on"にすると、スマホで表示したときに、両サイドが見切れるようになります。
それぞれの設定は、PC、スマホの機種により、又はCSSの影響により、正確に反映されないことがありますので、その都度ご確認ください。
アフィンガー5には、【切替タブ】以外にも数多くの機能があります。僕はブログ開設当初は、無料テーマを使用していましたが、アフィンガー5にテーマ変更して、本当によかったと思います。
以下の参考記事もお読みください。
-
-
ブログ3か月の初心者がアフィンガー5にテーマ変更してみての感想!
続きを見る
-
-
ブログ初心者卒業?【3か月が経過しての正直な感想・振り返り】
続きを見る
アフィンガー5は、ブログ初心者から、ベテランブロガーまで、必要な機能を満たしてくれる優れたテーマです。
導入されていない方は、一度ご検討してみてはいかがでしょうか?
今回は以上になります。最後までお読みいただき、ありがとうございました。