Drupal テーマの設定

この記事は、LightsailでDrupalを公開する前に、ローカル環境でのテストを行なった際に書いています。その後、Lightsailのブループリントで選択し、東京リージョンにインストールしたBitnamiのDrupalがデフォルトで10.3.3となっており、インストール後、アップデートをしたので、このWEBサイトはDrupal10.3.5での公開となっています。※2024年9月30日現在

記事の通り、Macの環境構築はDrupal11.0.4で行なっています。AWSでDrupal11.0.4を動かす予定でしたが、Lightsailのブループリントで用意されるDrupalのインスタンスが、Drupal11.0.4に対応していない為、Drupal10.3.5で公開しており記事内容がわかりにくくなっています旨ご了承ください。

Amazon Lightsailについては別の記事で書いて行きます。

今回、Drupal 11.0.4をインストールしたので、動作確認が完了しているThemeがまだ少ない中、Bootstrap5は、2024/8月時点で、Drupal 11.xに対応しています。

元々、CivicThemeという、オーストラリアの政府機関や教育機関が使用するThemeを使用していましたが、Drupal11.xへの対応が済んでおらず(対応予定)テスト環境で、Drupal11.xをインストールしCivicThemeをインストールすると、依存関係でインストール不可のメッセージが出てしまいインストール出来ないので、今回Bootstrap5を使用しています。

私自身デザインセンスはあまり良くないのですが、Bootstrap5のライブラリーを使用するだけで、見栄えが良く読みやすいWEBサイトが簡単に制作出来ます。Bootstrapは、当初よりモバイルファーストをコンセプトに上げ開発されているので、他のフロントエンドツールキットよりモバイルの視認性に優れています。

非常にシンプルなテーマとなっていて、デフォルトでは、ビューやタクソノミーなどの、サイト構成の設定が用意されていないので、自身でサイト構成の構築を行い、デザインはHTMLのタグに、Bootstrapのライブラリーを書いてサイト構成とデザインを組み立てる必要があります。

テーマの特徴として、ページの整理、表示項目など、DBが絡む部分をDrupalが行い、表示のデザインに、Bootstrapのライブラリーを使う形になっています。バックエンドとデフォルトのHTMLまでをDrupalが行い、フロントエンドデザインをBootstrapモジュールで肉付けというシンプルな構成になっています。

シンプルな構成の利点として、デフォルトでインストールされるモジュールが、DrupalCoreのデフォルトに、Bootstrapのツールキットのみをインストールしており余計なモジュールがインストールされていません。必要に応じてモジュールを選択してインストールしていきますので、モジュールの管理もしやすいです。

Bootstrapは利用者が多く、使い勝手は抜群ですが、Tailwindなど新しいフロントエンドツールキットに比べると、デザインの目新しさという点では一歩譲ります。ただデザインの優劣というより、利用者が多く良く目にするという理由によるもので、シェアの大半を占めているスタンダードゆえの理由となります。

Bootstrap5のインストール

% composer require 'drupal/bootstrap5:^4.0'
|
-----インストールメッセージ-----
./composer.json has been updated
Running composer update drupal/bootstrap5
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
- Locking drupal/bootstrap5 (4.0.3)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Downloading drupal/bootstrap5 (4.0.3)
- Installing drupal/bootstrap5 (4.0.3): Extracting archive
Generating autoload files
43 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.
-----終了-----
|
// インストール完了
%

Drupal管理画面にて

テーマ > アンインストールテーマに

Bootstrap5 4.0.3がありますので  > インストールしてデフォルトに設定を選択します。

これで、Bootstrap5 4.0.3がインストールされてデフォルトテーマになります。

Drupal管理画面にて

テーマ > Bootstrap5 > 設定を選択

設定画面下部のアコーディオンメニューに

SubThemeの項があるので、そこを選択し、以下の3項目を設定し作成ボタンを押すとサブテーマが出来上がります。

Create subtheme.

1. Subtheme location > themes/custom
2. Subtheme name > B5 subtheme
3. Subtheme machine name > b5subtheme

作成ボタンを押すと、サブテーマがアンインストールに出来上がります。
サブテーマを選択し、インストールしてデフォルトに設定を選択すると、サブテーマでの運営となります。

Bootstrap5.

Bootstrap5のインストールとサブテーマの設定が完了しましたので、次項で、Bootstrap5の基本設定をします。