広告 AFFINGER

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

2020年10月9日

AFFINGER5画像

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

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

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

 

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

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

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

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





イメージ画像1

イメージ画像2

イメージ画像3


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

 

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

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

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





イメージ画像1

イメージ画像2

イメージ画像3


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

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

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

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

手順

  1. タブ切り替えコードを挿入
  2. タイトルとコンテンツを入力

 

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

タブの挿入

タグ → レイアウト → タブ(切替ボタン)

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

 

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

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

コード

タグ切り替えコード

ブログ上での表示

コードとの関係

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

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

カスタマイズ方法

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





動物

サンプルテキスト サンプルテキスト サンプルテキスト

電車

サンプルテキスト サンプルテキスト サンプルテキスト

サンプルイメージ2

サンプルテキスト サンプルテキスト サンプルテキスト


カスマイズ手順

  1. アイコンを表示
  2. 背景色・文字色を変更
  3. ボックス型(枠線あり)に変更

デフォルトの状態のソースコード

デフォルトのソースコード

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

 

アイコンを表示

サンプルデザインのソースコード

アイコンを変更

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

 

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

アイコン

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

 

背景色・文字色を変更

サンプルデザインのソースコード

文字色と背景色

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

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

背景色・文字色は、6桁のHTMLカラーコードで指定します。

 

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

HTMLカラーコード

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

 

ボックス型(枠線あり)に変更

サンプルデザインのソースコード

枠線

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

枠線の色は、6桁のHTMLカラーコードで指定します。

 

大福
大福
上で紹介した以外にも、カスタマイズは可能だよ。
以下の表を参考にしてね。
color 文字色 (6桁のHTMLカラーコードで指定)
bgcolor 背景色 (6桁のHTMLカラーコードで指定)
text タブ名
bordercolor 枠線の色 (6桁のHTMLカラーコードで指定)
fontawesome アイコン Font Awesomeのものを使用
fontweight 文字の太さを指定 (例:bold , 120)

 

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

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

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

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

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

AddQuickTag使い方TOP画像
AddQuicktagの使い方とコピペで使える5つの囲み枠

続きを見る

 

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

AFFINGER5記事一覧

 

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

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

 

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

\ AFFINGER6にも対応済み /

オリジナル特典バナー

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

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

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

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

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER