ウェブサイトに少しの華やかさや活気を加えたいと思うことはよくあります。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 のトリガーキーを押すと、次のように展開されます:

Features は、サイトの機能をひとまとめにして、ワンクリックで別のサイトに転送できるようにするモジュールです。その結果は、他のモジュールと同じようにインストールできる feature になります。Feature は、まとまってサイト上の特定の機能を提供するエンティティの集まりです。

Features モジュール は、さまざまな Drupal コンポーネント（モジュール、コンテンツタイプ、タクソノミー、Views、メニュー）を単一の Feature モジュール にまとめるための、ユーザーインターフェース（UI）と API の両方を提供します。どのモジュールとも同様に、Feature モジュールには .info ファイルが含まれ、管理インターフェースを通じて管理でき、有効化、無効化、更新、削除ができます。

feature モジュールにパッケージ化できる機能の例:

このレッスンでは、Feature モジュール を使ってサイトの機能をコピーし、再利用する方法を紹介します。まずは簡単なものから始めましょう――次を含むニュースフィードの作成です:

• ニュースページへの「News（ニュース）」メニューリンク
• ニュースページ
• フロントページ用のニュースブロック

これで、Features モジュールの動作を理解するには十分でしょう。

まず、必要なモジュールをインストールします:

Features、Views、CTools

「News」というコンテンツタイプを作成し、そのタイプのノードをいくつか追加します。

前のレッスンでは、Drupal 用の feature モジュール の作成方法を見ました。このレッスンでは、新しい機能を追加してそれらのモジュールを更新する方法を説明します。

バージョン alpha1 の feature モジュールがあります。ここでは次のバージョン alpha2 を作成します。News ブロックに、タイトルに加えて公開日とティーザーを追加します。まず、alpha1 feature モジュールのフォルダーを sites/all/modules にコピーしますが、まだ有効化しません。これにより feature を再作成できます。