テーマのスタイルシートをカスタマイズ [D7]

テーマのカスタマイズイメージ Drupalのデザインカスタマイズでもっとも簡単なのは、スタイルシートによるカスタマイズです。簡単とは言っても標準的なデザインのサイトであればこれだけで対応可能なほどの柔軟性があります。

Drupal

Drupalのデフォルトテーマをカスタマイズ

Drupal7にはいくつかのテーマが付属しています。このうち「Bartik」というデフォルトのテーマを使ってカスタマイズの手順を説明します。

参考：Bartikのドキュメント

実際のプロジェクトでBartikをカスタマイズして使用することはあまりないでしょう。特徴的なデザインであるため他への流用は難しいからです。Drupal.orgではサードパーティーによる多数のテーマをダウンロードして利用できますが、このうちのいくつかはデザインカスタマイズのベーステーマとして設計されています。たとえばzen（http://www.drupal.org/project/zen）などのテーマを使えば、プレーンな状態から独自のデザインを構築することができます。

テーマBartikはDrupalをインストールしたフォルダの、themes/bartik に格納されています。その内容は次のようになっています。

bartik.infoはテーマの基本的な情報を記述したファイルです。
cssフォルダにはスタイルシートが、imagesフォルダには画像が、それぞれ格納されています。
templatesフォルダにはテンプレートファイルが格納されています。
template.phpはテーマ関数などのPHPプログラムを記述したファイルです。

Bartikテーマをカスタマイズするとき、いきなりbartikフォルダ内のファイルを編集してはいけません。それでもカスタマイズはできますが、BartikはDrupalコアに付属するテーマですので、Drupalをアップデートするとカスタマイズした内容は上書きされ消えてしまいます。
Bartikに限らずDrupalで既存のテーマをベースにしてカスタマイズするためには、そのテーマの「サブテーマ」をつくる必要があります。

Bartikのサブテーマをつくる

Drupalのコアテーマはthemes フォルダに格納されていますが、独自にカスタマイズしたテーマはsites/all/themes フォルダに格納することになっています。ここでは「my_theme」という名前のテーマをつくることにしましょう。sites/all/themes にmy_themeというフォルダをつくってください。
テーマの名前に日本語は使えません。英子文字で始まり、英子文字・数字・アンダースコアのみを含む必要があります。

まず必要なのはテーマの情報を記述した「テーマ名.info」ファイルです。themes/bartik にあるbartik.info ファイルをsites/all/themes/my_theme にコピーして、my_theme.info という名前に変えてください。

次にテキストエディタでmy_theme.info ファイルを次のように編集します。

name = My theme
description = My sub theme which depends on core Bartik theme.
core = 7.x
base theme = bartik

stylesheets[all][] = css/style.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

name は管理画面に表示されるテーマ名です。
descriptionは同じくテーマの説明文です。
coreはテーマが対応しているDrupalのバージョンを記述します。
base themeはベースとなるテーマの名前です。
stylesheetsにはテーマで読み込むスタイルシートのファイル名を指定します。親テーマで使われているスタイルシートはすべてサブテーマにも継承されますが、それでも最低一つのスタイルシートを記述する必要があります。
regionsはページのリージョン（ヘッダ、サイドバーなど、ページを構成する領域）の定義です。親から継承されないため親と同じ定義をコピーしておく必要があります。
settingsはテーマの設定のデフォルト値です。これも継承されないため、親と同じ内容をコピーしておきます。

その他の必要なファイルをthemes/bartik から sites/all/themes/my_theme へコピーします。

cssフォルダのstyle.css と style_rtl.css（my_theme.infoで指定したスタイルシート。style_rtl.css は右から左に記述する言語に対応するためのスタイルシートです。）
imagesフォルダとその内容
logo.pngファイル（ロゴ画像、継承されないためにコピーする必要があります。）

以上でサブテーマのセッティングは終わりです。「管理画面|テーマ」（admin/appearance）へアクセスしてください。画面下の方の「Disabled themes」（無効なテーマ）に追加した「My theme」テーマが表示されているはずです。

「Enagel and set default」（有効化してデフォルトに設定）をクリックしてください。My themeテーマがサイトのデフォルトテーマに設定されます。まだなにもカスタマイズしていないので、フロントページを表示するとこれまでのBartikテーマと全く同じ画面になるはずです。
次はスタイルシートを少し変更してみましょう。

参考：Creating a sub-theme

スタイルシートのカスタマイズ

それではmy_theme のsytle.css ファイルを編集してみてください。編集が終わったらadmin/config/development/performance へアクセスして「Clear all caches」（すべてのキャッシュをクリア）をクリックしてDrupalのキャッシュをクリアすれば、スタイルの変更が反映されます。たとえば h1#page-title のfont-sizeを4.0emに変更してみると、H1タイトルの大きさが変わります。
親テーマで指定されたスタイルシートはサブテーマでも読み込まれます。しかしsytle.cssはサブテーマのファイルが使用されるため、親テーマのstyle.cssは読み込まれません。したがってサブテーマのスタイルシートには、親テーマで指定されているすべてのスタイルを再定義しなければなりません。
実際には親テーマにはないスタイルを追加したい、あるいは親テーマの一部のスタイルだけをオーバーライドしたいという場合が多いでしょう。このときにはサブテーマで新しいスタイルシートファイルを追加します。
my_theme.infoファイルに
stylesheets[all][] = css/additional.css
という行を追加してください。またcssフォルダ内にadditional.cssというファイルを作成し、適当なcssを記述してください。
編集を終わってページをリロードすると、追加記述したcssが反映されているのがわかると思います。
このようにサブテーマでは親テーマに対して追加をする形でスタイルシートを記述していきます。親となるテーマを上手に選択すれば、最低限の作業で必要なデザインにカスタマイズすることができるでしょう。

テーマに何らかの変更を加えたときDrupalのキャッシュをクリアするまでページに反映されないことがあります。開発作業中には毎回キャッシュをクリアするのも大変ですので、以下のように設定をするといいでしょう。

admin/config/development/performance へアクセス
[Cache pages for anonymous users]（匿名ユーザのときページをキャッシュ）のチェックをはずす
[Aggregate and compress CSS files]（CSSファイルを圧縮）と[Aggregate JavaScript files]（JavaScriptファイルを圧縮）のチェックを外す

<body>に指定されるクラス名

テーマの実装にもよりますが<body>タグにはページの状態を示す様々なクラス名がつけられます。Bartik（とそのサブテーマ）で使われるクラス名の一部を以下にあげます。

front / not-front	フロントページであることを示す。フロントページ以外では「not-front」
logged-in / not-logged-in	ユーザがログインしていることを示す。ログインユーザがいない場合（匿名ユーザが閲覧している場合）は「not-logged-in」
one-sidebar / two-sidebars / no-sidebars	サイドバーの数
sidebar-first / sidebar-second	one-sidebar の場合、そのサイドバーが第1サイドバーか、第2サイドバーか
page-node / page-user / ...	ページの種類　ノード、ユーザページ、管理ページなど
node-type-page / node-type-article / ...	page-nodeの場合、ノードのコンテンツタイプ　基本ページ、記事、など