Bootstrap5.

この記事は、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については別の記事で書いて行きます。

|- [1] B5 subtheme (デフォルトテーマ)
|- [2]設定
|
|- [3]ホーム / 管理 / テーマ / テーマの設定
|- [4]共通の設定 / Claro / Olivero / Bootstrap5 / B5 subtheme
|
|---- [4-1]ページ要素の表示
|---- [4-1-1]投稿でのユーザーアバター // チェックを選択
|---- [4-1-2]コメントでのユーザーアバター // チェックを選択
|---- [4-1-3]コメントの承認状況 // チェックを選択
|---- [4-1-4]ショートカットアイコン // チェックを選択
// 全てのチェックを選択
|
|---- [4-2]ロゴ画像
// テーマが提供するロゴを使用 // チェックを選択
|
|---- [4-3]お気に入りアイコン
// ショートカットアイコンまたはお気に入りアイコンは、殆どのブラウザでアドレスバーとブックマークに表示されます。
// テーマが提供するお気に入りアイコンを使用 // チェックを選択
|
|---- [4-4]Style guide
// Style guide demonstrates abilities of bootstrap framework. Style guide is now part of bootstrap tools module. Install and enable to the module to enhance content editor and developer workflows.
|
|---- [4-5]Body options
// Combination of theme/background colour may affect background colour/text colour contrast. To fix any contrast issues, override corresponding variables in scss file: [bootstrap 5 theme]/dist/bootstrap/[version]/scss/_variables.scss Website container type
|
// Type of top level container: fluid (eg edge to edge) or fixed width
|
// Website container type configuration
|
|---- [4-5-1]Body theme:以下より選択
|---- [a.]Do not apply theme // 設定なしを選択
|---- [b.]Light
|---- [c.]dark
|
|---- [4-5-2]Body background:
|---- [a.]Do not apply color // 設定なしを選択
|---- [b.]Secondry
|---- [c.]Light
|---- [d.]Dark
|
|
|---- [4-6]Navbar options
|
|---- [4-6-1]Navbar theme:
|---- [a.]Light // Lightを選択
-----省略 Darkなど上記同様の為-----
|
|---- [4-6-2]Navbar background:
|---- [a.]Lightt // Lightを選択
-----省略 Darkなど上記同様の為-----
|
|
|---- [4-7]Footer options
|
|---- [4-7-1]Footer theme:
|---- [a.]Lightt // Lightを選択
-----省略 Darkなど上記同様の為-----
|
|---- [4-7-2]Footer background:
|---- [a.]Lightt // Lightを選択
-----省略 Darkなど上記同様の為-----
|
|
|---- [4-8]Text formats and CKEditor
// Configuration for text formats and editors.
|
|
|---- [4-9]Subtheme
|
|
|- [5]構成を保存 // 設定を決めたら構成を保存
 

初期設定なので、ページや記事をサンプルで作成し、どのような見栄えかを確認しながら設定しています。仮設定の状況なのでアイコンや、ファビコンはそのままにしていて、ページの構成が決まったら、正式なものに変更して行きます。

色や、CKEditorで使えるタグ類のスタイルは、SCSSで変更出来ますが、とりあえずは、デフォルト状態で、WEBサイトを構築して、その上で、変更していければと考えています。

まだ、ローカルで構築している段階なので、公開前の制作を記事にしています。実際の公開になった場合、記事の内容と異なってくる箇所が出てきますが、ご了承ください。

Amazon Lightsail

次項では、ホスティングサービスとして使用しているAWSのLightsailについての話をまとめていきます。