テーマのCSSカスタマイズとモジュール検証

今回の授業では、DrupalテーマのCSSをカスタマイズする方法について学んだ。ブラウザの「検証」機能を利用して、ページ内の要素に適用されているCSSを確認しながら、色やフォント、余白などを変更する方法を勉強した。また、CSSを編集する前にキャッシュをクリアし、変更内容をすぐに確認できる環境を整えることの重要性も理解した。

 今回の演習では、ブラウザの「検証」機能を利用してCSSの適用箇所を確認しながらデザインの調整を行った。これまではAIから提案されたCSSをそのまま利用することが多かったが、今回は自分で変更箇所を修正する方法を学び、CSSの仕組みへの理解を深めることができた。

今回変更した主な内容は以下の通りである。

- ホームページの背景色と余白を調整した。
- ボタンの色や角丸を変更し、押しやすいデザインにした。
- カードレイアウトの余白や枠線を調整し、見やすく改善した。
- メニューや見出しの文字サイズを確認し、サイト全体のバランスを調整した。

また、サイトの機能を充実させるために複数のモジュールを導入し、それぞれの特徴や利用方法について検証を行った。

1. Webform

Webformモジュールを利用して「Feedback」フォームを作成し、アドバイスを集めるができることを確認した。プログラムを書かなくてもフォームを作成できるため便利だと感じた。

一方で、フォームを作成しただけではサイト上には表示されず、ページやメニューへ追加する設定が必要であることが分かった。モジュールは導入するだけではなく、実際に利用できるよう設定することが重要だと学んだ。

2.Font Awesome

Font Awesomeモジュールを導入し、サイト内でアイコンを利用するための設定を行った。アイコンを利用することで、メニューやボタンがより分かりやすくなり、サイト全体のデザイン性も向上すると感じた。

一方で、本文中ではアイコンが正しく表示されず、HTMLタグやテキストフォーマットの制限が影響している可能性があることが分かった。