テーマを FlexiStyle Bootstrap に変更する

2024年9月22日
Drupal

Drupal 11 が公開されているものの、自鯖は module の関係でアップデートができない。
なので、設定を見直して更新が遅くなりそうな module は削除することにした。
削除対象は次の4つ。

  1. Blocache
  2. CSS Editor
  3. @fontyourface
  4. Entity Pager

1 は訪問者の IP アドレスのバージョンを確認・表示するために使用していた。IPIv6 で接続できることは判ったから、ブロック毎のキャッシュ無効化は諦めた。何なら別に確認専用サーバーを立てて表示すればいいや。

2 は何かと便利だと思っていたカスタム CSS で使用する。テーマの css ファイルを直接触らなくても見た目を少しは変更できるテーマを選定したいから、今回は、同様の機能がテーマに包括されているものを選択してみた。

3 はフォントにこだわらなければ不要。最小限の変更はテーマ設定で可能なものを選択してみた。

4 は記事本文を表示しているときの下部に「前の記事」「次の記事」を表示するもの。こちらはバッサリ削除して、本文下に同じコンテンツタイプをカード表示することにした。

ということで、今回はいくつかある Bootstrap を使用しているテーマのうち、FlexiStyle Bootstrap を採用してみた。
細かな設定は次のとおり。

 

◇記事のトップ画像の下に空白行と水平線を入れる

初期状態だとトップ画像と本文の間がくっついているから調整した。具体的には管理画面の「テーマ」＞「テーマの設定」画面の「グローバル」の「Global Style」のところで、次のとおり画像の下に余白を設定している。併せて、インライン画像が本文の領域内に収まるように設定している。
ただし、ティーザーで表示するときも余白がでるから見栄えは試行錯誤してみた。

img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* ここで余白を指定します。単位はpx, %, emなど */
}

 

◇関連記事の代替手段

記事を表示している画面の下に、ビューで記事と同じコンテンツタイプのブロックを追加して、レスポンシブグッドで表示する。追加するブロックは、例えばこのサイトのグローバルナビで「Drupal」をクリックしたときのページと同じようなもの。
ブロックレイアウトに先程追加したブロックを記事本文の下に配置する。
コンテンツタイプの種類だけ配置するので、閲覧制限でコンテンツタイプを記事本文と同じものに制限する。

 

◇記事本文と関連記事の間に水平線を入れる

管理画面の「コンテンツ」＞「コンテンツブロックの追加」から新規に水平線と空白行のブロックを作成して、関連記事の上に配置する。
このブロックは全ての記事（コンテンツタイプ）で表示する。

 

◇記事のレイアウトの設定

 管理画面の「サイト構築」＞「コンテンツタイプ」から、対象のコンテンツタイプの画像、投稿日などの表示順を細かく設定する。お好みでどうぞ。

 

以上で基本的なテーマの移行は完了。
不要となった module はターミナルから composer remove で完全に 削除した。
ロゴや外観の詳細を変更して今の状態になっている。