Layout Builderの拡張モジュール


Post:2022/01/31

Update:2022/04/28

フロントエンド モジュール
Layout Builderの拡張モジュール
Layout Builderの拡張モジュール

Asako Okumura

前回の記事で紹介した「Layout Builder」モジュールは、直感的なインターフェースでレイアウト操作を可能にします。Layout Builderにより、コンテンツ編集者/制作者の運用ハードルを下げることができるので、これまでDrupalで待ち望まれていた機能でした。
この機能をさらに便利にするための追加モジュールがDrupal開発者によって開発・提供されて、日々進化しています。
今回は、その中からいくつかの拡張モジュールを紹介します。

前回の記事:Layout BuilderがDrupal9からコアモジュールに

Drupal8,9のLayout Builder 拡張モジュール

Layout Builder Modal

Layout Builderの標準機能では、フィールドやカスタムブロックなど配置した項目の設定はサイドバー内に表示されます。Layout Builder Modalモジュールを使用することで、それらをモーダルで表示することができるようになります。このモジュールは、特にカスタムブロックのコンテンツ更新の際に役立ちます。

Layout Builder Modalを使用していない時

Layout Builder Modalを使用していない時、設定項目がサイドバーに表示されます。(標準機能)

Layout Builder Modalを使用している時

Layout Builder Modalを使用すると、設定項目がモーダルで表示されます。

カスタムブロック
カスタムブロックの設定画面

カスタムブロックのテキスト入力が、大きなモーダル上でできるので、非常に操作しやすくなります。

Bootstrap Layout Builder

Bootstrap Layout Builderは、その名のとおりLayout BuilderでBootstrapのレスポンシブグリッドレイアウトを使えるようになります。ブレイクポイントを決めたり、レイアウト応じて、各カラムの幅も自由に設定できるようになります。
また、背景に画像や動画を設定したり、アニメーション設定など豊富なカスタマイズオプションも使用可能になります。

Bootstrap Layout Builder ブレイクポイントの設定

Bootstrap Layout Builderのブレイクポイントの設定画面。

Bootstrap Layout Builder レイアウトに応じたカラム幅の設定

Bootstrap Layout Builder レイアウトに応じたカラムごとの幅の設定画面。ここで設定したオプションがLayout Builderの設定画面で選択できるようになります。

Bootstrap Layout Builder セクションごとのレイアウト設定

Layout Builderで、セクションごとのレイアウトをBootstrapのグリッドレイアウトから選択できます。

Bootstrap Layout Builder セクションごとのレイアウト詳細設定

セクションのコンテナサイズ、両端の余白、ブレイクポイントごとのカラム幅の設定ができます。

その他の拡張モジュール

Layout Builder Restrictions

Layout Builderで定義されているレイアウトをサイト内で使用できるかできないかを管理画面上で選択できるようになります。

Layout Builder Asymmetric Translation

多言語サイトの場合に、言語ごとに異なるレイアウトを選択することができます。

今回はLayout Builderの拡張モジュールの一部を紹介しましたが、他にも便利な機能を追加できる拡張モジュールが多数ある上、今後も新しいもののリリースが期待されます。
Layout Builderを活用して、ユーザーフレンドリーなサイトの構築をしていきたいと思います!

Profile picture for user Asako Okumura
Asako Okumura
マネージャー
神戸生まれ、神戸育ちの2児の母。デザイナーとして入社後、Drupal(ドルーパル)の面白さにすっかりはまってしまい、デザインだけに止まらず、ある程度の案件なら開発までしてしまいます。 AcquiaのDrupal認定試験は「サイトビルダー」「デベロッパー」「フロントエンドスペシャリスト」を取得。残りの1つ「バックエンドスペシャリスト」を取得し、グランドマスター資格を目指して勉強中。