割とお手軽なCSSカスタマイズ

このページは書きかけです。後日、加筆修正があります。

見た目のちょっとしたカスタマイズ

Drupalの見た目を変えるためにはデザインテーマを交換するのが一番簡単な方法です。 しかし、デザインテーマもそれぞれ個性がありちょっとしたところがお気に召さない･･･なんて事はよくあることです。 表示される物や順序などの変更はデザインテーマそのものをカスタマイズしなければ出来ませんが、文字の装飾や文字の大きさ、背景色といった程度のことはデザインテーマに含まれているCSSファイルをカスタマイズすることで変更できることが多い物です。 Dreamweaverを使って割とお手軽にCSSファイルをカスタマイズしよう。

まずは、カスタマイズするための素材を用意しましょう。 ベースにしたいデザインテーマを探して、Drupalに組み込みます。 そして、組み込んだデザインテーマを反映させましょう。もちろん、サイト全体に反映させず、自分だけ表示を変更してもよいのです。 デザインテーマを反映させたら、ブラウザからソースを表示します。IEの場合はマウス右クリックで「ソースの表示」を選べばメモ帳が起動してソースを表示してくれます。このソースというのはHTMLファイルのことです。 次は、ソースを保存しましょう。メモ帳の「ファイル」→「名前を付けて保存」を選んで、作業したいフォルダーに保存してください。ファイル名は中身が判別できればよいので、お好みで。保存が終われば、メモ帳は閉じても大丈夫です。 次はいよいよ、Dreamweaverで保存したファイルを開いてください。なんだか、色も素っ気もない、物が表示されましたね。これはソースファイルはただの骨組みだけで、装飾や、色の指定の大部分はCSSファイルで指定しているからなんです。 保存したHTMLを開いただけではこのCSSファイルが正しく認識されてない状態なので素っ気ない表示に成っているのです。 では、CSSファイルを正しく認識されるようにしましょう。 Drupalの4.6.xバージョンまではCSSファイルのある場所を「theme」フォルダから記述していたので、保存したHTMLファイルの下にthemeというフォルダを作って、その中に、カスタマイズしたいテーマファイルをフォルダ毎おいてあげれば認識されましたが、4.7.xからは「/」から記述するように仕様が変わってしまったので、HTMLの位置とは関係なく、トップからの位置と言うことになってしまいました。 HTMLファイルの文頭のどこかにデザインテーマのCSSファイルの位置を記述している部分がありますので探します。

style type="text/css" media="all">@import "/themes/(デザインテーマのフォルダ名)/style.css";</style> を探してください。この例だと、HTMLのファイルを保存したドライブのトップに「theme」というフォルダを作ってその中にデザインテーマをフォルダ毎おけば反映されるのではないかな？(御免なさい、試してません)。駄目だったら、HTMLのおいてあるフォルダに「theme」フォルダを作って、その中にデザインテーマをフォルダ毎おいて、HTMLファイル中のCSSの位置を記述している部分の先頭の「/」をとってあげると反映されると思います。 他にも、Drupalがデフォルトで使う「drupal.css」というファイルもあります。これも同様に準備すると、サイト上での表示をより再現できます。モジュールの導入状況によってはモジュールのみが使うCSSも登録されていたりしますが、お好みによって同様に準備してください。 Dreamweaverの画面がカラフルになったでしょうか？CSSが反映されたのを確認したら一度保存しておくことをおすすめします。 画面上で、クリックした場所のタグのネスト状態をデザインウィンドウの下のバーに表示してくれますから、それを手がかりにCSSのどこが反映しているのかを探します。id=やclass=の後に"･･･"でくくられた部分がCSSファイル中にあることを探しましょう。DreamweaverMX2004からは[CTRL]+[F12]でHTMLに関連しているCSSファイルを編集できるように成りましたから、編集したいCSSファイルを開いてください。おすすめはお目当てのCSSファイルが開かれたら、CSS編集を一度終了して、開かれたCSSファイルを表示してメニューの「編集」→「検索/置換」から、"･･･"の･･･の部分で検索をかけて探す方法がお手軽です。お目当ての場所を見つけたら直接変更を加えるか、右側のウィンドウから右クリックで「編集」を選び、設定のダイアログで変更を加えます。 変更が終わったら、HTMLに戻れば変更箇所が反映されているはずです。 CSSはネストが可能です。1カ所を変更しただけでは思い通りの変更にならない事もよくあります。また、その逆に1カ所の変更が他に影響を与えてしまうこともあります。 デザインウィンドウの下のステータスバーでネストの状態を見ながら、他の場所を変更してみてください。 最初に用意したHTMLファイルを別なページでもHTMLを作って、表示させてみると影響を確認できます。 カスタマイズが終わったら、サーバー上のデザインテーマのCSSを入れ替えれば完成です。 デザインテーマのフォルダ名を変更してサーバーに別なデザインテーマとしてアップロードする方法もあります。

割とお手軽な･･･とか言った割には、結構大変な作業です。しかし、０(ゼロ)からデザインテーマを作るのはもっと大変なことです。デザインテーマの作者さんにも感謝の心を忘れないで使わせていただきましょうね。

このページは書きかけです。後日、加筆修正があります。