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

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

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

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

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

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

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

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

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

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

この動画では、Views スライドショーをテーミングします。いくつかのテンプレートを上書きし、jCarousel プラグインを統合してスライドショーのページャーをカスタマイズします。

使用するモジュール:

Views Slideshow - http://drupal.org/project/views_slideshow

プラグイン:

jQuery jCarousel - http://sorgalla.com/projects/jcarousel/

jCarousel を初期化するコード:

(function ($, Drupal, window, document, undefined) {

  $(document).ready(function(){
    $('#widget_pager_bottom_portfolio_slideshow-block').jcarousel();
  });

})(jQuery, Drupal, this, this.document);

このチュートリアルでは、ユーザーページのテーミング方法を見ていきます。user-profile.tpl.php テンプレートを使います。

CCK、Taxonomy、Webform モジュールを使って作成したカタログでは、注文が行われたことを顧客とサイト管理者（マネージャー）にメールで通知できます。ただし、現在マネージャーがメールで受け取るのは、商品名、数量、顧客の詳細だけです。メールに注文された商品への直接リンクも含まれていれば、はるかに便利でしょう。

現在、注文が行われたときに受け取るメールは次のようになっています:

Submitted on Tuesday, November 16, 2010 - 15:56
Submitted by user: Admin
Responses:
Product Name: Colorful Plate
Quantity: 1
E-mail: levmyshkin2@mail.ru
Address: Omsk City
Preferences and Comments: Responses can be viewed here:
http://drupal/node/14/submission/1

メールテンプレートは webform の設定でカスタマイズできます:

ウェブサイトに少しの華やかさや活気を加えたいと思うことはよくあります。Drupal で構築されたサイトは、デフォルトの設定では静的で地味な見た目になりがちですが、理想的にはもっと独創的で、動的で、明るく、生き生きとしているべきです。これは、ドロップダウンメニューや、動的に更新されるページ、あるいはサイトヘッダーのバナーを実装することで実現できます。

CSS の知識は大いに役立ちます――配色の変更を含め、サイトの見た目をカスタマイズするのに使えます。ただし、デフォルトのテンプレートでも、サイトをより魅力的に見せることはできます――完璧ではないかもしれませんが、確実に良くなります。まずはバナーから始めましょう。

かつてバナーは、主に .gif 画像（複数のフレームを含められる）を使うか、Flash ベースのバナーで作られていました。GIF の作成は時間のかかるプロセスで、見た目の結果もまちまちです。Flash バナーは見栄えがよいものの、欠点があります――主にリソース使用量の多さです。