この動画では、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 バナーは見栄えがよいものの、欠点があります――主にリソース使用量の多さです。

チュートリアルの前のパートでは、スライドショーを作成しました。私はそれを会社のスタッフを表示するのに使いましたが、ウェブサイトのヘッダーのバナーとして使うこともできます。ただし、デフォルトのソリューションは私にはあまり合いません――前後のスライド用のナビゲーションボタンを追加したいのです。これは、単純なテキストや数字のコントロールよりずっと見栄えがよくなります。

おさらいすると、すでに Views と Views_slideshow がインストールされています。

さて、この記事にいくつかの矢印アイコンを添付しました――それらをスライドショーに追加しましょう。まず、テキストベースのスライドページャーを有効にする必要があります。

これでページャーは「Next（次へ）」と「Previous（前へ）」のテキストリンクを表示するように切り替わるはずです。

おそらく、node-content-type.tpl.php で上書きして、ノード用のカスタムテンプレートを何度も作成したことがあるでしょう。

それで十分なこともありますが、コンテンツタイプ専用のページテンプレートを定義する必要がある場合もあります。残念ながら、Drupal 6 では、追加のコードなしにはこれを行えません。page-content-type.tpl.php のようなカスタムテンプレートを有効にするには、template.php ファイルに次のコードを追加します:

ときには、system.css、defaults.css、system-menus.css のようなデフォルトの CSS ファイルを変更または削除する必要があります。これらのファイルを直接編集することもできますが、そうすると将来の Drupal 更新時に変更が失われるリスクがあります。これを避けるには、これらのファイルを Drupal による出力から除外するのが最善です。それらのファイルの CSS ルールがまだ必要な場合は、テーマの style.css にコピーしてそこで編集できます。こうすれば、CSS を誤って上書きされることから守れます。

これを行うには、テーマディレクトリに template.php ファイルを作成します（まだ存在しない場合）。そのファイルに次のコードを追加します:

この記事では、Drupal のクエリビルダーモジュール――Views モジュール（http://drupal.org/project/views）――を探ります。Views を使うと、さまざまなコンテンツタイプのフィールド、コメント、タクソノミー用語、ユーザー情報、その他データベースからのデータを出力できます。また、グラフィカルなインターフェースも提供し、マウスを使って簡単にデータベースクエリを構築できます。

注意!!! easySlider を 1 時間以内に使いたい場合は、モジュールをインストールすることを強くお勧めします。この記事は主に、Views テンプレートのテーミング方法を理解する手助けをするためのものです。 easySlider を適切にスタイリングするには、CSS をカスタマイズする必要があります。

SASS/SCSS は、CSS コードを書くための標準として定着して久しいものです。まだ使っていないなら、切り替えを検討する時です。Sassy モジュールを使えば、Drupal に SCSS をすばやく統合できます――CSS ファイルは PHP ライブラリを使ってコンパイルされるため、共有ホスティングでも使えます。

はじめに

クリーンな Drupal インストールと Zen テーマから始めます。まず、Sassy モジュールをインストールします:

https://www.drupal.org/project/sassy

Sassy はコンパイルを処理するために Prepro モジュールを必要とします:

https://www.drupal.org/project/prepro

また、Sass コンパイラーライブラリを読み込むために Libraries API モジュールもインストールします:

Emmet は、Zen Coding プロジェクトの名前を変えたものです。Emmet を使うと、略記法を使って HTML のリストや、クラスや ID を持つブロックをすばやく生成できます。HTML に加えて、短い構文を使って CSS プロパティもすばやく書けます。最初は新しいショートカットのセットを覚えるのが不要に思えるかもしれませんが、慣れてしまうと、Emmet なしでのコーディングは不便に感じられます。

Emmet（Zen Coding）でできること

大量の HTML を書いていると、タグの閉じ忘れのようなエラーの可能性が高まります。Emmet はそれを防ぐのに役立ちます。ほとんどの最新の IDE は、組み込みまたはサードパーティのプラグインを介して Emmet をサポートしています。HTML コード生成のためのショートカットキーを設定するだけです。

たとえば、次のように書きます:

div#content>h1+p

Emmet のトリガーキーを押すと、次のように展開されます: