備忘録

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

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

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

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

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

1. Webform

今回の授業では、主にモジュールの検証をしました。

①Metatag

1. モジュール概要

Metatagモジュールは、Webページごとのタイトルや説明文などのメタ情報を設定するためのモジュールである。検索エンジンやSNSでページ情報を適切に表示するために利用される。

2. 検証内容

モジュールを有効化した後、サイトの設定画面からMetatagの設定項目を確認した。ページのタイトルや説明文を設定できることを確認し、検索エンジン向けの情報を管理できるモジュールであることが分かった。

見た目に大きな変化はないが、Webサイトを公開する際には重要な機能であると感じた。

②Views Slideshow

1. モジュール概要

Views Slideshowは、DrupalのViews機能と組み合わせて、記事や画像をスライドショー形式で表示できるモジュールである。トップページの最新記事紹介や画像表示などに利用できる。

2. 検証内容

Viewsと組み合わせて利用できることを確認した。スライドショー表示を利用することで、トップページの記事やコンテンツを見やすく表示できると感じた。

今回は、作成したプロフィールページをサーバーへアップロードし、自分のWebサイトから閲覧できるように設定しました。

また、メニューからプロフィールページへ移動できるように設定し、Drupalで作成したページ以外にも、自分で作成したHTMLページを公開できることを確認しました。

今後もサイト全体の構成を意識しながら、もっとHTMLページを作って内容を充実させていきたいと思います。

今回は、前回作成したprofile.htmlにCSSを追加して、プロフィールページを装飾する方法を学びました。

HTMLでは、tableタグに画像を追加したり、thタグに scope="row" を加えたりして、より正しい形のマークアップに近づけました。

CSSでは、背景色や文字、表の見た目を変更できることを学びました。少しCSSを加えるだけで、同じHTMLでもページの印象が大きく変わることが分かりました。

今回はまだ基本的な装飾だけですが、今後は自分のPomodoro Timerサイトの雰囲気に合わせて、より統一感のあるデザインにしていきたいです。

今回はHTMLの基本構造について学びました。

テキストエディタを使って profile.html を作成し、HTMLファイルの書き方やブラウザでの確認方法を学びました。また、tableタグを使ったプロフィール表の作成方法についても理解しました。

Drupalでは普段管理画面からページを作成していますが、今回の授業を通してWebページがHTMLで構成されていることを改めて確認できました。

まだタグの種類や使い方を十分に覚えられていないため、実際にプロフィールページを作成しながら復習していきたいと思います。