メインコンテンツに移動

Music Garage

ジャンルごとに曲やアーティストをご紹介!

今回は、Drupalで使用しているテーマをCSSでカスタマイズする方法を学んだ。HTMLやCSSでWebページを作成するときと同じように、DrupalのテーマもCSSを編集することで、文字の色や大きさ、余白などのデザインを自由に変更できることが分かった。

Chromeの「検証」機能を使うことで、変更したい部分のHTMLやCSSを確認できた。変更したい場所を右クリックして「検証」を選択すると、その要素に適用されているCSSが表示されるため、どのセレクタを編集すればよいのかが分かりやすかった。

また、色やフォントサイズなどをその場で変更できるため、完成後のイメージを確認しながら編集できる点が便利だった。ただし、この変更はブラウザ上だけの一時的なものであり、実際にはサーバー上のCSSファイルを書き換えないと保存されないことも学んだ。

今回の演習では、テーマをそのまま使うのではなく、自分好みにデザインを変更する方法を学ぶことができた。最初は、どのCSSがデザインに影響しているのか分からず戸惑った。しかし、「検証」機能を使うことで対象となるセレクタを簡単に見つけられるようになり、少しずつ編集方法を理解できた。また、CSSを書き換えてもすぐに反映されないことがあり、キャッシュを削除することの重要性を実感した。

タグ