Blog・SNS

WordPressテーマ：アフィンガー５の便利な機能　その２【切替タブ】

2020-09-05

はげにゃん☆
僕の使用しているアフィンガー５の機能のうち、今回は切替タブについてご紹介します。

この記事の信頼性

ブログ経歴

この記事を書いている僕は、アフィンガー５を使用してこのブログを運営している、アラフィフ・ハゲ・ブロガーです。あ、ハゲは関係ないですね。(笑)

前回は、【スライドショー】をご紹介しました。＜＜WordPressテーマ：アフィンガー５の便利な機能　その１【スライドショー】＞＞

参考記事
WordPressテーマ：アフィンガー５の便利な機能　その１【スライドショー】

続きを見る

今回は、【切替タブ】について解説していきます。

【スライドショー】とおなじく、上手に利用すれば、ブログ全体が引き締まり、伝えたい情報をコンパクトにまとめることが出来ます。

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

アフィンガー５を詳しく知る

もくじ

アフィンガー５　【切替タブ】の設定方法

【切替タブ】は、『クラシック版の段落』から設定します。以下の画像を参考にしましょう。

 

レイアウト＞タブ（切替ボタン）＞２～４　の順に選択していきます。

 

タブの数は、２～４個の範囲で選択できます。

タブの数が２個の場合、以下のような表示になりますね。




タブ1のコンテンツ

タブ2のコンテンツ


まだ、なぁんにもアレンジしてないので、味気ないですね(笑)　ここから、好きなようにアレンジできます。

例えば、僕の場合、ブログのトップページに以下のように切替タブを配置しています。




このように、カテゴリごとにタブで表示されるようにすると、それぞれの記事の一覧が表示されるので、どのような記事があるのかが一目でわかりますね。

それでは、アレンジしていきましょう!(^^)!

アフィンガー５のその他の『タグ』、『スタイル』機能の一覧は、下の参考記事から確認できます。

参考記事
アフィンガー５のタグ一覧【記事作成時に役立つ！！】

続きを見る
参考記事
アフィンガー５のスタイル一覧【記事作成時に役立つ！！】

続きを見る

アフィンガー５　【切替タブ】のアレンジ方法

まずは、切替タブのコードを確認してみましょう。コードはデフォルトでは以下のようになっています。

 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.3

    ●bgcolor=""　ここはタブの色を記述します。"#ff00ff" のようにお好きな色を選べます。

    WEB色見本・原色大辞典が便利です。

  • 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の影響により、正確に反映されないことがありますので、その都度ご確認ください。

アフィンガー５には、【切替タブ】以外にも数多くの機能があります。僕はブログ開設当初は、無料テーマを使用していましたが、アフィンガー５にテーマ変更して、本当によかったと思います。

以下の参考記事もお読みください。

参考記事
ブログ3か月の初心者がアフィンガー５にテーマ変更してみての感想！

続きを見る
参考記事
ブログ初心者卒業？【3か月が経過しての正直な感想・振り返り】

続きを見る

アフィンガー５は、ブログ初心者から、ベテランブロガーまで、必要な機能を満たしてくれる優れたテーマです。

導入されていない方は、一度ご検討してみてはいかがでしょうか？

アフィンガー５の価格・機能を知る

今回は以上になります。最後までお読みいただき、ありがとうございました。

-Blog・SNS