4: 2007-09-17 (月) 14:51:06 nao-pon[4RpXGVpYNVI]   |
5: 2007-10-09 (火) 13:28:01 nao-pon |
| | * スタイルシートについて [#ua97f3ce] | | * スタイルシートについて [#ua97f3ce] |
| | + | このページは、Ver 3.21 以降の xpWiki について書かれています。Ver 3.20.1 以前については「[[スタイルシートについて/Ver 3.20.1以前]]」のページをご覧ください。 |
| | + | |
| | #contents | | #contents |
| | | | |
| - | ** defaltスキンのCSS [#a85cd60a] | + | ** 必ず読み込まれる CSS (main.css) [#c2c74035] |
| | | | |
| | xpWiki では、デフォルトの表示状態(defaultスキン)でのCSSをXOOPS_TRUST_PATH 側に持っています。ただ、CSSを独自にカスタマイズした場合に、バージョンアップするとカスタマイズした分が元に戻ってしまいます。 | | xpWiki では、デフォルトの表示状態(defaultスキン)でのCSSをXOOPS_TRUST_PATH 側に持っています。ただ、CSSを独自にカスタマイズした場合に、バージョンアップするとカスタマイズした分が元に戻ってしまいます。 |
| | それでは具合が悪いので、スタイルシート(CSS)のオーバーライト(上書き)を取り入れています。 | | それでは具合が悪いので、スタイルシート(CSS)のオーバーライト(上書き)を取り入れています。 |
| | | | |
| - | まずは、defaultスキンを使っている場合について説明します。 | + | xpWikiが読み込むCSSの実体は、&br; |
| | + | XOOPS_TRUST_PATH/modules/xpwiki/skin/css&br; |
| | + | ディレクトリにあります。 |
| | | | |
| - | オーバーライトするために修正すべきファイルは、XOOPS_ROOT_PATH/modules/[module_dir]/skin/default/pukiwiki.css.php です。 | + | ページを表示する場合に必ず読み込まれる CSS は main.css (media="all") と main_print.css (media="print") です。 |
| | | | |
| - | pukiwiki.css.php は次のような内容になっています。 | + | この main.css を上書きするためには、&br; |
| | + | XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/css ディレクトリに、main.css というファイル名でアップロードします。 |
| | | | |
| - | #code(php){{ | + | さらに、スキンにより上書きすることができます。そのためには、&br; |
| - | <?php | + | XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/[スキン名] ディレクトリに、main.css というファイル名でアップロードします。 |
| - | define('_LEGACY_PREVENT_LOAD_CORE_', TRUE); // for XOOPS Cube Legacy | + | |
| - | $xoopsOption['nocommon'] = true; | + | |
| - | require '../../../../mainfile.php' ; | + | |
| - | if( ! defined( 'XOOPS_TRUST_PATH' ) ) die( 'set XOOPS_TRUST_PATH in mainfile.php' ) ; | + | |
| | | | |
| - | require '../../mytrustdirname.php' ; // set $mytrustdirname | + | まとめると、デフォルトのスキン「default」における main.css の読み込み順は次のようになります。 |
| | | | |
| - | // Base | + | + XOOPS_TRUST_PATH/modules/xpwiki/skin/css/main.css |
| - | $base = isset($_GET['base']) ? "_".preg_replace("/[^\w-]+/","",$_GET['base']) : ''; | + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css |
| - | $class = "div.xpwiki".$base; | + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css |
| | | | |
| - | $overwrite = <<<EOD | + | 次に、例えば<h>タグの色を #9acd32(yellowgreen) に変えたい場合について説明します。 |
| - | /* Here is an overwriting section. | + | 次の内容の main.css を スキンに関わらず適用したい場合は、&br; |
| - | * Please use $class in selector. */ | + | "XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/"&br; |
| - | | + | にアップロードし、default スキンにのみ適用したい場合は、&br; |
| - | EOD; | + | "XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/"&br; |
| - | | + | にアップロードします。 |
| - | include XOOPS_TRUST_PATH.'/modules/'.$mytrustdirname.'/skin/'.basename(__FILE__); | + | |
| - | ?> | + | |
| - | }} | + | |
| - | | + | |
| - | この中で、CSSを記述する箇所は | + | |
| - | #code(php){{ | + | |
| - | $overwrite = <<<EOD | + | |
| - | /* Here is an overwriting section. | + | |
| - | * Please use $class in selector. */ | + | |
| - | | + | |
| - | EOD; | + | |
| - | }} | + | |
| - | です。 | + | |
| - | | + | |
| - | 例えば<h>タグの色を変えたい場合は、次のようになります。 | + | |
| | | | |
| | #code(php){{ | | #code(php){{ |
| - | $overwrite = <<<EOD | |
| - | /* Here is an overwriting section. | |
| - | * Please use $class in selector. */ | |
| | $class h1, | | $class h1, |
| | $class h2 { | | $class h2 { |
| | border-left: 18px solid #9ACD32; | | border-left: 18px solid #9ACD32; |
| | } | | } |
| - | EOD; | |
| | }} | | }} |
| | | | |
| - | $class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。 | + | $class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。(モジュールディレクトリ名が xpwiki ならば、"div.xpwiki_xpwiki") |
| | | | |
| | ** プラグインが使用するCSS [#i8f2a9b2] | | ** プラグインが使用するCSS [#i8f2a9b2] |
| | プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。 | | プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。 |
| | | | |
| - | プラグインが独自に読み込むスタイルシートは、&br; | + | プラグインが独自に読み込むスタイルシートも、&br; |
| | XOOPS_TRUST_PATH/modules/xpwiki/skin/css &br; | | XOOPS_TRUST_PATH/modules/xpwiki/skin/css &br; |
| - | ディレクトリにあります。 | + | ディレクトリにあります。基本的に プラグイン名.css となっています。 |
| | | | |
| - | これらのCSSをオーバーライトするには、CSSを記述した同名のファイルを &br;XOOPS_ROOT_PATH/modules/[module_dir]/skin/css &br;に置きます。 . | + | これらのCSSも main.css と同様に上書きすることができます。 |
| | | | |
| | ** ページ毎のスタイルシート [#w72894c1] | | ** ページ毎のスタイルシート [#w72894c1] |
下位
ページへ戻る
リンク元
メインメニュー
