====== テーマのカスタマイズ・作成 ====== ===== レイアウトのカスタマイズ ===== 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カラムの場合には、配置方法を指定するクラス名は追加できません。 ==== カスタマイズ例(リキッドサイズ・1カラム) ==== ==== カスタマイズ例(固定サイズ・2カラム・反転配置) ==== ==== カスタマイズ例(リキッドサイズ・3カラム・通常配置) ==== ===== 色のカスタマイズ ===== Geeklog Rの標準テーマ「Revize」では、通常のCSSファイル群に加えて、色に関わるスタイルのみをカラースキームモジュール(public_html/layout/Revize/css/module/color.css)として抜き出しています(このモジュールは標準で読み込まれます)。このモジュールをカスタマイズすることによって、簡単にテーマのカラースキームを変更することができます。 ===== テンプレート(thtml)ファイルのコメント ===== テンプレート(thtml)ファイルには以下のような形式でコメントを記述しています。 ==== テンプレートファイル名 ==== ～ ==== パッケージに依存する部分 ==== ==== 言語に依存する部分 ==== ===== CSSファイル構成とカスケーディング ===== CSSファイルの構成については、[[http://geeklog-r.net/wiki/%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%83%BB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A7%8B%E6%88%90|ディレクトリ・ファイル構成]]をご覧ください。 CSSファイルは以下の順序でカスケーディングするようになっています。 -import.css(インポート用CSSファイル: header.thtml内で読み込まれます。) -element.css(HTML要素用のCSSファイル) -common.css(共通のスタイルをまとめたCSSファイル) -layout.css(レイアウト用のCSSファイル) -module.css(モジュールのインポートCSSファイル) -moduleディレクトリ内のCSSファイル *layout.css(拡張レイアウトモジュール) *color.css(カラースキームモジュール) *calendar.css(calendarプラグイン用のCSSファイル) *mycal.css(mycalブロック用のCSSファイル) *nmoxmenu.css(nmoxmenuプラグイン用のCSSファイル) *polls.css(pollsプラグイン用のCSSファイル) *themetester.css(themetesterブロック用のCSSファイル) *custom.css(カスタマイズ用のCSSファイル) import.cssはheader.thtmlから読み込まれるインポート用のCSSファイルです。element.css, common.css, layout.cssはRevizeの利用に必須のCSSファイルです。module.cssでは、必要に応じて読み込ませるCSSファイルを読み込んでいます。標準では全てのモジュールを読み込むようになっています。 ===== カスタマイズ用のCSSファイルを利用したカスタマイズ ===== module.cssで読み込まれるcustom.cssを利用して、CSSの特徴であるカスケーディングを活かしてカスタマイズを行うことができます。変更部分をcustom.cssに分離するため、カスタマイズしたテーマの保守・管理性も高まります。 -各CSSファイルから変更したい箇所をcustom.css内にコピー&ペーストする。 -セレクタのみを残して宣言(プロパティと値)を削除する。 -上書きしたいスタイルを記述していく。この方法は、Revizeのバージョンアップ等によって、custom.css以外のCSSファイルを入れ替えた場合にはその影響を強く受けます。プロパティ単位での微細な変更には強くなりますが、規則集合単位での大幅な変更には弱くなります。 Revizeの変更による影響を避けるには、継承元となるCSSファイルを直接編集してください。この場合、プロパティ単位での微細な変更には弱くなりますが、規則集合単位での大幅な変更には強くなります。 ===== オーバーライド機能を利用したテーマの作成 ===== オーバーライド機能を利用することで、Revizeをベースとしたテーマを比較的簡単に作成することができます(オーバーライド機能の概要については[[http://wiki.geeklog.jp/index.php/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AEOverRide|テーマのOverRide]]をご覧ください)。 Geeklog Rでは、/public_html/layout/CustomTheme/がオーバーライド機能を利用したテーマの雛型になっています。以下の手順でオーバーライド機能を利用したテーマを作成することができます。 -/public_html/layout/CustomThemeを作成するテーマの名前に変更する -/public_html/layout/テーマ名/functions.php内の$_CONF['r_theme_base']にベースとなるテーマ名(「Revize」)を設定する -/public_html/layout/テーマ名/functions.php内の**全ての**関数名を「CustomTheme_～」から「テーマ名_～」に変更する -修正が必要なテンプレートファイルがあれば、そのファイルを/public_html/layout/Revize/～から/public_html/layout/テーマ名/～にコピーする -テーマのCSSファイルを作成・編集する(/public_html/layout/テーマ名/css/custom.css等) Revizeをベースにしたオーバーライド機能でのテーマの作成・カスタマイズは、Revizeのファイル内容の変更による影響を受けます。 Revizeの変更による影響を避けたい場合には、オーバーライド機能を利用しないで/public_html/layout/Revize/の内容をコピーしたものをベースに作成・カスタマイズしてください(その場合も3の関数名の変更は必要になります)。 ==== functions.php内の関数の変更前 ==== 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 ); } } ==== functions.php内の関数の変更後 ==== function テーマ名_startBlock( $title='', $helpfile='', $template='blockheader.thtml' ) { global $_CONF; $function = $_CONF['r_theme_base'] . '_startBlock'; if( function_exists( $function )) { return $function( $title, $helpfile, $template ); } }