この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO アコーディオンブロック】について解説していきます。
SANGO アコーディオンブロックは詳しい説明を記事内で表示する場合にそのコンテンツを隠しておくことができるブロックです。
例えば以下のようなタイムラインを【SANGO タイムラインブロック】で作ることができます。
隠したいコンテンツをここに記載
SANGO アコーディオンブロックの呼び出し方
まずはエディターを開き、ブロック追加ボタンをクリックします。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/1b96824b9df1ea2c6f072271d87e12e8.png)
クリックすると、ブロック一覧が表示されるのでその中から「SANGO アコーディオン」と書かれたブロックを選択します。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/05/1c07992b00868c0132b9292acbe1d386.png)
もしくは、/accordion とエディターに入力いただくことでクイック呼び出しも可能です。
SANGO アコーディオンブロックの使い方
アコーディオンブロックを呼び出すと下の画像のようなブロックが表示されます。隠したいコンテンツは「アコーディオン内容」「アコーディオン終わり」と書かれた範囲内に入力しましょう。コンテンツにはテキスト以外にも画像やブロックなど好きなブロックを挿入することができます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/05/b796eaf4d3ff4fd83b0f177fdd42b1f6-1000x183.png)
各種設定項目
アコーディオンブロックはデフォルトではボタンを押すまでコンテンツが非表示になっているのですが、チェックを入れて内容をあらかじめ表示しておくこともできます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/05/9bba302059befeea42ce75f95440609c.png)
アコーディオンブロックのボタンに影を表示します。デフォルトでチェックが入っているので、もし影を表示したくない場合はチェックを外しましょう。
アコーディオンブロックのボタンの角丸の大きさを変更できます。丸みを持たせたい場合は値を大きくしてください。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/2e4a7cd9a6e518ccc28bcc26dfcb92f5.png)
またボタンの色や背景色、ボーダー色なども変更できます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/06/266718a6d43f1e332c0137a8226c4896.png)
コメントを残す