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

  • Plugin

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

    ポップアップ作成プラグイン「Popup Maker」で詳細情報をボタンクリックで表示

    2023.11.29

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

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

    アソートドーナツ

    Single Page

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

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

    メインは2カラムで、左にスライダー

    スライダーは、縦、高さ700px

    ドリンクは関連ページ

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

     出典 : Tabs  Responsive

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

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

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

    タブの上段にカバーでグラデーションを入れる。

    アレルゲンは、有効なカラムの背景を白に。

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

    栄養成分情報はカラムにテーブルを入れて作成

    タブの作成

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

    テキストエディターに切り替えて、コードをすべてコピー

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

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

    Tab Responsive＞Add Newをクリック

    「Tab Title」にタイトルを入れ、「Tab Derection」の文字を消し、「Use WYSWYG Editor」をクリック。

    「テキスト」にコードをすべてペースト

    「Display Above Icon」を「No」に切り替え

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

    栄養成分情報を同じように作成

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

    項目設定値
    Display Tabs BorderNO
    Tabs StylesDefault
    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/FamilyTheme Default Style
    Tabs Description AnimationNo Animation
    Tabs AlignmentHorizontal
    Margin Between Two TabsNo
    Margin Between Tabs And ContentNo
    Title Display Mode In MobileDisplay As a tabs

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

    ショートコードをコピー

    アコーディオンの作成

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

     出典 : Accordion FAQ

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

    Accordion | FAQ＞Add New Accordionをクリック

    タイトルを入れ、「Accordion Description」にショートコードをペースト。「Display Above Icon」を「No」に

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

    項目設定値
    Display Accordion Section TitleNo
    Accordion Open/Close Icon AlignmentLeft
    Display Open Close IconYes
    Display Accordion Title Font IconNo
    Enable Accordion RadiusNo
    Enable Accordion Margin/SpaceNo
    Enable Toggle/CollapseNo
    Display Accordion BorderNo
    Expand/Collapse Accordion Option On Page LoadHide/close All Accordion
    Accordion StylesSimple
    Accordion Title Background Colour白
    Accordion Description Background Colour白
    Accordion Description Font Colour黒
    Font Style/FamilyTheme Default Style

    シングルページに表示

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

    ショートコードをコピー

    「ショートコード」ブロックにショートコードをペースト

    プレビューを確認

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

    You may also like