Drupal 7 でスライドショーと jQuery カルーセルを作成する。パート 1
ウェブサイトに少しの華やかさや活気を加えたいと思うことはよくあります。Drupal で構築されたサイトは、デフォルトの設定では静的で地味な見た目になりがちですが、理想的にはもっと独創的で、動的で、明るく、生き生きとしているべきです。これは、ドロップダウンメニューや、動的に更新されるページ、あるいはサイトヘッダーのバナーを実装することで実現できます。
CSS の知識は大いに役立ちます――配色の変更を含め、サイトの見た目をカスタマイズするのに使えます。ただし、デフォルトのテンプレートでも、サイトをより魅力的に見せることはできます――完璧ではないかもしれませんが、確実に良くなります。まずはバナーから始めましょう。
かつてバナーは、主に .gif 画像（複数のフレームを含められる）を使うか、Flash ベースのバナーで作られていました。GIF の作成は時間のかかるプロセスで、見た目の結果もまちまちです。Flash バナーは見栄えがよいものの、欠点があります――主にリソース使用量の多さです。
JavaScript を使ってバナーを作ることも可能でしたが、それにはより多くの時間と、言語のより深い知識が必要でした。jQuery JavaScript フレームワークの登場により、物事ははるかに簡単で速くなり、インタラクティブな要素を作るのに JavaScript を深く知る必要はもうなくなりました。
これまで使ってきたのと同じテストサイトで作業を続けます:
まず、バナー用の新しいリージョンを作成します。テーマの .info ファイルを開き、リージョン定義のすぐ後に:
regions[content] = Content
regions[right] = Right sidebar
regions[left] = Left sidebar
regions[footer] = Footerバナー用の新しいリージョンを追加します:
regions[topbanner] = Top banner
次に、欲しいバナーの種類を選ぶ必要があります。単純な画像スライドショーで十分なら、Views_slideshow を使えます。そのモジュールを、サブモジュールの Views Slideshow: SingleFrame と Views Slideshow: ThumbnailHover とともにインストールします。これらは Views モジュールを必要としますが、おそらくすでにインストールされているでしょう。
Views Slideshow: SingleFrame - 単一のブロック内にスライドショーを実装します。
Views Slideshow: ThumbnailHover - 各スライドのサムネイルまたはタイトルメニュー付きのスライドショーを作成します。
新しい View を作成し、「Tags」フィールドに次を入力します:slideshow
次に、表示したい フィールド を追加します。私は従業員の名前、役職、写真を使いますが、ノードのタイトル、本文、その他のコンテンツフィールドを使ってもかまいません。
フィルター には、次を追加します:Node: Published = Yes；Content type = Employee（または Page、Story、あなたが作成した別のタイプ）。
ソート条件 には、Node: Post date = Descending（降順）を使います。
ブロック用の表示を追加します。
Basic settings（基本設定） で、Style を slideshow に設定します。エフェクトの設定ウィンドウが表示されます。表示されない場合は、「Style: slideshow」の隣にある歯車アイコンをクリックします。
Slideshow mode: SingleFrame のスライドショー設定:
Timer delay: スライド間の遅延（ミリ秒）；
Initial slide delay offset: 最初のスライド遷移前の初期遅延；
Speed: 遷移速度；
Controls: テキストベースのナビゲーションリンク；
Pager: 番号付きのスライドインジケーター；
Image Counter: 現在のスライド番号を表示；
Items per slide: 一度に表示するスライド数；
Effect: 使用する遷移エフェクト；
これらが主なオプションです――他のものも役立つかもしれません。
Slideshow mode: ThumbnailHover の設定:
Main frame fields: メインのスライドショー領域に表示されるフィールド；
Breakout fields: スライドショーのサムネイルメニューで使われるフィールド（たとえば画像の小さい版）；
残りの設定は SingleFrame と同じです。
view を保存し、ブロック表示を作成した場合は、先ほど定義した topbanner リージョンに割り当てます。
バナーの見た目をカスタマイズするには、配色とレイアウトに合わせて、テーマの style.css を手動で更新する必要があります。
このチュートリアルの次のパートでは、画像ベースのボタン、追加モジュールなしの jQuery ベースのバナー、そして jQuery カルーセル を作成します。