ブロックごとに異なるデザインを適用

Drupalサイトを構築していて、すべてのブロックのデザインがほとんど同じで面白味に欠けると感じたことはありませんか？もうそのようなことで悩む必要はありません！意外と簡単に、ブロックごとに変化に富んだデザインを実現することができます。

一番簡単なのはDrupalが出力するHTMLのidまたはclassを利用することです。ブロック全体の背景や、タイトルの背景を変えたりできるので、ある程度デザインに変化を持たせることができます。

それよりももっと凝ったことをしたいという場合には、Drupalの優れたテンプレート機能を利用して、デフォルトのブロックテンプレートの block.tpl.phpをオーバーライドし、HTMLのマークアップをリージョンごと、またはブロックごとに設定することができます。

更に条件を設定して、その条件に当てはまる場合のみデザインを変えたい場合には、テーマのtemplate.php内の THEMENAME_preprocess_block()から、コンテクストに応じたCSSクラスを出力するようにすることもできます。 template_preprocess()はテーマ作成者にとっても非常に便利な機能ですので、後日別の投稿でご紹介できたらと考えています。

その他にも、drupal.orgに寄贈されている便利なモジュールを利用する方法もあります。当サイトでも最近Block Themeというモジュールを導入しました。それについても後日別の投稿でご紹介したいと思います。

この投稿ではCSSのみでカスタマイズする一般的な方法と、block.tpl.phpをオーバーライドするDrupalらしい方法をご紹介します。

CSSのみでカスタマイズ

DrupalのブロックにはHTMLで固有のIDが割り当てられています。下図ではFirefoxのアドオンのFirebugを利用して、HTMLのソースを見ています。下図でハイライトされているBookモジュールが提供するブロックのIDは<div id="block-book-0">という部分です。

Firefoxのアドオン、Firebugを使うと簡単にブロックIDを確認できます。

このIDを利用して、下のようにスタイルすることでブロックごとに異なるスタイルを実現できます。

#block-book-0 h2.title {
  background: red;
  color: #fff;
}
#block-book-0 .content a:link,
#block-book-0 .content a:visited {
  color: red;
}

ブロックIDだけではなく、リージョンごとに与えられている、 <div id="sidebar-right" class="sidebar"> などのIDやクラスを利用することもできます。なお、IDやクラスは使用するテーマによって若干違いがあります。CocoaSpaceで使用しているAdaptiveThemeでは、HTMLのIDが"sidebar-right"ではなく"sidebar-last"となっています。

ここまでのことはウェブサイトを構築したことがある方にとってはご紹介の必要がないことかもしれません。次はDrupalっぽい方法をご紹介します。

block.tpl.phpを命名規則によってオーバーライド

Drupal 6ではテンプレートの命名規則によって、デフォルトのブロックテンプレートのblock.tpl.phpをオーバーライドすることができます。CSSのみの変更だけではなく、別のテンプレートファイルを適用することでHTMLのマークアップを変更できますので、かなり過激にデザインできます。

STEP 1. 命名規則を理解する

デフォルトのblock.tpl.phpをオーバーライドするには、以下のような簡単な命名規則を理解しておく必要があります。この命名規則に沿った名前のテンプレートファイルをテーマのディレクトリに配置することで、Drupalはデフォルトのblcok.tpl.phpファイルに代わってそのファイルを読み込むようになります。

モジュールごとにテンプレートを換える場合

ブロックを提供するモジュールごとに別のテンプレートを適用したい場合には下記のようにします。

block-[module_name]-[delta].tpl.php
block-[module_name].tpl.php

先述のブックナビゲーションを例にとれば、 block-book-0.tpl.php となります。

この[block-book-0]という部分は、先ほどCSSでブロックごとのデザインをカスタマイズする際にCSSで用いたものと同じですね。つまり、HTMLソースでブロックIDを確認し、[ブロックID].tpl.phpと命名してあげるだけでOKです。

deltaについてわからない方もいらっしゃるかもしれませんが、簡単に言いますと、モジュールがブロックを提供する際に各ブロックに与える0から始まる番号です。一つのモジュールで複数のブロックを提供しているような場合にはblock-[module_name]-0.tpl.php、block-[module_name]-1.tpl.php、block-[module_name]-2.tpl.phpのようになります。オーバーライド用にブロックテンプレート名にデルタを含まない場合には、ブロックIDがblock-[module_name]-0のもの、block-[module_name]-1のもの、block-[module_name]-2のものと、そのモジュールが提供するブロックのすべてにテンプレートが適用されます。

Viewsモジュールで作成したブロックのテンプレートを換える場合

Viewsで作成したブロックには以下のようなIDが与えられます。通常のblock-[module_name]-[delta].tpl.phpやblock-[module_name].tpl.phpというやり方ではオーバーライドできませんので、方法を簡単にご紹介します。パターンを書きますと、、

block-views-[view_name]-[display_id].tpl.php

のようになります。

例えば、Viewsにデフォルトに用意されているcomments_recentのブロックのオーバーライドテンプレートは、 block-views-comemnts_recent-block.tpl.php という名前になります。

この場合もやはりHTMLソースからブロックIDを確認し、[ブロックID].tpl.phpと命名してあげるだけでOKです。display_idがわからなくても、ブロックIDを見るとわかります。最後の"block"や"block_1"などという部分がそれです。

リージョンごとにテンプレートを換える場合

block-[region].tpl.php

以下のような例を挙げておきます。 block-left.tpl.php (左サイドバーのリージョンに別のテンプレートを適用したい場合) block-right.tpl.php (右サイドバーの場合)

ブロックテンプレートの優先順位

上記のように、命名規則にはいくつかのパターンがありますが、範囲がより特定されているファイルが優先されて読み込まれますので心配ご無用です。思い通りのカスタマイズが可能です。

具体的には下のようになります。より上のファイルが優先されます。

block-[module_name]-[delta].tpl.php または block-views-[view_name]-[display_id].tpl.php
block-[module_name].tpl.php
block-[region].tpl.php
block.tpl.php

STEP 2. block.tpl.phpをコピー & リネーム

オーバーライド用のテンプレートファイルを用意しなければなりません。おすすめの方法はご使用のテーマのblock.tpl.phpをコピーして、必要な変更だけを施し、上でご紹介したようなファイル名にリネームして同じディレクトリに配置するやり方です。

STEP 3. キャッシュをクリアするのを忘れずに！

上記のような命名規則でオーバーライド用のブロックテンプレートを配置するところまで終わりましたでしょうか？結果を確認するにはキャッシュをクリアする必要があります。Drupalのキャッシュ機能のため、テンプレートファイルを追加した場合などはすぐに変更が反映されません。Drupal管理画面のパフォーマンスページ(DRUPAL_URL/admin/settings/performance)からキャッシュをクリアしてください。