記事内容
サイトカラーやテキストやリンクのカラーなど基本設定を行います。
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については別の記事で書いて行きます。
Bootstrap5 Default Settings.
前項で、Bootstrap5のサブテーマの設定が完了したので、当記事で、Bootstrap5の基本設定 > Themeの基本設定を行います。作業は大した作業ではないのですが、Drupal管理画面の構成から機能説明をすると解り易いので、構成図で説明します。
Bootstrap5のテーマで設定する項目は
- サイトのカラー
- カラーに合わせたテキストやリンクのカラー
- ナビゲーションメニューを含めたヘッダーやフッターのカラー
- タイトルロゴ
- ファビコン
- と最低限の設定になっています。
Basic Structure.
|- [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]構成を保存 // 設定を決めたら構成を保存
上記のような流れになっています。
To Summarise.
- テーマ > Bootstrap5 SubTheme > 設定を選択
- 設定画面 > ページ要素(投稿など)の設定
- 設定画面 > ロゴやアイコンの設定
- 設定画面 > スタイルの設定 > 設定項目なし
- 設定画面 > Bodyの設定 > 背景白なので選択なし
- 設定画面 > ナビバーの設定 > ライトを選択
- 設定画面 > フッターの設定 > ライトを選択
- 設定画面 > テキストエディターの設定 > 設定項目なし
- 設定画面 > サブテーマの設定 > 設定済みなので > 設定項目なし
- 上記設定にて構成を保存
のような設定でテーマの基本設定を済ませます。
初期設定なので、ページや記事をサンプルで作成し、どのような見栄えかを確認しながら設定しています。仮設定の状況なのでアイコンや、ファビコンはそのままにしていて、ページの構成が決まったら、正式なものに変更して行きます。
色や、CKEditorで使えるタグ類のスタイルは、SCSSで変更出来ますが、とりあえずは、デフォルト状態で、WEBサイトを構築して、その上で、変更していければと考えています。
まだ、ローカルで構築している段階なので、公開前の制作を記事にしています。実際の公開になった場合、記事の内容と異なってくる箇所が出てきますが、ご了承ください。
Conclude.
MacBookに構築したDrupalに、デザインテーマのBootstrap5の標準設定が終わり、公開するWEBサイトの準備が整いましたので、次項は、当WEBサイトで、ホスティングサービスとして使用しているAmazon Lightsailについてまとめます。
実際には、Mac上でDrupalの設定やテストページを使い動作検証やデザイン決めなどを行っていますが、公開後以降の記事でまとめた方がわかりやすいので、ホスティングサービスの選定と準備を行い実際に使用しているAWSのLightsailの記事をまとめて行きます。
Next article.
Amazon Lightsail
次項では、ホスティングサービスとして使用しているAWSのLightsailについての話をまとめていきます。
投稿日
2024-10-02
投稿者
S.Takeda
