テーマデザインの新しい形・・・NewsFlash+Theme Setting API

なにげにDrupal.orgのテーマデザインプロジェクトを覗いていたら、見た目シンプルなんだけど、ちょっとそそられるデザインを見つけた。
NewsFlash1というテーマデザイン。
結構デザイン性に富んだコテコテのテーマが多い中、割とシンプルという感じのするテーマデザインと感じた。

このテーマの特徴は青系、茶系、緑系と3種類のカラーがセットされているということ。
ThemeSettingsAPI module2というモジュールを利用すればDrupalのテーマ管理画面から変更できるようになるのだが、このモジュールを利用しないとカスタマイズしなければ変更できないと言うことでもある。

このモジュールの面白いところは色の変更3だけではなく、定義さえすれば色々な設定項目を提供できるような雰囲気である。
事実、NewsFlashではbreadcrumbの表示/非表示や、IEのPNG対策と言った機能が選択できるようになっている。

このNewsFlashというテーマには今までに見たことのない発想が盛り込まれている。
0829さんのdiykit4で、ブロック領域が拡張できると言うことを知って、驚愕したものだけど、このテーマではさらにデフォルトのヘッダ、フッター、右、左、コンテンツに加えuser1からuser6という名前でブロック領域が追加されている。


user1からuser3まではヘッダー部分の下辺りに、user4からuser6まではフッターの上辺りに用意されている。

少し気になったのは、ヘッダーのロゴと、サイト名＆スローガンの表示がIEとFirefox2で違っていること。
Firefox2ではロゴ画像の右側にサイト名とスローガンが表示されているが、IEでは画像の下側に回り込んでしまっている。
また、Firefox2でもサイト名＆スローガンは領域の上下真ん中ではなく、どちらかというと上よりに表示されている。
2バイト文字によるサイト言うこともあるかもしれないが、2バイト文字をサイト名やスローガンに使っている場合にはチトかっこが悪いという感じになる。
で、ロゴ画像にサイト名とスローガンを入れて、以前から使ってみたかったGlossy.jsをかぶせたカスタマイズをすることにした。
page.tpl.phpの52行目辺りの

<td id="logo">
 <?php if ($logo) { ?>
  <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
   <img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" />
  </a><?php } ?>
  <?php if ($site_name) { ?>
   <h1 class='site-name'>
    <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
   <?php print $site_name ?></a></h1><?php } ?>
    <?php if ($site_slogan) { ?>
     <div class='site-slogan'>
      <?php print $site_slogan ?>
     </div>
    <?php } ?>
    </td>
   <td id="menu">

を

<td id="logo">
 <?php if ($logo) { ?>
  <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
   <img src="<?php print $logo ?>" alt="<?php $site_name ?> " class="glossy" />
  </a>
 <?php } ?>
 </td>
  <td id="sitename">
  <!--      <?php if ($site_name) { ?>
   <h1 class='site-name'>
    <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
    <?php print $site_name ?></a></h1><?php } ?>
    <?php if ($site_slogan) { ?>
    <div class='site-slogan'>
     <?php print $site_slogan ?>
    </div>
    <?php } ?>
-->    </td>
    <td id="menu">

という風にしてみた。
Glossy.jsは普通の画像ファイルを立体的なボタン風にしてくれるスクリプトであるが、これの優れていることは透過PNG未対応のIEにもそれっぽく見せてくれるところ(笑)。
また、透過PNGでは、ちゃんと背景もとけ込ませてくれる優れものなのである。
正直に言ってNewsFlashのデザインとマッチするかというと微妙な感じではあるのだが、使ってみたいという欲求の方が勝っているので、その辺は不問と言うことで(笑)。
このスクリプトはpage.tpl.phpに記述しているのではなく、template.phpに記述しているのである。
template.phpの46行目辺りに

drupal_add_css(drupal_get_path('theme', 'newsflash') . '/css/' . $style . '.css', 'theme');
drupal_add_css(drupal_get_path('theme', 'newsflash') . '/content.css', 'theme');

という記述があるが、これがDrupalのAPIを通してロードするための記述である。
別に、page.tpl.phpの8行目あたりの<?php print $scripts ?>の次の行くらいに記述しても悪くはないんだけど、折角まとめてあるのだから、それに倣うことにしたのだ。

ちょっと、話は戻るが、ブロック領域と言えば、diykitのカスタマイズの時に、コンテンツとコメントの間にブロック領域を作る例の手段は、ここでも活躍することとなった。
しっかり、そのまま追加してある(笑)
一生、使えるかもしれない(笑)

そうそう。
このテーマデザインは、表示上の主な色に関する部分のCSSファイルが分離されているようなので、そのファイルの色コードを書き換えることで新たな配色を作ることが可能かもしれない。
作ってみたわけではないので断言は出来ないし、どこまでそのCSSファイルだけで変わるかは判らない5。
ああっ、忘れてはいけない。
実は、このテーマデザインでは、content.cssというCSSファイルを呼び出すことになっているのだが、パッケージには同梱されていない。
理由はわからないが、コンテンツで利用できるように配慮しているのではないか？と、想像はしている。
別になくても表示上問題が出るわけではないが、Drupalのログには残ってしまうので、気になるようならcontent.cssという名の空のファイルを入れておくといい。
エラーは記録されなくなるはずだ。

なにはともあれ、サイト再構築･･･などとほざいておきながら、まるで再構築されていない方向にぶれているという話だけど、うーん、まぁ、いいか。

1. 1. NewsFlash | drupal.org
2. 2. ThemeSettingsAPI module
3. 3. とは言っても、実際には3色分のCSSが用意されていて、それを切り替えるだけ。colorモジュールとは違うようだ。
4. 4. D.I.Y. kit for Drupal theme | Drupal.0829.info
5. 5. 現に、メインのstyle.cssに色コードが記述されいない訳ではないからである。