テーマを Bootstrap5 に変更する

2024年10月12日
Drupal

◇はじめに

暫くテーマ FlexiStyle Bootstrap を使ってみて、少しだけ気になることがある。

一つはヘッダー（赤四角囲み）の高さ。下左画像のとおり、スマホだと画面の 1/4 程度を占めていて無駄。CSS を弄れば低くすることも可能だとは思うけれど具体的な方法は知らない。ちなみに PC 画面では全く気にならない。

もう一つは下右画像のような、バーガーメニューを展開したときの項目表示切れ。このサイトだと「設定」の途中から項目が隠れていて表示されない。画面をスワイプして最後尾まで表示するとすべての項目が出てくるけれど、何だかなぁ。

スマホ画像

・・・そんなこんなでテーマを変更することにした。
 

◇テーマ比較

引き続き Bootstrap のテーマを探してみた。自分であれこれカスタマイズしたいとは思わないけれど、少しは style.css を書き換えないとダメかな。Drupal 11 に対応している Bootstrap のテーマ（インストール数の多い順５つ）は次のとおり。

  1. Barrio Bootstrap 5 Theme
    サイドバーありの場合、横長のコードブロックを表示するとサイドバー内のブロックが上（または下）に移動してしまい、レイアウトが崩れる。
  2. DXPR Theme
    Drupal 11 に対応している安定版は未だない。
  3. Bootstrap 5
    UI で設定できる項目が少ない。
    メインナビゲーションは固定されていない。
  4. Tara
    テーマカラーなど変更したい項目が有料版しか対応していない。
  5. Bootstrap
    Barrio Bootstrap と同じくレイアウト崩れが生じる。

FlexiStyle Bootstrap のインストール数は少ないものの、使い勝手の良いテーマだと思う。しかし、気になってしまったから致し方ない。
なので結局のところ、style.css を少しは書き換えることを許容して Bootstrap 5 を採用してみた。

 

◇style.css の編集

テーマをインストールして、custom/b5subtheme/css/style.css を編集する。
編集を終えたらキャッシュのクリアを忘れずに。
 

画像下に余白を設ける

記事を表示したときの、アイキャッチ画像と本文の間に空白を入れる。併せて max-width を 100% にしてレイアウトが崩れないようにする。

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  margin-bottom: 30px; /* ここで余白を指定する */
}

 

サイトブランディングを左端から離す

サイトロゴが左端にくっついているのはイヤなので少し空白を設定する。

.region-nav-branding,
.region-nav-additional {
  flex-shrink: 0;
  padding: 0 1% 0 1%; /*追加*/
}

 

パンくずリストの背景にグラデーションを設定する

真っ白のままだと味気ないからちょっとしたアクセント。併せて文字を左端から少し離す。

.breadcrumb {
  --bs-breadcrumb-padding-x: 2%; /*変更*/
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(215, 215, 215, 1));  /*グラデーション追加*/
  border-radius: var(--bs-breadcrumb-border-radius);   
}

 

サイトブランディングのフォントを変更する

bold から normal に変更する。

.navbar-brand .site-title {
  font-size: 2.0rem; /*少し大きくしてみる*/
  font-weight: normal; /*bold から変更*/
  letter-spacing: 2px;
  text-transform: uppercase;
}

 

記事の左側、サイドバーの右側、記事とサイドバー間の余白を広げる

端にくっついているのは気持ち悪いから余白を設定する。記事とサイドバーの間も少し広げる。

.region-sidebar-first,
.region-footer {
  padding: 0 0.5rem;
} 
  
.region-content {
  padding: 0 2% 0 2%; 
} 
  
.region-sidebar-second {
  padding: 0 4% 0 2%;
}

 

サイドバーの各ブロックに影を付ける

今と同じように影を付けてみた。併せてブロック間に余白を入れてみた。

.region-sidebar-second .block{ 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ブロックに影を追加 */
  margin-bottom: 30px; /* ブロック間の下にスペースを追加 */
  padding: 10px 10px;
}

 

フッターの文字を中央にする

左端のままでもいいけれど。
複雑なレイアウトが必要になったらカスタムブロックを作って追加すればいいや。

footer .region-footer {
  display: flex;
  flex-direction: column;
  text-align: center; /*追加*/
}

 

見出し文字サイズの変更

全体的に少し小さくする。

h1, .h1 {
  font-size: calc(1.3rem + 1.5vw);
} 
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.2rem;
  }
} 

h2, .h2 {
  font-size: calc(1.285rem + 0.42vw);
}
@media (min-width: 1200px) {
  h2 {
    font-size: 1.6rem;
  }
}

h3, .h3 {
  font-size: calc(1.265rem + 0.18vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.4rem;
  }
}

h4, .h4 {
  font-size: calc(1.265rem + 0.18vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.3rem;
  }
}

h5, .h5 {
  font-size: 1.2rem;
}

h6, .form-wrapper.accordion .accordion-item h2, .form-wrapper.accordion .accordion-item .h2, .h6 {
  font-size: 1.1rem;
}

 

◇おわりに

特殊なモジュールを使っていなければテーマの変更は容易。
有料テーマも気になるけれど当分は今のままでいいや。