AFFINGER5

【AFFINGER5】タブ(切替ボタン)の設置方法とカスタマイズ方法を紹介!

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

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

 

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





1つ目

2つ目

3つ目


 

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

 

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

 

【AFFINGER5】タブ(切替ボタン)の設置方法

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!

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

 

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!2

 

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

 

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

 

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

 

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

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

 

text=""

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!8

実際のボタンを見ても




タブ1のコンテンツ

タブ2のコンテンツ


 

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

 

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

 

fontawesome=""

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

 

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

 

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

 

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!3

 

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

 

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




Font Awesomeを開いてbicycleを探します。

見つかったらクリック。

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!4

このようなページが表示されるのでfa-bicycleをコピーします。

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!5

コピーしたfa-bicycleをfontawesome=""の""にペーストすると完成します。

Font Awesomeを開いてbookを探します。

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!7

見つかったらクリック。

このようなページが表示されるのでfa-bookをコピーします。

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!6

コピーしたfa-bookをfontawesome=""の""にペーストすると完成します。


 

bgcolor=""

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

 

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

 

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

 

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

  • バイク→赤
  • 本→青

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!9

 

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




タブ1のコンテンツ

タブ2のコンテンツ


bordercolor=""

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

 

今度はコードを使用して

  • バイク→青
  • 本→赤

で表示させます。

 

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!10

 

表示はこのように




タブ1のコンテンツ

タブ2のコンテンツ


 

color=""

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

  • バイク→黒
  • 本→白

 

コード

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!11

 

表示




タブ1のコンテンツ

タブ2のコンテンツ


 

fontweight=""

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

 

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

fontweight="normal" 標準の太さを設定する(数値指定の"400"に該当する)
fontweight="bold" 太字を設定する(数値指定の"700"に該当する)
fontweight="100~900" "100"(細い)~"900"(太い)の100単位でふと他を数値で指定する

 

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

 

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

 

checked=""

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

 

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

 

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!12

 




タブ1のコンテンツ

タブ2のコンテンツ


 

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

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

 

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

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

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!13

bgcolor=""

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

 

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

 

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

 

bordercolor=""

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

 

  • バイク→黒
  • 本→青

このようになります。




タブ1のコンテンツ

タブ2のコンテンツ


 

コードはこのように

【AFFINGER5】タブ(切替ボタン)の設置方法を紹介!14

 

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

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

 

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

 

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

 

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

 

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

 

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

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.