Geeklog Rの標準テーマ「Revize」では、標準のレイアウトのCSSファイル(public_html/layout/Revize/css/layout.css)に加えて、追加のレイアウトモジュール(public_html/layout/Revize/css/module/layout.css)が同梱されています(このモジュールは標準で読み込まれます)。 このモジュールによって、/public_html/layout/Revize/header.thtml内のbody要素にクラス名を追加することで簡単にレイアウトを変更することができます。 レイアウトのパターンは、標準レイアウト+拡張レイアウトモジュールによるレイアウトの1+15パターンが選べます。
クラス名には、レイアウトの「サイズ」・「カラム」・「配置」の3種類のクラス名をそれぞれ組み合わせて使用します。クラス名の組み合わせと、それによるレイアウトの対応は以下のようになっています。
| サイズ | カラム | 配置 | レイアウト |
|---|---|---|---|
| なし | なし | なし | 可変(エラスティック)サイズ・2カラム・通常配置(標準レイアウト) |
| fixed | single | 指定不可 | 固定サイズ・1カラム |
| fixed | double | normal | 固定サイズ・2カラム・通常配置 |
| fixed | double | invert | 固定サイズ・2カラム・反転配置 |
| fixed | triple | normal | 固定サイズ・3カラム・通常配置 |
| fixed | triple | invert | 固定サイズ・3カラム・反転配置 |
| liquid | single | 指定不可 | 可変(リキッド)サイズ・1カラム |
| liquid | double | normal | 可変(リキッド)サイズ・2カラム・通常配置 |
| liquid | double | invert | 可変(リキッド)サイズ・2カラム・反転配置 |
| liquid | triple | normal | 可変(リキッド)サイズ・3カラム・通常配置 |
| liquid | triple | invert | 可変(リキッド)サイズ・3カラム・反転配置 |
| liquid | single | 指定不可 | 可変(エラスティック)サイズ・1カラム |
| elastic | double | normal | 可変(エラスティック)サイズ・2カラム・通常配置 |
| elastic | double | invert | 可変(エラスティック)サイズ・2カラム・反転配置 |
| elastic | triple | normal | 可変(エラスティック)サイズ・3カラム・通常配置 |
| elastic | triple | invert | 可変(エラスティック)サイズ・3カラム・反転配置 |
可変(リキッド)サイズは、画面サイズに応じて幅が伸縮します。可変(エラスティック)サイズは、文字サイズに応じて幅が伸縮します。 通常配置はサブブロックが右側、反転配置はサブブロックが左側に来ます。1カラムの場合には、配置方法を指定するクラス名は追加できません。
<body class="{home_id} liquid single">
<body class="{home_id} fixed double reverse">
<body class="{home_id} liquid triple normal">
Geeklog Rの標準テーマ「Revize」では、通常のCSSファイル群に加えて、色に関わるスタイルのみをカラースキームモジュール(public_html/layout/Revize/css/module/color.css)として抜き出しています(このモジュールは標準で読み込まれます)。 このモジュールをカスタマイズすることによって、簡単にテーマのカラースキームを変更することができます。
テンプレート(thtml)ファイルには以下のような形式でコメントを記述しています。
<!-- THTML:ディレクトリ名/ファイル名.thtml { -->
～
<!-- } THTML:ディレクトリ名/ファイル名.thtml -->
<!-- PKG:パッケージ名 -->
<!-- LANG:言語名 -->
CSSファイルの構成については、ディレクトリ・ファイル構成をご覧ください。 CSSファイルは以下の順序でカスケーディングするようになっています。
import.cssはheader.thtmlから読み込まれるインポート用のCSSファイルです。element.css, common.css, layout.cssはRevizeの利用に必須のCSSファイルです。module.cssでは、必要に応じて読み込ませるCSSファイルを読み込んでいます。標準では全てのモジュールを読み込むようになっています。
module.cssで読み込まれるcustom.cssを利用して、CSSの特徴であるカスケーディングを活かしてカスタマイズを行うことができます。変更部分をcustom.cssに分離するため、カスタマイズしたテーマの保守・管理性も高まります。
この方法は、Revizeのバージョンアップ等によって、custom.css以外のCSSファイルを入れ替えた場合にはその影響を強く受けます。プロパティ単位での微細な変更には強くなりますが、規則集合単位での大幅な変更には弱くなります。 Revizeの変更による影響を避けるには、継承元となるCSSファイルを直接編集してください。この場合、プロパティ単位での微細な変更には弱くなりますが、規則集合単位での大幅な変更には強くなります。
オーバーライド機能を利用することで、Revizeをベースとしたテーマを比較的簡単に作成することができます(オーバーライド機能の概要についてはテーマのOverRideをご覧ください)。 Geeklog Rでは、/public_html/layout/CustomTheme/がオーバーライド機能を利用したテーマの雛型になっています。以下の手順でオーバーライド機能を利用したテーマを作成することができます。
Revizeをベースにしたオーバーライド機能でのテーマの作成・カスタマイズは、Revizeのファイル内容の変更による影響を受けます。 Revizeの変更による影響を避けたい場合には、オーバーライド機能を利用しないで/public_html/layout/Revize/の内容をコピーしたものをベースに作成・カスタマイズしてください(その場合も3の関数名の変更は必要になります)。
function CustomTheme_startBlock( $title='', $helpfile='', $template='blockheader.thtml' )
{
global $_CONF;
$function = $_CONF['r_theme_base'] . '_startBlock';
if( function_exists( $function ))
{
return $function( $title, $helpfile, $template );
}
}
function テーマ名_startBlock( $title='', $helpfile='', $template='blockheader.thtml' )
{
global $_CONF;
$function = $_CONF['r_theme_base'] . '_startBlock';
if( function_exists( $function ))
{
return $function( $title, $helpfile, $template );
}
}