ブログやサイトをわかりやすくするには、情報の整理が必要不可欠です。
要点を箇条書きにしたり、文章をほどよく改行するような微調整でもわかりやすくなりますが、こういったタブメニューで情報を整理するのも効果的です。
内容によってはぐっとわかりやすくなります。
というわけで今回は、コンテンツの整理に役立つタブメニューを設置できるWordPressプラグイン「Tabs Responsive」をご紹介いたします。
目次
タブメニューはどんな時に使うのがおすすめ？
タブメニューは情報の整理だけでなく、ページ内の省スペース化にも役立ちます。クリックしなければ情報を切り替えられないというデメリットはありますが、扱う内容やシーンに合わせて使うと極めて有効です。
例えば、次のようなケースです。
- 商品スペック（素材/注意事項/備考など）
- タイプ別の比較や説明（iPhone/Androidなど）
- ビフォーアフター
こういった内容は、画像や説明をつらつらと書き並べるよりもタブメニュー内に設置した方がスマートです。特にビフォーアフターに関しては、大きな画像で前後を比較しやすいというメリットもあります。
例えば、弊社では下記記事などでタブメニューを活用しています。
サイトデザインは、何かが欠けていたり有りすぎるだけで、全体のバランスを崩してしまうもの。特にトップページやヘッダー周りはユーザーの目にも止まりやすいため、印象に関わる影響は大きいものです。 今回は、WordPressテーマなどサイトテンプレートを使って構築しているサイト向けに、ロゴとグローバル...
TCDの記事内で利用しているタブメニューは弊社オリジナルのものですが、TCDテーマ「QUADRA」には、テーマの機能として専用のタブメニューが搭載されていますので、宜しければチェックしてみてください。
タブメニューはスペースを削減しながら、情報を整理する際にご活用いただけます。
「Tabs Responsive」の機能概要
WordPressサイト内でタブメニューを使いたいならこのプラグインが便利です。Pro版（有料）もありますが、当記事では無料版でできることを解説いたします。主な特徴は次の通りです。
- ショートコードで簡単設置可（投稿・固定ページ問わず）
- ウィジェットエリアにも設置可
- タブメニュー内に画像も使える
- タブメニューの見出しにアイコンを表示可
他にもタブのカラーやフォントも細かく変更可能ですが、幅広いデザインにマッチするので、シンプルな初期設定のまま使うのがオススメです。
「Tabs Responsive」のインストール
管理画面から「Tabs Responsive」と検索してインストールするか、下のボタンからもダウンロード可能です。ファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
「Tabs Responsive」の使い方
タブメニューの作成方法とその他のオプションについてご案内いたします。
タブメニューの作り方
有効化したらメニューに「Tabs Responsive」が追加されますので、そこからタブメニューを作っていきます。
メニュー内の「Add New Tabs」を押すと次の画面が開きます。
ここでタブメニュー全体のタイトルと各タブごとの見出しや内容を設定します。
最上部のタイトルがタブメニュー全体のタイトルですが、設置した際に表示するかどうかは後ほど解説するオプションで設定可能です。個人的には管理用のタイトルとして設定しておくだけでいいと思います。
タブ本体の見出しは次の箇所で設定してきます。
Tab Titleがタブの見出しで、Tab Descriptionがそのタブ内の内容です。内容はテキストのみならず、画像を挿入することも可能です。
「Use WYSIWYG Editor」というボタンをクリックすると次のようなエディタが表示されます。
WordPressのクラシックエディタと同じ要領でメディアなども挿入可能です。
少しユニークなのは、次の「Tab Icon」の箇所です。
テキストの見出しと一緒に表示できるアイコンが豊富に用意されています。直感的に伝えたい内容についてはアイコンを利用するのもアリです。
その直下にある「Display Above Icon」で「No」を選択するとアイコンは非表示になります。特に不要な方はこちらで設定してください。
初期状態ではタブを3つ設定できますが、右下に表示されているゴミ箱ボタンで削除可能です。
※下部にある青いゴミ箱ボタンを押すと全て削除されますのでご注意ください。
タブを増やしたい時は、赤色の「Add New Tabs」で追加可能です。
ここまで設定したら、上部に戻って「公開」を押します。
これでタブメニューの作成は完了です。
タブメニューの設置方法
作成したタブメニューの設置方法は2種類あり、ショートコードもしくは、ウィジェットを使います。
ショートコードをコピペする
「All Tabs」で完成したタブメニューを確認します。
ここに作成したタブメニューが一覧で表示されますので、ショートコードをコピーしてブログ記事内などに貼り付ければOKです。固定ページ内でも利用できます。
記事内に貼り付けた場合、次のように表示されます。
※WordPressテーマ「Twenty Twenty-One」に設置した例です。
初期設定のままでシンプルなデザインなので汎用性はありそうです。タブ内のフェードインアニメーションも綺麗です。
ウィジェットとして使う
また、作成したタブメニューは、ウィジェットエリアにも設置できます。
「外観」>「ウィジェット」に「Tabs Responsive Widget」が追加されていますので、任意のウィジェットエリアに追加して設置可能です。
ウィジェットの設定は「ウィジェットのタイトル」と「作成したウィジェットを選択する項目」のみです。例えば、サイドバーがあるテーマに設置した場合は次のように表示されます。
複数のページで表示されるウィジェットエリアであれば、バナーを入れたり、注意書きなど示しておくような使い方ができそうです。
その他のオプション
ここからはその他のオプションについて解説いたします。豊富に項目が用意されていますが、実用性の低いものもありますので、オススメのもののみをピックアップしてご紹介いたします。
タブの編集画面の右側に表示されている部分で詳細を設定します。下にスクロールすると豊富に項目がありますが、主に使うのは次の設定項目です。
- Display Tabs Section Title（タブのタイトルの表示/非表示）
- Display Option For Title and icon（タブ見出しとアイコンの表示切り替え）
- Tabs Title Background Colour（タブ見出しの背景色）
- Selected Tabs Title Background Colour（選択したタブ見出しの背景色）
- Tabs Description Background Colour（タブの内容の背景色）
- Tabs Title/Icon Font Size（タブ見出しのフォントサイズ）
- Tabs Description Font Size（タブの内容のフォントサイズ）
- Tabs Description Animation（タブの内容のアニメーション）
- Title Display Mode In Mobile（モバイルでのタブデザインの設定）
各所の「help」という項目をホバーすると図解または簡単な英文で示してくれますので、問題なく設定いただけると思います。
設定は任意ですが、フォントやタブのカラーはできるだけ変更しない方がデザインになじみやすいです。
ただ「Title Display Mode In Mobile（モバイルでのタブデザインの設定）」は「Display As a tabs」に変更するのがオススメです。
初期状態では「Display As A vertical Button」になっており、スマホでは左のように表示されます。
少し分かりづらいので、「Display As a tabs」を選択してPCと同じ見え方に変更しておくといいと思います。
まとめ
簡単にタブメニューがつくれるWordPressプラグイン「Tabs Responsive」をご紹介いたしました。
「モバイルでのタブデザイン」以外は初期設定のままで十分使えると思います。項目別やタイプ別、ビフォーアフターなど。ブログ記事やサイト内の情報を整理する際にお役立てください。省スペースかつ、わかりやすいコンテンツづくりにご活用いただけます。
コメント