Drupalといえば、Drupal 8以降Symfonyをもとに生まれ変わり、デザインもTwigファイルを修正するという比較的分かりやすくカスタマイズが出来る本当に可能性の塊のようなCMS（コンテンツマネジメントシステム）と言えるでしょう。

そのような作りとなっているのでテーマの導入、またテーマのカスタマイズも容易です。

容易なのですが、そこで「Bootstrap」を導入すると少し、いやかなり？意味が変わってきます。なぜなら、「Bootstrap」はWebアプリケーションフレームワークという位置付けであり、なんだかCSSの限界へ挑んでいるような作りとなっているからです。

Drupalだと、デザインをカスタマイズするのにTwigファイルをいじってやれば良いのですが、「Bootstrap」を導入すると、そのカスタマイズも「Bootstrap」のタグやクラスを書き込んでやるだけで、後は「Bootstrap」が何とかしてくれる、そんな感じでしょうか。

さすが、元Twitter社の何とかさん達が原型を作り、改良され続けられているだけはありますね。

Drupal、Twig、Bootstrap、これらを使いこなせれば素晴らしいサイトが出来るのでしょうね。夢は広がります。

ということで、テーマ「Bootstrap」をインストールしていきたいと思います。

いつものようにDrupalの公式ページにアクセスし、テーマ検索ページを開きます。

https://www.drupal.org/project/project_theme

次の図のように、「Bootstrap5」と入力して検索します。

テーマ「Bootstrap5」のページでDrupalへのインストール方法を確認します。

https://www.drupal.org/project/bootstrap5

この記事の時点での最新安定版はVersion1.1.3なのでComposerを使いインストールします。

$ composer require 'drupal/bootstrap5:^1.1'

Drupal管理メニューの「テーマ」から「Bootstrap5 1.1.3」をインストールします。

インストールした「Bootstrap5 1.1.3」の設定を開き、「Subtheme」を開きます。

場所や名前の指定を行い、「作成」ボタンをクリックして「Bootstrap5 1.1.3」の分身を作ります。テーマのカスタムはこの分身に行います。それにより、本体の更新があった時にスムーズに移行出来るらしいです。以前は、yamlファイルを作成して、それをテーマにインストールして等をやらなければならなかったようですが、ワンクリックで出来るようになりました。

Drupal管理メニューの「テーマ」から「B5 subtheme」（上記で指定した名前）を「インストールしてデフォルトに設定」します。

ここで、バグなのか何なのかテーマの用意している変数に必要な値が入っていないため（正確には、b5_top_containerキーにcontainerが入っていない）、CSSで指定してもページに反映されません。

これを何故か解消出来る方法が、以下の設定を一度行うことです。一度、設定を行えば設定を戻しても問題ないです。

Drupal管理メニューの「テーマ」から「B5 subtheme」の「設定」を開き、上図の「Navbar options」や「Footer options」の設定を変更します。モノトーン好きなので、両方「dark」に設定します。

本格的なカスタマイズはいずれ行うとして、今回は気になる部分のCSS設定をいじります。具体的には以下のように変更しました。

<h1>から<h6>までのタグに対するCSSの設定を変更します。

h1, .h1 {
  color: #666;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  color: white;
  font-size: calc(1.285rem + 0.42vw);
  font-weight: normal;
  background-color: #557697;
  padding: 5px 0 5px 10px;
}
h2 > a {
  color: white;
}
@media (min-width: 1200px) {
  h2 {
    font-size: 1.6rem;
  }
}

h3, .h3 {
  color: #666;
  font-size: calc(1.265rem + 0.18vw);
  font-weight: normal;
  padding: 5px 0 5px 10px;
  background-color: #f2f2f2;
  border-left: solid 10px #557697;
  border-top: none;
  border-bottom: none;
  border-right: none;
}
h3 > a {
  color: #666;
}
@media (min-width: 1200px) {
  h3 {
    font-size: 1.4rem;
  }
}

h4, .h4 {
  color: #666;
  font-size: calc(1.265rem + 0.18vw);
  padding: 6px 0 4px 10px;
  font-weight: normal;
  border-left: none;
  border-top: 3px solid #557697;
  border-bottom: 3px solid #557697;
}
h4 > a {
  color: #666;
}
@media (min-width: 1200px) {
  h4 {
    font-size: 1.4rem;
  }

h5, .h5 {
  font-size: 1.2rem;
  padding: 5px 0 3px 5px;
  border-bottom: none;
  border-left: 8px solid #557697;
  font-weight: normal;
}

h6, .h6 {
  font-size: 1.1rem;
  padding: 5px 0 3px 10px;
  border-bottom: dotted 1px #cacaca;
  font-weight: normal;
}

各ブログ記事のページタイトルが大きすぎるので、小さくします。

.display-4 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 2.5rem;
  }
}

小さくしましたが、だいたいページタイトル自体必要ない気がするので、Drupalの管理メニューの「サイト構築」にある「ブロックレイアウト」の「Page title」を「無効」にします。

すっきりしました。問題があれば、また考えましょう。

次に、コードを書いたりするスペースが見た目分かりにくいので、背景色等をつけて少し見栄えを上げてみます。sampタグの時装飾されるようにします。いずれ、コピペボタンが付いてる例のアレをどうにかしたいです。

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 0.9rem;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
  text-align: left;
  background-color: #fbfaf9;
  color: #333;
}

samp {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;   white-space: pre;
  overflow: auto;
  word-wrap: normal;
  border: 1px solid #CCC;
  border-radius: 2px;
  box-shadow: inset 0 0 .5rem #CCC;
  padding: .7rem 1rem;
  line-height: 0.7rem;
}

最後に、トップページのロゴが「Bootstrap」のものになっているので自分用のロゴに変更します。

自作ロゴをサイトにアップロードし、Drupal管理メニューの「テーマ」にある「設定」タブを開き、「B5 subtheme」タブの「ロゴ画像」ブロックにある「Use the logo supplied by the theme」のチェックを外し、自作ロゴをアップロードした場所へのパスを入力します。

これで、インストール直後の画面よりはだいぶマシになったような気がします！ヘッダー、フッターが黒すぎる件は、また考えることにします。

今回は、「Bootstrap」をDrupalサイトに導入してみました。「Bootstrap」は「sass」などを使いこなしてこそだと思うので、少しずつ勉強していきたいと思います。

次回は、Drupalの便利モジュールをいくつか導入、紹介出来ればと思います。