10.基本操作 ～テーマの管理編～

ページ内コンテンツ

XOOPSではテーマをコンテンツとデザインが分離されているので、テーマを変更することでデザインを簡単にリニューアルすることができる。サイトのデザインというのは印象を決めてしまう重要な要素なので、十分に気を配りたい所だ。

テーマについての私見

XOOPSではフリーのテーマも数多く配布されているので最初は選択肢に困るほどだ。まずはいろいろ試してみるといい。しかし思うのは、自分の用途にピッタリというテーマはなかなか見つからないということだ。まあ最初からこうと決まっていたらデザインを発注した方がいいに決まっているが、なかなかそうもいくまい。とりあえずは気に入ったテーマをベースに、ちょこちょこ自分でカスタマイズしてみるといい。メニューの幅が気に入らないとか色を変えたいといった範囲であれば、割と簡単に手を加えることができる。その際、あった方が絶対便利なツールにFirefoxのアドインのFirebugがある。これはブラウザで表示中の要素のHTML構造やCSS情報を表示したり修正できるツールで、これがあるとないとでは効率が全然違う。テーマをいじるなら必需品であろう。

Firebug 1.2.1 https://addons.mozilla.org/ja/firefox/addon/1843

IEをメインに使っている場合は、少々機能は劣るが同様なアドオンに次のものがある。

IE Developer Toolbar http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

テーマを選ぶ場合に気をつけなければいけないのは、主要なブラウザでかならず表示をチェックする、ということだ。最近はCSSをちゃんと処理してくれるモダンなブラウザも増えたが、残念ながらIE6というクラシックなブラウザもまだまだ現役。特にIE6ではfloatとmargin回りで致命的なバグ(というか仕様)を抱えているので完全なテーブルレスのテーマを使う場合、少々注意が必要になる。最低限以下のブラウザで表示が正常かはチェックしておく必要がある。

  • Internet Explorer 6.0/7.0
  • Firefox 2.0/3.0
  • Safari 3.0

InternetExplorerは1つのバージョンしか入れられないのでチェックする場合に頭の痛い問題だが、このツールを入れることで複数のバージョンでのチェックを行うことができる。

IETester http://www.my-debugbar.com/wiki/IETester/HomePage

IETesterではIE5.5/6/7/8Beta2をチェックすることができる。なおIE本体のバージョンも上げておくこと。

しかしWindows/Macintosh/LinuxとOS別にもかなりの種類がある。これらの環境を用意するのも大変なので、主要なブラウザの表示をスナップショットで見せてくれるサイトもある。

Test your web design in different browsers http://browsershots.org/

スナップショットを取りたいURLとブラウザの種類を設定すれば約30分でその結果を教えてくれる。ただし仮想環境で海外版のOS上のブラウザで見ることになるので、あれっ、という環境がまともに表示されないこともある。まあ覚えておくと便利ぐらいでいてほしい。個人的にはEUCでサイトを構築していたときは化け化けで頭が痛かったのだが、UTF-8にして少々はよくなったかな、って感じである。

テーマの入手

テーマを入手するにはGoogleあたりで「XOOPS テーマ」で検索かけてみるのが一番だが、何しろ数が多いし、すでに提供を止めている所も多い。またフリーではなく有料のテーマも多いので使用条件をよく確認した方がいいだろう。

Xoopsのテーマがフリー配布まとめ　http://webhackr.blog105.fc2.com/blog-entry-34.html

テーマのアップロード

テーを入手したらそれをアップロードする。XOOPS Cubeではテーマはhtml側のthemesディレクトリ内にテーマごとにディレクトリ別で格納されている。名前がバッティングする場合はリネームしておくこと。

テーマの管理

アップロードしたテーマを使えるようにするには管理者メニューの「互換モジュール」「テーマの管理」で行う。

10-1.PNG

選択したいテーマの「操作」のチェックボックスをオンにしておく。なお「Active」になっているテーマがディフォルトのテーマになる。

テーマの選択

テーマを選択する場合はブロックの追加で「テーマ選択」ブロックを追加しておく。

テーマの削除

テーマを削除したい場合は、テーマの管理で「操作」のチェックを外して、themesディレクトリからテーマを格納しているディレクトリごと削除すればよい。

テーマをいじったのに変更されない時は

テーマをいじったのにブラウザで表示が反映されない、と思ったときは管理者メニューの「互換モジュール」「全般設定」の「themes/ ディレクトリからの自動アップデートを有効にする」が「はい」になっているか確認する。これが設定されていないとちゃんと反映されない。テーマが決まってしまえば、このオプションは「いいえ」にしておく。

テーマのカスタマイズ ～うちの場合～

うちの場合はホダ塾ディストリビューションの「hd_default」をベースにちょこちょこカスタマイズしている。ベースとなったテーマは印刷用のスタイルが別だし、カラムの幅や色といった設定が別ファイルに分かれているので使いやすい。またメッセージリダイレクトが中央ブロック上部に表示されるの気に入ってる。ただし提供されているテーマは元々テーブルレスレイアウトなのだが、うちの環境ではIE6で表示崩れが起こる事があるので、テーブルレイアウトに大幅に修正している。もし参考にしたい人がいれば提供しますのでご連絡を。