アコーディオンブロックの使い方

アコーディオンブロックの使い方
記事上のウィジェットエリア

このページでは、WordPressテーマ『SWELL』で利用可能なGutenberg用ブロック、「アコーディオンブロック」の使い方を解説していきます。

このブロックを使うと、クリック(タップ)でコンテンツが開閉できる、いわゆる「アコーディオンメニュー」を簡単に設置することができます。

動画で使い方を確認!

目次前広告表示エリア
目次

SWELLのアコーディオンブロックの使い方

ブロック追加ボタンから「SWELLブロック」タブの中にある「アコーディオン」と書かれたブロックを選択すると使用できます。

アコーディオンブロックを選択
アコーディオンブロックを選択
※ ブロックの順番は使用頻度によって左右されます。

もしくは、/accordionというブロックキーワードからも簡単にブロックを選択できます。

アコーディオンブロックを追加すると、以下のような初期状態でブロックが挿入されます。

アコーディオンブロックの初期状態
アコーディオンブロックの初期状態
  • アコーディオンメニューのタイトル
  • アコーディオンメニューのコンテンツ

がセットになったブロックが挿入されており、その下に表示されている「+」マークのボタンを押すと、さらに同じようにアコーディオンメニューの項目を追加できます。

アコーディオンメニューの項目を追加
アコーディオンメニューの項目を追加

アコーディオンブロックの設定について

アコーディオンブロック(項目ブロックではなく、親ブロックの方)が選択状態の時、エディターに右側にアコーディオンブロック設定用パネルが出てきます。

アコーディオンブロック設定パネル
アコーディオンブロック設定パネル

このパネルから、アコーディオンメニューのスタイルと開閉時のアイコンを設定できます。

アコーディオンブロック使用例

実際に、各種スタイルとアイコンの設定を変えてアコーディオンブロックを設置してみます。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次