Drupal テーマをカスタマイズするためのベースとして作成したテーマです。

カスタマイズのベースとなるテーマは drupal.org でもいくつかリリースされていますが、デザイン的にシンプルということではなく、CSS での拡張性を考慮したテーマ関数の再定義と新しいテーマ変数の追加を目的として作成したものです。

最新版（diykit-5.x-1.4）は D.I.Y. kit テーマ | DRUPAL*DRUPAL からダウンロードできます。（まだ工事中のサイトですが、ダウンロードは可能だと思います。）
なお、今後、自作のモジュールやテーマ（あれば...）は、DRUPAL*DRUPAL サイトで公開していく予定です。

スクリーンショット

対応ブラウザ

Firefox 2, Internet Explorer 7, Internet Explorer 6 （すべて Windows） にて動作確認を行っていますが、環境によって、レイアウトが乱れる場合があるかもしれません。

テーマファイルの構成と概要

D.I.Y. kit テーマの構成ファイルのうち、主要なものについての説明です。

template.php

ブロック表示領域

コンテンツ上, コンテンツ左, コンテンツ右, コンテンツ下 に表示領域を確保できるよう、ブロックを定義しています。
それぞれのブロックは、以下のテーマ変数で呼び出すことが出来るようになっています。（D.I.Y. kit ではこれらのブロックは使用していません。）

• $before_content -- コンテンツ上
• $after_content -- コンテンツ下
• $left_content-- コンテンツ左
• $right_content -- コンテンツ右

パンくずリスト

パンくずリストのセパレータを <span class="breadcrumb-separate">»</span> とし、セパレータ部分へスタイルを設定できるようにしています。

フィードアイコン

images/feed.png が見つからなければ、デフォルトの misc/feed.png を呼び出すように変更しています。
D.I.Y. kit では、ロゴの色と合わせた配色の feed.png を同梱していますが、Mozilla の フィードアイコンガイドライン では、サイトのデザインに合わせた配色は制限されていませんが、オレンジ色以外は推薦されていないようですのでご注意下さい。

マーカー

「新着」 や 「更新」 といった表示にそれぞれ別のスタイルを設定できるよう、それぞれの要素に marker-new および marker-update クラスを追加しています。（デフォルトの marker クラスも有効にしています。）

追加したテーマ変数

page.tpl.php

1. $xml -- ブラウザを判定し、Windows の IE7 未満のブラウザ以外であれば XML 宣言を出力します。
2. $body_id_class -- body タグに id と class を追加します。
   • フロントページの場合（id） → front : そうでない場合 → page
   • ログインユーザの場合（class） → logged-in : そうでない場合 → not-logged-in
   • サイドバーの有無を判定（class） → none/left/right/both
3. $head_page_title -- ブラウザのタイトルバーに表示されるタイトルのうち、コンテンツタイトルまたはスローガンの部分のみを出力します。
4. $site_footer -- $footer_message で表示される内容のうち、サイト情報として設定された 「フッタメッセージ」 の内容のみを出力します。
5. $footer -- $footer_message で表示される内容のうち、フッタ領域に表示設定されたブロックの内容のみを出力します。

node.tpl.php

1. $node_id_class -- コンテンツ全体を囲む div タグに id と class を追加します。
   • コンテンツ ID（id） → node-$node->nid
   • 各ノード毎（class） → node
   • ティーザーリストページの場合（class） → list
   • 前面固定の場合（class） → sticky
   • 未公開の場合（class） → node-unpublished
   • コンテンツタイプ別（class） → type-$node->type
   • ゼブラ（奇数または偶数）判定（class） → odd/even
2. $changed_date -- コンテンツの更新日時を表示します。

comment.tpl.php

$comment_class -- コメント全体を囲む div タグに class を追加します。

• 各コメント毎（class） → comment
• 新しいコメントの場合（class） → comment-new
• 未公開の場合（class） → comment-unpublished
• ゼブラ（奇数または偶数）判定 → odd/even

block.tpl.php

$block_id_class -- ブロック全体を囲む div タグに id と class を追加します。

• ブロックの識別 ID（id） → block-$block->module-$block->delta
• 各ブロック毎（class） → odd/even
• モジュール名を付加（class） → block-$block->module
• ゼブラ（奇数または偶数）判定（class） → odd/even
• サイドバーブロックのゼブラ（奇数または偶数）判定（class） → left-odd/left-even, right-odd/right-even

page.tpl.php

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

XHTML 1.0 Strict として宣言しています。

head profile="http://purl.org/net/ns/metaprof"

rel="nofollow" や rel="license" を使用する場合のプロファイルとして http://purl.org/net/ns/metaprof を利用させていただいています。

meta http-equiv="content-script-type"

HTML 内にスクリプトを記述する場合には必要な meta 定義のため追記しています。

meta http-equiv="content-style-type"

HTML 内にスタイルを記述する場合には必要な meta 定義のため追記しています。
<style ...>@import "style.css";</style> のように記述する場合には必要になるはずです。

meta name="description"

SEO のひとつとして、スローガンを設定していれば、その内容をサイトの概要として出力します。

meta name="generator"

なんとなく…です。 Drupal 5.x で構築されたサイトだということを出力するためのものです。

CSS の読み込み

システムやモジュールに設定された CSS を読み込んだ後、style.css が読み込まれます。
さらにその後、IE のみが ie-fix.css を読み込むように条件付コメントを設定しています。

CSS

style.css

以下の CSS を順番に読み込んだ後、style.css 内に記述したスタイルが適用されます。

1. base.css

主要ブラウザ毎の設定をリセットした上で、最低限のスタイルのみ設定しています。

2. layout.css

レイアウトブロックの位置や幅など、大まかなレイアウトを設定しています。
（ 1～3 カラムに対応、左右ブロック幅固定、中央ブロック可変、一定の幅以下または以上になった場合にはそれ以上中央ブロックを可変しないというようなレイアウトにしています。）

3. common.css

このテーマで使用するタグに対するスタイルやサイト全体でクラスの定義、および、必須モジュールのスタイルを再設定しています。

4. modules.css

必須ではないがコアに含まれている標準モジュールについて、それぞれのスタイルを再設定しています。

ie-fix.css

layout.css, common.css, style.css での設定のうち、IE について調整の必要な部分についての設定をしています。

既知の問題点

完成されたテーマとして作成したのではなく、あくまで、カスタマイズのためのベースとなることを目的としていますので、以下の点に関しては追求して修正しておりません。

1. Internet Explorer において、input ボタンに表示する文字数が多い場合にボタン画像が引き伸ばされたような状態になります。
2. Internet Explorer 6 において、color モジュールに対応したテーマのカラー設定時のプレビュー画像が右サイドにはみ出して表示されます。
3. Internet Explorer 7 において、折りたたみ式 fieldset の折りたたみ時の border の中心が表示されません。
4. Firefox 2 および Internet Explorer 7 において、「最近のログ」 の項目中に折り返しできない連続した文字列（長い URL など） が使用された場合に table の右サイドが非表示になります。

改定履歴

[ 2007-07-22 ]
ヘッダのタイトルに使用するテーマ変数として、コンテンツタイトルまたはサイトスローガンを出力する $head_page_title を追加し、テンプレートも $head_page_title を利用した内容に変更しました。
また、テンプレート中のページトップへ戻るためのナビゲーションに係わる日本語翻訳が漏れていたので、不足分を追加しました。

[ 2007-07-25 ]
コンテンツの更新日時を表示するテーマ変数として $changed_date を追加し、テンプレートも投稿後に更新されていれば $changed_date を表示するような内容に変更しました。

[ 2007-07-27 ]
Drupal 5.2 のリリースに伴い phptemplate.engine へのバグフィックスも行なわれています。
このため、template.php 中の $body_id_class テーマ変数の設定部分について、バグに対応するために記述していたコードの削除を行ないました。
※ diykit-5.x-1.3-update.tgz が、diykit-5.x-1.2 からアップデートしたファイルのみのパッケージです。

[ 2008-03-01 ]
CSS のタイポなどに関するバグを修正しました。
ダウンロード先を D.I.Y. kit テーマ | DRUPAL*DRUPAL に変更しました。