AFFINGER5【タブで切り替えられるボックス】カスタマイズも

AFFINGER5の「タブ（ボタン）で切り替えられるボックスの作り方」を紹介します。

タブ切替ボタンを使えば、多くの情報も集約してスッキリ見せることが可能です。

AFFINGER5を使っているなら、ぜひ覚えておきたい機能の一つです。

こんな人のお役に立てる記事です。

小豆

色々と書きすぎるせいか、毎回ブログの見た目がごちゃごちゃしてしまう。
伝える情報量はそのままに、もっとスッキリ見やすくする方法ってないのかな？

AFFINGER5で表示できるタブ切り替え可能なボックス

AFFINGER5に搭載されているタブ機能を使った表示がこちら。

ごちゃごちゃしがちな情報も、タブを使うことでスッキリとみせることができます。

小豆

確かに便利そうなんだけど・・。
デザインがあまり自分好みではないんだよなぁ。

便利なタブ機能ですが、確かにちょっと見た目がシンプルすぎて素っ気ないですよね。

というわけで、記事内では以下のようにタブ切替ボックスをカスタマイズしていきます。

タブで切り替えられるボックスの作り方【基本編】

まずは、カスタマイズなしの「基本のタブ切り替えボックス」の作り方を解説していきます。

とは言っても、作り方はめちゃくちゃ簡単。

わざわざ解説するまでもないほどです。

step
1タブ切り替えコードを挿入

タグ　→　レイアウト　→　タブ（切替ボタン）

ここでは例として【2つ】を選択したとして、解説をしていきます。

step
2タイトルとコンテンツを入力

挿入されたコードとブログ上での表示関係は以下のようになっています。

タブ1・2、タブ1・2のコンテンツのテキストを削除し、任意のテキストや画像を入力します。

大福

やることは、たったこれだけ。
めちゃくちゃ簡単だね。

カスタマイズ方法

以下のデザインのタブ切替ボックスを例に、カスタマイズ方法を解説していきます。

大福

デフォルトの状態のソースコードを、サンプルデザインのようになるようにカスマイズしていくよ。

アイコンを表示

fontawesome=""　▶　fontawesome="任意のアイコンコードを入力"

アイコンはFont Awesomeのものを使用します。

赤枠内をコピーして、fontawesome内に貼り付ければアイコンが表示されます。

背景色・文字色を変更

bgcolor=""　▶　bgcolor="ここに背景色を入力"

color=""　▶　color="ここに文字色を入力"

HTMLカラーコードは、以下の手順で簡単に呼び出すことができます。

タグ　→　ショートコード補助　→　HTMLカラーコード

ボックス型（枠線あり）に変更

bordercolor=" "　▶　bordercolor="ここに枠線に色を入力"

大福

上で紹介した以外にも、カスタマイズは可能だよ。
以下の表を参考にしてね。

まとめ：自分好みのタグ切り替えボックスは保存しておくと便利

タグ切り替えボックスを作るたびに、ソースコードをカスタマイズするのは面倒ですよね。

そんな場合は、WordPressプラグイン【AddQuicktag】を使うと便利です。

【AddQuicktag】は、オリジナルショートコードの保存や呼び出しを簡単に行うプラグインです。

使い方は、以下の記事を参考にしてください。

👉カスタマイズをもっと見たい人はこちら

AFFINGER5記事一覧

👉AFFINGER6【当ブログオリジナル特典】はこちら

【AFFINGER6購入特典】当ブログ限定オリジナル特典を13個紹介

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する