![](https://cxg-design.jp/wp-content/uploads/2023/12/03fec25b608e27f2f5dadeeaad30cd20.png)
タブ作成プラグイン「Tabs Responsive」で細かい情報を非表示にして見た目をスッキリ
前々回では、LPページで、ポップアップを使用し、細かい情報を隠す方法を紹介しました。
今回は、タブで2つの異なる情報をまとめ、さらにアコーディオンで隠し、シングルページの見た目をスッキリさせます。
まず、今回のDEMOです。カフェのシングルページで、ドーナツの紹介をしています。
メインは2カラムで、左にスライダー、右に商品名を入れています。スライダーは、トリミングで正方形にするため、幅、高さ700pxに設定しています。
アレルゲンと栄養成分情報をタブで切り替えできるようにして、さらにアコーディオンで隠しました。商品のみ見たい人は、必要のない細かい情報を見ることなく、下のドリンクにスクロールできます。ドリンクは関連ページとしてシングルページへのリンクを想定して作成しました。(リンクページは作成していません。)
![](https://cxg-design.jp/wp-content/uploads/2023/12/ff7fe93bfa18dc1b8cfe6ed5c48147e1.png)
メインは2カラムで、左にスライダー
![](https://cxg-design.jp/wp-content/uploads/2023/12/bf36a079f225de03c021eb966a78ac7d.png)
スライダーは、縦、高さ700px
![](https://cxg-design.jp/wp-content/uploads/2023/12/c1de5ceae591104f1b9ac88f3c38af97.png)
ドリンクは関連ページ
では本題です。今回は、「Tabs Responsive」というプラグインを使用しました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/122e45ae6e90c796dee2eae8dffc6d4f.png)
出典 : Tabs Responsive
作り方の手順は内容をブロックエディターで作成し、テキストエディターでコードを表示しコピー。Tabs Responsiveのテキスト欄にコードをペーストし、タブの色などを設定します。タブのショートコードをアコーディオンのテキスト欄に貼り付け、アコーディオンのショートコードをブロックエディターに貼り付けます。
ブロックエディターで内容作成
情報を載せる投稿タイプで、新規ページを作成します。アレルゲンはカラムで作成しました。主要7品目のみイラストを使用し、残りはテキストのみの表示しました。背景はライトグレーにして、有効なアレルゲンのみカラムの背景を白にしています。
![](https://cxg-design.jp/wp-content/uploads/2023/12/26c334e829cdbe5e96e9829f99481db9.png)
タブの上段にカバーでグラデーションを入れる。
![](https://cxg-design.jp/wp-content/uploads/2023/12/454229f41f02410a8f3ee73a7018ae96.png)
アレルゲンは、有効なカラムの背景を白に。
別に新規ページを作成し、栄養成分情報を作成します。栄養成分情報はテーブルで作成しました。2カラムでSPでは1列に並びます。
![](https://cxg-design.jp/wp-content/uploads/2023/12/930d282481f63dfd742e91f1c1ba0a98.png)
栄養成分情報はカラムにテーブルを入れて作成
タブの作成
まず、作成したアレルゲンのページを、右上メニューからテキストエディターに表示を切り替え、すべてコピーします。
![](https://cxg-design.jp/wp-content/uploads/2023/12/c422b49552245aca8dd6af12639b4a54.png)
テキストエディターに切り替えて、コードをすべてコピー
Tabs Responsive>Add New Tagをクリックし編集画面を表示します。「Tab Title」にタブに表示する項目を入力し、「Tab Discription」の下の「MY SWING EDITOR」をクリックします。右上のタブを「テキスト」にしてテキスト欄のデフォルトで入っているテキストを削除し、コードをペーストします。
アイコンは今回表示しないので、「Display Above Icon」のチェックを外します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/19f7a23971fe1e6ee0f245a11c40015a.png)
Tab Responsive>Add Newをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/ecfbc18a6b0bf4474f6ed289a4e3f164.png)
「Tab Title」にタイトルを入れ、「Tab Derection」の文字を消し、「Use WYSWYG Editor」をクリック。
![](https://cxg-design.jp/wp-content/uploads/2023/12/bed2425e2f87a2e5e2f7a8be8e3cab72.png)
「テキスト」にコードをすべてペースト
![](https://cxg-design.jp/wp-content/uploads/2023/12/7bd75020d5e9e3f3230dfa10f80f4160.png)
「Display Above Icon」を「No」に切り替え
同じように栄養成分情報のコードを2番目のコンテンツにコピペします。また、デフォルトで設定されている3番目のタブのコンテンツを右下のゴミ箱マークをクリックし、削除します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/b099828fbb28478e699e498982003ac9.png)
栄養成分情報を同じように作成
右サイドバーから、タブの色、コンテンツ内のバックグラウンドやテキストの色、スタイルを設定していきます。
項目 | 設定値 |
---|---|
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」ショートコードをコピーします。
![](https://cxg-design.jp/wp-content/uploads/2023/12/b2fb0103ea4055010a821c65d218af1d.png)
ショートコードをコピー
アコーディオンの作成
今回は「Accordion FAQ」というプラグインを使用しました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/11b59e44a684bcfecaeeacfba5664901.png)
出典 : Accordion FAQ
「Add New Accordion」から新規ファイルを作成します。「Accordion Title」にタイトルを入力し、「Accordion Description」に「Tabs Responsive」のショートコードをペーストします。また、「Display Above Icon」を「No」にして、アイコンを非表示にします。
![](https://cxg-design.jp/wp-content/uploads/2023/12/0ed8c12fefb1fd009eeedf70d7acf60c.png)
Accordion | FAQ>Add New Accordionをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/4a6aa852e1af414296891754174705d6.png)
タイトルを入れ、「Accordion Description」にショートコードをペースト。「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 |
シングルページに表示
今度は、アコーディオンのショートコードをコピーし、シングルページの内容説明の下にペーストします。これで、アコーディオンで隠れた、タブの作成の終了です。プレビューで確認ます。
![](https://cxg-design.jp/wp-content/uploads/2023/12/bf636a6e1170e6ce5f0f098276b0f3c4.png)
ショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2023/12/412e11c4f53b1581f59467dd83b961cd.png)
「ショートコード」ブロックにショートコードをペースト
![](https://cxg-design.jp/wp-content/uploads/2023/12/5d657835e0563e6c987d3a0797d5af76-1.png)
プレビューを確認
今回は、タブ作成プラグインで細かい情報を隠す方法を説明しました。少し制作工程が複雑ですが、ブロックエディターで作ったものを使用でいるので便利だと思います。Webサイト作成のご依頼は、メールフォームよりよろしくお願いします。