【AFFINGER5】タブ（切替ボタン）の設置方法とカスタマイズ方法を紹介！

今回はタブ（切替ボタン）の設置方法とカスタイマイズ方法を紹介します！

タブとはこれのことです。

AFFINGER5ではタブ（切替ボタン）を2つ～4つまで設定することが出来ます。

AFFINGER5の他のカスタイマイズ方法はこちらの記事にまとめてあります。

【AFFINGER5】タブ（切替ボタン）の設置方法

「タブ」→「レイアウト」→「タブ（切替ボタン）」の順番に選択します。

タブを2つ～4つまで選べるので選びます。

するとこのようなコードが表示されます。

これが表示されたら設定は完了です。

基本的には"タブ〇"というところにボタンに表示させたい文字、"タブ〇のコンテンツ"というところには文字や画像などを貼り付けます。

細かくは次で紹介します！

【AFFINGER5】タブ（切替ボタン）のカスタイマイズ方法

コードが良くわからない！という方に向けてそれぞれのコードの意味とカスタイマイズの仕方を紹介します！

text=""

最初は「タブ1」や「タブ2」と記載されています。

実際のボタンを見ても

このように表示されています。

text=""にはタブボタンに表示させたい文字を入力します。

fontawesome=""

これはタブボタン名の前にアイコンを表示させるコードです。

アイコンのコードはFont Awesomeというサイトにいろいろとあります。

今回はタブ1にバイクのアイコン、2に本のアイコンを貼ります。

コードはこのようになります。

先ほど紹介したtext=""にはそれぞれのアイコンの名前を入力しました。

するとこのように表示されます。アイコンの取得方法はそれぞれのコンテンツに書いてあります。

bgcolor=""

タブ切替ボタンの背景色のコードです。

初期設定では何も入力されていないため白色になっていると思います。

色の入力は"black"や"red"といった色そのものを入力する方法とコードを入力する方法があります。

コードはこちらのサイトにいろいろと載っています。

• バイク→赤
• 本→青

で、表示するとすることコードはこのようになります。

表示はこのようになります！

bordercolor=""

タブ切替ボタンの罫線の色のコードです。

今度はコードを使用して

• バイク→青
• 本→赤

で表示させます。

コードはこのようになります。

表示はこのように

color=""

タブ切替ボタン内の文字の色のコードです。

• バイク→黒
• 本→白

コード

表示

fontweight=""

タブ切替ボタン内の文字の太さのコードです。

文字もしくは数字を入力して文字の太さを決めます。

一応このような決まりになっているのですが今のところ何を入れても必ず太くなってしまいます。

解決策が見つかり次第更新させていただきます。

checked=""

どちらを最初に表示させるかを決めます。

デフォルトではタブ1が最初に表示されることになっています。

checkedをタブ2に移すと、このようにタブ2の本が最初に開かれた状態になります。

コンテンツ内のカスタイマイズ

タブ切替ボタンのカスタイマイズをここまで紹介してきましたがコンテンツ内のカスタイマイズも可能です。

カスタイマイズできるのでは主に2つ。

• bgcolor=""：コンテンツ内の背景色
• bordercolor=""：コンテンツ周囲の罫線色

bgcolor=""

先ほども紹介しましたが背景色です。

これをいじる必要がある人はブログの背景色を変えている人です。

変えている人は同様の色やコードを入力しましょう。

bordercolor=""

コンテンツの枠の色を決められます。

• バイク→黒
• 本→青

このようになります。

コードはこのように

【AFFINGER5】タブ（切替ボタン）の設置方法を紹介のまとめ

今回はAFFINGER5でのタブ（切替ボタン）の設置方法を紹介しました。

この機能の最大のメリットはスクロール量を減らせることです。

カテゴリーを設定するとボタン1つで切り替えができて簡単に他のカテゴリーを見ることが出来るようになります。

これがいいのか悪いのかは人それぞれだとは思いますが、僕はスクロール量が少ない方がうれしいです。

設定自体は簡単なのでぜひやってみてください！

では、また次の記事で会いましょう！！