６月17日(水)

今回の作業で分かったことは、Custom CSSを使うときは、どこに何を書くのかを明確に分ける必要があるということ。CSSはVaniテーマ設定のCustom CSS Codes欄に入れる。HTMLは記事本文やプロフィール用HTMLファイルに入れる。JavaScriptはCustom CSS Codes欄に入れても動かない。CSS、HTML、JavaScriptを同じ場所に入れてしまうと、画面にコードがそのまま表示されたり、動くはずの機能が動かなかったりする。

・Custom CSSを反映させるときは、Enable custom cssにチェックを入れることを忘れてはいけない。CSSを正しく書いても、このチェックが外れていると反映されない。また、保存した後にDrupalのキャッシュをクリアする必要がある。CSSを変更したのに画面が変わらない場合は、コードのミスだけを疑うのではなく、キャッシュが残っている可能性を確認する。さらに、ブラウザ側のキャッシュも残ることがあるため、強制再読み込みも行う。

・CSSを追加するときは、既存のCSSを消さずに、まず一番下に追加する方が安全である。CSSは後に書いたものが優先されやすいため、修正用のCSSは一番下に書くと効果を確認しやすい。反対に、途中に入れると、どのCSSが効いているのか分かりにくくなる。大きく変更する前には、必ず現在のCSSをメモ帳などにコピーしてバックアップしておく必要がある。

＜見出しに関して＞

・見出しの背景に青や緑を使う場合、文字色も青のままだと見えにくい。見出しは白文字にして、影を付けると読みやすくなる。

＜検索欄が出てくる誤作動＞

・Custom CSSで検索欄がかってに出てくる誤作動が発生した。消すにはフォーム全体、ボタン、ラッパー要素のクラス名をまとめて指定する必要がある。

＜クイズに関して＞

・クイズを実装するために記事本文にHTMLを入れた。そのときFull HTMLを選ぶだけでは不十分な場合がある。本文エディタの通常画面にHTMLを貼ると、タグが実行されずに文字として表示されることがある。その場合は、ソース編集モードに切り替えてから貼り付ける必要がある。もし画面にdivやh2などのタグがそのまま表示された場合は、CSSの問題ではなく、HTMLが文字として保存されていることに注意。

・HTMLを貼るときは、preタグやcodeタグの中に入れないように注意する。これらのタグの中にHTMLを入れると、ブラウザはHTMLを実行せず、コードとして表示する。クイズの実装でタグがそのまま表示された原因も、HTMLが実行される状態になっていなかったことにある。HTMLを動かしたい場合は、ソース編集モードで、余計なcodeやpreに囲まれていないか確認する必要がある。

・CSSだけで作るクイズでは、選択肢を押したときに正解や不正解を表示することはできる。しかし、合計点を自動で計算することはできない。点数計算、ランダム抽選、おみくじ、ルーレットのような機能にはJavaScriptが必要。読者が操作して楽しむ機能を作る場合は、CSSだけでできることと、JavaScriptが必要なことを最初に分けて考える必要がある。

＜プロフィール＞

プロフィールページのCSSは、サイト全体のCustom CSSとは分けて考える必要がある。プロフィール専用CSSにbodyやtableの指定を書くと、そのページだけを自由にデザインできる。一方で、同じCSSをDrupal全体のCustom CSSに入れると、他の記事ページや一覧ページにも影響してしまう。bodyやtableのような広い範囲に効くCSSを書くときは、それがサイト全体に効いても問題ないか確認する必要がある。