34.テーマのカスタマイズ

さて、サイトを構築してみて一番最初に手を加えたい所はテーマだろう。なにしろサイトの印象は見た目で決まってしまうことが多いので、テーマのデザインには凝りたいところ。ここではホダ塾ディストリビューションに同封されている「hd_default」をベースにテーマのカスタマイズについて紹介してみよう。

テーマ選びのコツ

まあ、どんなテーマを選ぶかはそれぞれサイトの個性なんで考えどころなのだが、次のような点に気をつければいいと思う。

• デザインが気に入っていること
  テーマを選ぶ場合に最も重要なのは、気に入ったデザインのテーマを選ぶということだ。正直いって見た目がよければあとは何とでもなるモノである。逆にデザインに大幅に手を加えなければならない場合は結局最初から作った方がマシなんてことになりかねないので、まずはデザイン重視。

• 多くのブラウザに対応しているか
  最近ではブラウザの選択肢も増えてきたが、テーマとモジュールの組み合わせによっては表示が崩れてしまう場合がある。サイトを構築する場合はなるべく多くのブラウザで挙動不審にならないことが重要である。
  なお、携帯でのテーマについてはちょっと事情が複雑になるので今回はあまり深く掘り下げない。とりあえずフルブラウザで見れればOKってことで話を進める。

• 2カラムか、3カラムか
  XOOPSの場合、2カラムか3カラムでテーマがデザインされている。自分のサイトはどっちでいくのか考えておく。またメニューも左に置くのか、右に置くのかも重要。

• 固定カラムか、可変カラムか
  中央ブロックを固定幅のカラムにするのか、それとも可変幅のカラムにするのかによっても選択が変わる。デザイン重視のサイトの場合は固定幅の方がうまくまとまりやすいのだが、可変幅だと利便性が上がる。ただし可変幅だとブラウザによっては表示が乱れることもあるので注意が必要。

• 印刷用CSSが分かれているか
  テーマは普通は画面上で見ることを前提にデザインされているが、印刷時は別のCSSを用いることが多い。そのため印刷用のCSSが最初から用意されているようなテーマの方が都合がいい。まあ、なければないで後から自分で作ることもできることはできる。

• パンくずリストに対応しているか
  XOOPSでは統一的なパンくず表示方式としてxoops_breadcrumbsが提唱されており、対応しているモジュールも増えてきた。テーマを選ぶ上で考えたい項目である。

• リダイレクトメッセージの表示方法は?
  XOOPSではメッセージが表示される時に画面が切り替わって単独表示されるテーマが多いのだが、場合によっては切り替えなしで表示できる場合もある。これだと使い勝手がかなり違うので、実際に自分で使ってみて確かめるのが一番。

hd_defaultの特長

今回ベースに選んだのは、1.0.1b版に同封されている「hd_default 0.8」だ(ちなみに1.0.2版に同封されているhd_defaultも0.8だ。ただし実際にはモノが違う。バージョン上がったら番号は変えておいた方がいいですよ)。このテーマは次のような特長がある。

• 2カラム、左メニュー
• 中央ブロックは可変幅
• 印刷用print.cssが別
• xoops_breadcrumbs対応
• リダイレクトメッセージが中央ブロック上部に表示される
• レイアウトはテーブルレスレイアウト
• カラムの幅や色が別ファイルで定義されている

かなりシンプルなテーマなので好みが分かれるところだとは思うが、よく考えられたテーマなのでベースにするには申し分ないと思う。ただし、このテーマはホダ塾ディストリビューションのpreloadを前提としているので通常のXCLではうまく表示されない(/preload/HdXoopsTplHook.class.phpが必要)。まあ、もうちょっとグラフィック寄りのテーマが好きな人は各自よろしく。

なお、なんでわざわざ古いバージョンのテーマを選んで解説するかといえば、1.0.2版のメッセージリダイレクトの方法が個人的には気に入らないからだ。特に携帯のフルブラウザで見たときにメッセージがまったく表示されない点が大減点。まあ今回はテーマのカスタマイズ方法の一例を紹介するということでご容赦願いたい。

hd_defaultのファイル構成

hd_defaultは次のファイルで構成されている。

• theme.html - メインのテーマファイル。
• theme_config.dist.php - css_style.php が参照する、色やカラムなどサイトの見栄えを調整する設定ファイル。使用時はtheme_config.phpという名前でコピーして使う。
• manifesto.ini.php - テーマの情報(管理メニューの「テーマの管理」で表示される情報)。
• hd_assign.php - hd_defaultで使われているSmarty 変数の設定ファイル。
• css_style.php - 基本のCSSファイル。
• css_modules.php - モジュールの上書き用CSSファイル。
• css_layout.php - ブロックやヘッダー、フッダーなどレイアウトが定義されている。
• css_print.css - 印刷時のCSSファイル。
• css_contrast.css - 弱視利用者のためのハイコントラストCSSファイル。URL に「hd_view_mode=contrast」があるとハイコントラストモードになる。
• /language - altsys用の言語定数オーバーライドのための設定ファイル群。
• /templates - hd_defaultにあわせたlegacyモジュールのテンプレート。
• /images - 画像ファイル。

カスタマイズの際にいじるのは主に「theme.html」「theme_config.php(theme_config.dist.php)」「css_style.php」、あと場合によっては「css_layout.php」「css_print.css」だろう。

ここがヘンだよ、hd_default

基本的にはよくできているテーマだと思うのだが、個人的にどうしても我慢ができない点がある。それは、IE6で表示時にレイアウトが崩れてしまう点だ。

(ウィンドウが狭くなってくると、左ブロックが中央ブロックより下に配置されてしまう)。

(モジュールによっては右ブロックを表示すると中央ブロックより下に配置されてしまう)

これらはhd_defaultがテーブルレスレイアウトにこだわったから起こっている。中央ブロックを可変幅カラムにした場合、どうしたってIE6ではテーブルレスレイアウトは無理だと思う(iGoogleだって実現できていない)。IE6でテーブルレスでもいいのは、各カラムが固定幅の場合だけだ。チャレンジはいいと思うし、ベースとしてはかなりいい感じではあるのだが、残念ながらこれをそのまま使うことはできない。

カスタマイズ箇所

hd_defaultでカスタマイズしたのは次の点。

• テーブルレスレイアウトからテーブルレイアウトに変更
• ブロックの幅
• 色の変更
• フォントやアンカー装飾の追加

テーブルレイアウトに変更することで、個人的に不満な点はほぼ解消された。なおテーブルレイアウトにしたことで印刷用CSSの一部に手を入れる必要があった。印刷時には左右ブロックは必要ないので、そのwidthを0にして印刷しないように。その他の変更は好みということで。

なおテーマを変えてもモジュールによってはテンプレートの細部をイジる必要なものもあるだろう。テンプレートはデフォルトとは別のテンプレートセットを複製しておいて、そちらに修正を加えた方が運用上は都合がいい。

テーマのカスタマイズは初心者でも簡単に取り組めるので、気に入るまで手を加えるといいだろう。