AFFINGER

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

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記事一覧

 

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

当ブログ限定オリジナル特典を5つ紹介

 

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記