drupalbook.org の Drupal チュートリアル の最初の 2 つのセクションでは、サイトのインストール方法、コンテンツタイプの追加、さまざまなコンテンツタイプのマテリアルの作成、そして Views を使ったそれらのマテリアルの表示について学びました。続くセクションでは、HTML/CSS について学んだかもしれません。さて、これらのマテリアルの見た目を CSS を使って変える方法についてお話しする時です。

皆さん、こんにちは!

すでに HTML と CSS の簡単な入門を見終えていることと思います。これで、PSD モックアップをもとに Drupal テーマを作成し始める準備ができました。以下は HTML と CSS の「チュートリアル」へのリンクです:

HTML

CSS

次の動画は一見難しく思えるかもしれませんが、心配しないでください――今後のレッスンで、すべてを一歩ずつ説明していきます。必要なときはいつでもこの記事に戻り、リファレンスとして使ってください。

既製の Drupal テーマを使わず、独自のテーマを作成したい、または WordPress や Joomla からテンプレートを移植したい場合は、テーマを一から構築する必要があります。幸い、テーマ作りを始めるのに役立つ既製のフレームワークがあります。

Zen - http://drupal.org/project/zen

Fusion - http://drupal.org/project/fusion

どこから始めるか?

やった! 最初に正しいファイルを開きましたね。Zen テーマ をダウンロードしたときにまず気づくのは、他のテーマよりもはるかに多くのファイルが含まれていることです。

心配しないでください! Drupal テーマを作成する ために、すべてをすぐに知る必要はありません。

Zen は、あなたが必要だと気づいていた以上のものを提供し、あなたがドキュメントやそれに関するコメントを学ぶ間、辛抱強く待ってくれます。

ベーステーマ、サブテーマ、スターターテーマとは?

システムを学ぶ最良の方法は、既存の例を取り上げて、それを変更しながら仕組みを理解することであることがよくあります。この方法の大きな欠点は、何かが壊れ、それを壊す前は元の例が動作していた場合、他の人があなたの修正を手伝う動機がほとんどないことです。

このレッスンでは、サイトのメインページをレイアウトします。ソースコードは下に添付します。デモは、テーミングに関する一連のレッスンを終え次第、公開します。

このチュートリアルでは、Views slideshow モジュールを使ってスライドショーを作成する方法を紹介します。いくつかのスライドを追加し、レイアウトのように見せます。

このレッスンでは、次のことを行います:

• ホームページのレイアウトを完成させる、
• ホームページ専用のテンプレートを作成する、
• ホームページを割り当てる、
• 追加のブロックを追加してテーミングする。

質問: こんばんは。Ivan さん、ホームページのテーミングに関するあなたのレッスンを見ました。ノードのタイトルが表示されないように、テンプレートから H1 タグを削除していましたね。私も一緒にやってみたのですが、なぜかタイトルがまだ表示されます。何か他に見落としているのでしょうか? それとも、CSS で display: none を使うべきでしょうか?

このレッスンでは、サイトにニュースページを作成し、ブログとお問い合わせフォームを表示します。ブログには標準のブログモジュールを使いますが、各ブログエントリに画像を追加します。そしてニュースでは、1 枚の画像に加えて、小さなフォトギャラリーを持たせます。お問い合わせページには、Yandex マップとお問い合わせフォームを挿入します。

これらのページの表示に取り組み、そのテーミングは次のレッスンで行います。

このチュートリアルでは、ブログ、ニュース、お問い合わせフォームを整えます。CSS コードをいくつか追加し、CSS3 コードジェネレーターを使います。

このレッスンでは、Drupal のテーミングを続けます。今回はフィールドをテーミングします。このレッスンの後は、Views 出力のテーミングに進みます。

フィールドをテーミングするには、modules/field/theme/field.tpl.php ファイルをテーマの templates フォルダーにコピーし、次のいずれかのパターンに従って名前を変更する必要があります: