備忘録８

7/1

今日は、DrupalのテーマのCSSを使ってタイトルの色を変更する作業を行った。

まず最初に、ブラウザの「検証」機能を使い、対象となるタイトル部分（h1.page-title）を特定した。検証画面では実際に色を変更して確認できたが、この変更は一時的なものであり、保存されないことに注意が必要だった。

その後、実際のCSSファイルを編集するためにVirtualminのファイルマネージャーからテーマフォルダを開いた。しかし、どのCSSファイルを編集すればいいのか分からず、baseフォルダやcomponentsフォルダなど複数のCSSを確認する必要があった。この過程で、テーマによってCSSの構造が異なり、どのファイルが反映されているか分かりにくい点が難しかった。

最初は以下のように書いたが、色は反映されなかった。

CSS

.node-19 h1.page-title {

color: #00e0ff;

}

この原因は、テーマ側のCSSのほうが優先度（強さ）が高く、書いたCSSが上書きされてしまっていたためである。

最終的に、セレクタを強くし、さらに !important を付けることで解決した。

CSS

html body h1.page-title {

color: #00e5ff !important;

}

CSSでは「どのスタイルが適用されるか」は
①後から書かれたもの
②より具体的な指定
③!important
によって決まることが分かった。

また、変更が反映されない原因として「キャッシュ」もあった。CSSを保存してもすぐに変わらない場合は、ブラウザの更新（Ctrl + F5）やDrupalのキャッシュクリアが必要だった。

色については、最初は水色系を使用したが、明るすぎると見づらいと感じたため、最終的に少し落ち着いた色（#00e5ff）に調整した。また、text-shadowを使うことで見た目を少し良くできることもわかった。

今回の作業を通して、単にCSSを書くのではなく、「どのCSSが有効か」「なぜ反映されないのか」を考えることが重要だと感じた。

また、CSSファイルを直接編集していたが、後からDXPR Themeの設定画面内に「Custom CSS & JS」があることを発見した。

この機能を利用すると、ファイルマネージャーでCSSファイルを探して編集しなくても、管理画面から直接CSSを追加できるため非常に便利だった。

例えば以下のCSSを入力するだけでページタイトルの色を変更できた。

一方で、特定ページのみ変更しようとして

CSS

.node-19 h1.page-title

を使用したが反映されなかったため、テーマによっては想定どおりのクラス名が付与されていない場合があることも学んだ。

また、記事本文内の特定の文字だけを装飾する方法についても学んだ。

当初はCSSだけで「APEX」という文字列のみ色を変更できると考えていたが、CSSは文章中の特定の単語を直接指定することはできないことが分かった。そのため、HTML内で対象の文字にクラスを付与し、そのクラスに対してCSSを適用する方法を利用した。

この方法によって、「APEX」という文字だけ色や装飾を変更することができた。初めはCSSの記述ミスにより反映されなかったが、コード内に誤って不要な数字が入っていたことが原因だった。CSSはわずかな記述ミスでも正常に動作しないため、入力内容をよく確認することの重要性を実感した。

今回の作業を通して、HTMLとCSSを組み合わせることでページ内の特定の部分だけを細かく装飾できることが分かった。今後はゲームタイトルや重要なキーワードなど、目立たせたい文字にクラスを設定し、CSSを活用してサイト全体のデザイン性や見やすさを向上させていきたい。