LOGIN ID Password Auto Login Register Now! Lost Password?
XOOPS2BasicManual
About XOOPS
JavaScriptをOnでご覧ください。

4.1 テーマの概念

XOOPSのデザイン的外観はテンプレートシステムによって制御されます。XOOPSのテンプレートシステムも大きく分けて「テーマ」と「テンプレート」 (>テンプレートシステムの概要) の2つに分けられます。

「テーマ」はサイト全体の枠組みを決定するもので、「テンプレート」はその内部構造(各ブロックやモジュールの出力部分)の枠組みになるものです。

※XOOPSを取り扱う説明では、どうしても一般用語としての「テンプレート」と、XOOPSコアシステム機能の名称としての「テンプレート」が混在してしまいますので注意してください。

参考画像
※水色の部分がテーマによる出力。黄色〜橙色の部分がテンプレートによる出力

テーマは通常、いくつかのHTMLファイル *1 といくつかのCSSファイルで構成されます。これらのHTMLファイルとCSSは、通常ひとつのディレクトリに収められており、これを「テーマセット」と呼びます。 *2

XOOPSはこのテーマセットを複数持つことができ、サイト管理者やユーザが切り替えることで、コンテンツに影響を与えることなく、自由にサイトデザインを変更することができます。この章ではその「テーマセット」についての解説を行ないます。

デザイン要素とコンテンツ要素の分離
既存の静的なWebサイトでは、ひとつのHTMLに外観を決定付けるデザイン要素と、ドキュメントや写真などのコンテンツ要素を両方記述しなければなりま せん。大量のページを作成するには、そのHTMLを必要な数だけ用意しなければならず、思いのほか非効率です。XOOPSではデザイン要素とコンテンツ要 素は切り離して管理されます。ページを作成する時には、登録されているページデザインにXOOPS側でコンテンツ要素を自動的に当てはめてくれますので、 ページ作成時にはコンテンツ要素のみ入力すれば良く、効率的に大量のページを管理できます。
テーマセット

「テーマセット」はXOOPSの視覚的デザイン要素の大部分を決定付けるファイルで、/themesディレクトリ内に置きます。先に述べたように、テーマ セットにはtheme.htmlというHTMLファイルとstyle.cssというスタイルシートの二つが最低限必要です。theme.htmlは XOOPSのページレイアウトを決定付ける要素です。ここには5つのブロック要素(左ブロック・右ブロック・中央中央ブロック・中央左ブロック・中央右ブ ロック)とモジュールコンテンツの入る位置がHTML的に記述されています。また、ヘッダ画像やバナー、フッタ情報も動的に管理する為のPHPコードが記 載されています。
特にインストール時に初期値で設定されているdefaultテーマの場合は、theme.htmlだけではなく各ブロック要素が個別のHTMLに分割され ていますので、扱いに考慮が必要です。実際には分割して管理するメリットは薄く、それらの中身をtheme.htmlに書き写すことで一枚のHTMLでの 運用が可能になります。
レイアウトを主に受け持つtheme.htmlに対してstyle.cssは、主にデザイン面を受け持ちます。近年、既存のHTMLが大きくCSSを取り 入れているように、XOOPSでもデザイン要素はCSSを使って表現することが望ましく、ネット上で配布されている「テーマセット」では、テーブルのサイ ズやメニュー、見出しなどのデザイン要素はstyle.cssに記述されていることがほとんどです。また、XOOPSではstyle.cssの他に styleNN.css、styleMac.cssというスタイルシートを別に用意することで、それぞれNetscape系ブラウザ( FireFoxを含む)、MacOS用に個別のスタイルを提供することができます。

その他、テーマセット・ディレクトリの中にはテーマ内で使用する画像などが納められています。

それらのパーツを一まとめにしたテーマセット・ディレクトリには任意の名前(使用サーバによって命名規則は異なりますが、通常半角英数文字)を付けることができ、その名前がXOOPS内での「テーマセット名」になります。

theme.html
XOOPSにおいて、theme.htmlという名称のファイルは特別の意味を持ちます。/themes/テーマ名/theme.htmlという位置に置き、 一般設定→一般設定 でそのテーマ名を指定すれば、白紙のHTMLであろうとそれをテーマとして表示します。(もちろん表示されるページは「白紙」です)
XOOPSはこのtheme.htmlに記載されているPHPコード(テンプレート変数=smarty)に対して、設定された情報を元にコンテンツをアサ インします。ですので、このファイルから何かのテンプレート変数を削除すると、管理画面で設定していてもサイトには反映されなくなります。例えば< {$xoops_banner}>を削除してしまうと、バナー管理画面で設定していてもバナーは表示されないことになります。< head>〜</head>内のSmartyに対しても同様です。カスタマイズの際にはご注意ください。
また、このtheme.htmlは通常のHTMLではなくXHTML1.0で書かれています。多少の文法違いはブラウザ側で許容する場合が多いですが、正 しいXHTMLの書式で作るべきでしょう。また、作成・編集時にはEUC-JPで保存することを忘れないでください。Shift_JISの場合、特にファ イル内に日本語文字列を含む場合は全て文字化けしてしまいます。これはテーマセットに限らず、全てのXOOPSのファイルを扱う上での鉄則です。
style.css

XOOPSでの視覚的デザイン要素はできるだけスタイルシートで実現することが推奨されます。現在出回っている汎用XOOPSテーマはテーブルレイアウト が主流ですが、それでもテーブルサイズや各セルのサイズ、padding、marginなどはスタイルシートにより決定されているものがほとんどです。逆 にそれらのテーマのtheme.html内でtable width=""等と指定しても無効です。今後、よりWeb標準化されたテーマが登場してくることが予想されており、今以上にXOOPSのデザイン要素に とって重要なファイルとなるでしょう。

現在のdefaultテーマを基にしたstyle.cssには、table要素、font要素を始め、各見出しのスタイル、表組み(コメントや フォーラムスレッドを含む)のセル背景色、ブロックタイトル及びブロックコンテンツのスタイル、メニューのスタイルなどが設定されています。また、 style.cssで設定されていたとしても、theme.htmlや各テンプレートのHTML内でその部分に対して直書きで指定すれば(style= ""の記述法です)、そちらの方が優先されます。

XOOPSのスタイルシートは、コア内(include/functions.php)で先に述べた三枚のスタイルシートでの運用が可能となっています。振り分けは下記の通りです。

style.css=WinIE全て
styleNN.css=WinIE以外のブラウザ
styleMac.css=Mac用ブラウザ全て

逆に言うとこれ以上の細かい振り分けは、functions.phpをハックしないと無理なわけですが、よほどきめ細かな設定をしない限り、これで十分でしょう。ちなみにfunctions.phpには下記のように記されています。

/*
 * Function to get css file for a certain themeset
 */
function xoops_getcss($theme = '')
{
    if ($theme == '') {
        $theme = $GLOBALS['xoopsConfig']['theme_set'];
    }
    $uagent = xoops_getenv('HTTP_USER_AGENT');
    if (stristr($uagent, 'mac')) {
        $str_css = 'styleMAC.css';
    } elseif (preg_match("/MSIE ([0-9]\.[0-9]{1,2})/i", $uagent)) {
        $str_css = 'style.css';
    } else {
        $str_css = 'styleNN.css';
    }
    if (is_dir(XOOPS_THEME_PATH.'/'.$theme)) {
        if (file_exists(XOOPS_THEME_PATH.'/'.$theme.'/'.$str_css)) {
            return XOOPS_THEME_URL.'/'.$theme.'/'.$str_css;
        } elseif (file_exists(XOOPS_THEME_PATH.'/'.$theme.'/style.css')) {
            return XOOPS_THEME_URL.'/'.$theme.'/style.css';
        }
    }
    return '';
}

使用方法としては、メインのスタイルシートにはstyle.cssを使い、そこには使用する全てのスタイルを記述し、残りの二枚にはstyle.cssと 設定の異なる部分だけを各方法が一般的です。そのためにはstyle.css以外の二枚のcssには最上部に「@import url(style.css); 」を記述しておきます。もちろんstyle.css一枚だけでの運用も可能です。

*1 theme.html 1ファイルだけの場合も多い
*2 「テンプレートセット」は複数のテンプレートをまとめたものですが、「テーマセット」はテーマをまとめたもので はありません。あくまで、一つのtheme.htmlを中心にCSSなどを組み合わせたものが1つのテーマセットです。「セット」という言葉を使っていま すが、意味が違う点に注意してください


Previous
3. モジュール
Top of contents Next
4.2 テーマセットの追加・変更
Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities