LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Wiki

XCLBasicManual

テーマの概要 anchor.png

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

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

theme_and_template.gif

(水色の部分がテーマによる出力。黄色〜橙色の部分がテンプレートによる出力)

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

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

Page Top

デザイン要素とコンテンツ要素の分離 anchor.png

既存の静的なWebサイトでは、ひとつのHTMLに外観を決定付けるデザイン要素と、ドキュメントや写真などのコンテンツ要素を両方記述しなければなりません。大量のページを作成するには、そのHTMLを必要な数だけ用意しなければならず、思いのほか非効率です。

XCLではデザイン要素とコンテンツ要素は切り離して管理されます。ページを作成する時には、登録されているページデザインにXCL側でコンテンツ要素を自動的に当てはめてくれますので、ページ作成時にはコンテンツ要素のみ入力すれば良く、効率的に大量のページを管理できます。

Page Top

テーマセット anchor.png

「テーマセット」はXCLの視覚的デザイン要素の大部分を決定付けるファイルで、/themesディレクトリ内に置きます。先に述べたように、テーマセットにはtheme.htmlというHTMLファイルとstyle.cssというスタイルシートの二つが最低限必要です。

theme.htmlはXCLのページレイアウトを決定付ける要素です。ここには5つのブロック要素(左ブロック・右ブロック・中央中央ブロック・中央左ブロック・中央右ブロック)とモジュールコンテンツの入る位置がHTML的に記述されています。また、ヘッダ画像やバナー、フッタ情報も動的に管理する為のPHPコードが記載されています。

特にインストール時に初期値で設定されているdefaultテーマの場合は、theme.htmlだけではなく各ブロック要素が個別のHTMLに分割されていますので、扱いに考慮が必要です。実際には分割して管理するメリットは薄く、それらの中身をtheme.htmlに書き写すことで一枚のHTMLでの運用が可能になります。

レイアウトを主に受け持つtheme.htmlに対してstyle.cssは、主にデザイン面を受け持ちます。近年、既存のHTMLが大きくCSSを取り入れているように、XCLでもデザイン要素はCSSを使って表現することが望ましく、ネット上で配布されている「テーマセット」では、テーブルのサイズやメニュー、見出しなどのデザイン要素はstyle.cssに記述されていることがほとんどです。

また、XCLではstyle.cssの他にstyleNN.css、styleMac.cssというスタイルシートを別に用意することで、それぞれNetscape系ブラウザ(FireFoxを含む)、MacOS用に個別のスタイルを提供することができます。
その他、テーマセット・ディレクトリの中にはテーマ内で使用する画像などが納められています。

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

Page Top

theme.html anchor.png

XCLにおいて、theme.htmlという名称のファイルは特別の意味を持ちます。/themes/テーマ名/theme.htmlという位置に置き、XCLBasicManual​/テーマセットの追加・変更でそのテーマ名を指定すれば、白紙のHTMLであろうとそれをテーマとして表示します。(もちろん表示されるページは「白紙」です)

XCLはこのtheme.htmlに記載されているPHPコード(テンプレート変数=smarty)に対して、設定された情報を元にコンテンツをアサインします。ですので、このファイルから何かのテンプレート変数を削除すると、管理画面で設定していてもサイトには反映されなくなります。

例えば<{$xoops_banner}>を削除してしまうと、バナー管理画面で設定していてもバナーは表示されないことになります。<head>〜</head>内のSmartyに対しても同様です。
カスタマイズの際にはご注意ください。

また、このtheme.htmlは通常のHTMLではなくXHTML1.0で書かれています。多少の文法違いはブラウザ側で許容する場合が多いですが、正しいXHTMLの書式で作るべきでしょう。
また、作成・編集時にはEUC-JPで保存することを忘れないでください。Shift_JISの場合、特にファイル内に日本語文字列を含む場合は全て文字化けしてしまいます。
これはテーマセットに限らず、全てのXCLのファイルを扱う上での鉄則です。

Page Top

style.css anchor.png

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

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

XCLのスタイルシートは、コア内(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つのテーマセットです。「セット」という言葉を使っていますが、意味が違う点に注意してください

トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 5497, today: 1, yesterday: 1
初版日時: 2008-06-12 (木) 17:56:06
最終更新: 2014-01-13 (月) 22:06:02 (JST) (1311d) by fabi
Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities