タブ作成プラグイン「Tabs Responsive」で細かい情報を非表示にして見た目をスッキリ

前々回では、LPページで、ポップアップを使用し、細かい情報を隠す方法を紹介しました。

今回は、タブで２つの異なる情報をまとめ、さらにアコーディオンで隠し、シングルページの見た目をスッキリさせます。

まず、今回のDEMOです。カフェのシングルページで、ドーナツの紹介をしています。

メインは2カラムで、左にスライダー、右に商品名を入れています。スライダーは、トリミングで正方形にするため、幅、高さ700pxに設定しています。

アレルゲンと栄養成分情報をタブで切り替えできるようにして、さらにアコーディオンで隠しました。商品のみ見たい人は、必要のない細かい情報を見ることなく、下のドリンクにスクロールできます。ドリンクは関連ページとしてシングルページへのリンクを想定して作成しました。（リンクページは作成していません。）

では本題です。今回は、「Tabs Responsive」というプラグインを使用しました。

作り方の手順は内容をブロックエディターで作成し、テキストエディターでコードを表示しコピー。Tabs Responsiveのテキスト欄にコードをペーストし、タブの色などを設定します。タブのショートコードをアコーディオンのテキスト欄に貼り付け、アコーディオンのショートコードをブロックエディターに貼り付けます。

ブロックエディターで内容作成

情報を載せる投稿タイプで、新規ページを作成します。アレルゲンはカラムで作成しました。主要7品目のみイラストを使用し、残りはテキストのみの表示しました。背景はライトグレーにして、有効なアレルゲンのみカラムの背景を白にしています。

別に新規ページを作成し、栄養成分情報を作成します。栄養成分情報はテーブルで作成しました。2カラムでSPでは1列に並びます。

タブの作成

まず、作成したアレルゲンのページを、右上メニューからテキストエディターに表示を切り替え、すべてコピーします。

Tabs Responsive＞Add New Tagをクリックし編集画面を表示します。「Tab Title」にタブに表示する項目を入力し、「Tab Discription」の下の「MY SWING EDITOR」をクリックします。右上のタブを「テキスト」にしてテキスト欄のデフォルトで入っているテキストを削除し、コードをペーストします。

アイコンは今回表示しないので、「Display Above Icon」のチェックを外します。

同じように栄養成分情報のコードを２番目のコンテンツにコピペします。また、デフォルトで設定されている3番目のタブのコンテンツを右下のゴミ箱マークをクリックし、削除します。

右サイドバーから、タブの色、コンテンツ内のバックグラウンドやテキストの色、スタイルを設定していきます。

項目	設定値
Display Tabs Border	NO
Tabs Styles	Default
Tabs Title Background Colour	白
Tabs Title/Icon Font Colour	黒
Selected Tabs Title Background Colour	濃い緑
Selected Tabs Title/Icon Font Colour	白
Tabs Description Background Colour	白
Tabs Description Font Colour	黒
Font Style/Family	Theme Default Style
Tabs Description Animation	No Animation
Tabs Alignment	Horizontal
Margin Between Two Tabs	No
Margin Between Tabs And Content	No
Title Display Mode In Mobile	Display As a tabs

作成終了後、保存。左サイドメニューの「All Tabs」をクリックし、「Tabs Shortcode」ショートコードをコピーします。

アコーディオンの作成

今回は「Accordion FAQ」というプラグインを使用しました。

「Add New Accordion」から新規ファイルを作成します。「Accordion Title」にタイトルを入力し、「Accordion Description」に「Tabs Responsive」のショートコードをペーストします。また、「Display Above Icon」を「No」にして、アイコンを非表示にします。

色などの設定は右サイドバーの項目から設定していきます。

項目	設定値
Display Accordion Section Title	No
Accordion Open/Close Icon Alignment	Left
Display Open Close Icon	Yes
Display Accordion Title Font Icon	No
Enable Accordion Radius	No
Enable Accordion Margin/Space	No
Enable Toggle/Collapse	No
Display Accordion Border	No
Expand/Collapse Accordion Option On Page Load	Hide/close All Accordion
Accordion Styles	Simple
Accordion Title Background Colour	白
Accordion Description Background Colour	白
Accordion Description Font Colour	黒
Font Style/Family	Theme Default Style

シングルページに表示

今度は、アコーディオンのショートコードをコピーし、シングルページの内容説明の下にペーストします。これで、アコーディオンで隠れた、タブの作成の終了です。プレビューで確認ます。

今回は、タブ作成プラグインで細かい情報を隠す方法を説明しました。少し制作工程が複雑ですが、ブロックエディターで作ったものを使用でいるので便利だと思います。Webサイト作成のご依頼は、メールフォームよりよろしくお願いします。