記事内容
Drupalで使用するデザインテーマの設定をします。
Notice.
この記事は、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については別の記事で書いて行きます。
Themeの選択.
Drupalをインストールすると、デフォルトでOliveroと言うThemeがインストールされています。
今回インストールしたDrupal Coreは11.0.4なので、Olivero 11.0.4と言うThemeがデフォルトテーマとして設定されています。Oliveroは優れたテーマで、Drupalの基本的なFront End機能（ページ作成やブログ、カテゴリー分けなど）が用意されており、デザインもレスポンシブ（PCや携帯の利用環境に応じたサイトデザインの最適化）となっています。
Oliveroをそのまま利用しても、優れたWEBサイトを構築出来ますが、Drupalの優れた情報整理やユーザービリティを使って見たいので、私はBootstrap5というThemeをインストールします。
今回、Drupal 11.0.4をインストールしたので、動作確認が完了しているThemeがまだ少ない中、Bootstrap5は、2024/8月時点で、Drupal 11.xに対応しています。
元々、CivicThemeという、オーストラリアの政府機関や教育機関が使用するThemeを使用していましたが、Drupal11.xへの対応が済んでおらず(対応予定)テスト環境で、Drupal11.xをインストールしCivicThemeをインストールすると、依存関係でインストール不可のメッセージが出てしまいインストール出来ないので、今回Bootstrap5を使用しています。
Bootstrap5.
Bootstrap5は、Twitterが開発したフロントエンドツールキットと言われる、BootstrapをDrupalで利用可能にしたThemeになります。あらかじめ用意された、CSSやJavaScriptのライブラリを使用して、ゼロからコードを書くことなく、ページデザインを構築できます。
現在最新のBootstrapが5.xx系となっています。このBootstrap5.xx系のライブラリを使用して、WEBサイトを構築出来るテーマが、今回紹介しこのWEBサイトで使用している、Bootstrap5のThemeになります。
私自身デザインセンスはあまり良くないのですが、Bootstrap5のライブラリーを使用するだけで、見栄えが良く読みやすいWEBサイトが簡単に制作出来ます。Bootstrapは、当初よりモバイルファーストをコンセプトに上げ開発されているので、他のフロントエンドツールキットよりモバイルの視認性に優れています。
非常にシンプルなテーマとなっていて、デフォルトでは、ビューやタクソノミーなどの、サイト構成の設定が用意されていないので、自身でサイト構成の構築を行い、デザインはHTMLのタグに、Bootstrapのライブラリーを書いてサイト構成とデザインを組み立てる必要があります。
テーマの特徴として、ページの整理、表示項目など、DBが絡む部分をDrupalが行い、表示のデザインに、Bootstrapのライブラリーを使う形になっています。バックエンドとデフォルトのHTMLまでをDrupalが行い、フロントエンドデザインをBootstrapモジュールで肉付けというシンプルな構成になっています。
シンプルな構成の利点として、デフォルトでインストールされるモジュールが、DrupalCoreのデフォルトに、Bootstrapのツールキットのみをインストールしており余計なモジュールがインストールされていません。必要に応じてモジュールを選択してインストールしていきますので、モジュールの管理もしやすいです。
Bootstrapは利用者が多く、使い勝手は抜群ですが、Tailwindなど新しいフロントエンドツールキットに比べると、デザインの目新しさという点では一歩譲ります。ただデザインの優劣というより、利用者が多く良く目にするという理由によるもので、シェアの大半を占めているスタンダードゆえの理由となります。
Bootstrap 公式Webサイト Bootstrapの公式WEBサイトの日本語版になります。
Bootstrap5 Drupal Theme 今回インストールし使用するBootstrap5のDrupal公式サイトに掲載されたページになります。
現在、Versionは4.03で私がインストールしたDrupal 11.0.4で問題なく動作しています。
Bootstrap5 4.0.3 リリースノート
早速、インストールします。
Bootstrap5 Themeをインストールする.
Bootstrap5のインストールはComposerで行います。
// 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がインストールされてデフォルトテーマになります。
サブテーマの設定.
Bootstrap5は標準で、サブテーマの作成機能がありますので、サブテーマを作成しデフォルトに設定します。
Drupal管理画面にて
テーマ > Bootstrap5 > を選択
設定画面下部のアコーディオンメニューに
SubThemeの項があるので、そこを選択し、以下の3項目を設定しボタンを押すとサブテーマが出来上がります。
Create subtheme.
- Subtheme location > themes/custom
- Subtheme name > B5 subtheme
- Subtheme machine name > b5subtheme
ボタンを押すと、サブテーマがアンインストールに出来上がります。
サブテーマを選択し、を選択すると、サブテーマでの運営となります。
Bootstrap5テーマの初期設定.
サブテーマの設定が完了したのでBootstrap5の初期設定をします。
構成図を書いた方が解り易いので、記事を分けて解説します。
Next article.
Bootstrap5のインストールとサブテーマの設定が完了しましたので、次項で、Bootstrap5の基本設定をします。
投稿日
2024-10-01
投稿者
S.Takeda
