2: 2007-07-09 (月) 16:10:44 nao-pon |
現: 2007-12-10 (月) 09:06:35 nao-pon |
- | * スタイルシートについて [#ua97f3ce] | |
| #contents | | #contents |
| + | * スタイルシートについて [#ua97f3ce] |
| + | このページは、Ver 3.45 以降の xpWiki について書かれています。Ver 3.44 以前については以下のページをご覧ください。 |
| + | |
| + | #ls2(,pagename,reverse) |
| | | |
- | ** 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; |
| + | "XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/"&br; |
| + | にアップロードします。 |
| | | |
- | EOD; | + | #code(css){{ |
- | | + | |
- | 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){{ | + | |
- | $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") |
| + | |
| + | ちなみに、このサイトの xpWiki の カスタマイズ CSS は、http://xoops.hypweb.net/modules/xpwiki/skin/css/main.css こんな感じです。 |
| | | |
| ** プラグインが使用するCSS [#i8f2a9b2] | | ** プラグインが使用するCSS [#i8f2a9b2] |
| プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。 | | プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。 |
| | | |
- | プラグインが独自に読み込むスタイルシートは、&br; | + | プラグインが独自に読み込むスタイルシートも、&br; |
- | XOOPS_TRUST_PATH/modules/[module_dir]/skin/css &br; | + | XOOPS_TRUST_PATH/modules/xpwiki/skin/css &br; |
- | ディレクトリにあります。 | + | ディレクトリにあります。基本的に プラグイン名.css となっています。 |
| + | |
| + | これらのCSSも main.css と同様に上書きすることができます。 |
| + | |
| + | ** ページ毎のスタイルシート [#w72894c1] |
| + | |
| + | 各ページにファイル名 style.css として、CSSファイルを添付することで、特定のスタイルシートをそのページに適用することができます。 |
| + | |
| + | また、下層ページにもそのスタイルシートが適用(継承)されます。 |
| + | |
| + | このページには以下のスタイルシートが添付されています。 |
| + | |
| + | #code(css){{ |
| + | $class div.body { |
| + | background : url(../image/HowToCSS.gif) no-repeat fixed right 200px ; |
| + | } |
| + | }} |
| + | |
| + | 適用した ページ CSS を変更するには、変更した style.css を再度アップロードして下さい。 |
| + | |
| + | また、ページ CSS を解除するには、''&font(Red){改行のみの};'' style.css をアップロードして下さい。 |
| + | |
| + | ** ブロック表示およびレンダラー用のスタイルシート [#k436b564] |
| + | |
| + | ブロック表示やレンダラーモードでのみ特定のCSSを適用したい場合もあると思います。 |
| + | |
| + | ブロックモードは _block 、レンダラーモードは _render を読み込むCSSのファイル名に付け加えたCSSファイルを main.css と同様に配置します。 |
| + | |
| + | 読み込むファイルが main.css の場合、ブロック表示用が main_block.css レンダラー用が main_render.css となります。 |
| + | |
| + | 例えば、デフォルトのスキン「default」のブロック用 main.css の読み込み順は次のようになります。 |
| + | |
| + | + XOOPS_TRUST_PATH/modules/xpwiki/skin/css/main.css |
| + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css |
| + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css |
| + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main_block.css |
| + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main_block.css |
| + | |
| + | また、プラグインが読み込む CSS ファイルについても同様に配置し、適用できます。 |
| + | |
| + | *** ブロックの CSS を xpWiki と完全に切り離す方法 [#t31e33f0] |
| + | |
| + | XOOPS のブロック管理のブロック編集にて、そのブロックを包む <DIV> のクラス名と、読み込む CSS ファイルを設定することができます。((そのブロックで使用しているプラグインによって、表示が乱れることがあります。)) |
| + | |
| + | xpWiki の CSS の影響を完全に切り離したい場合は、<DIV>クラス名に別のクラス名を指定してください。 |
| + | |
| + | 読み込む CSS ファイルの変更は、若干複雑です。 |
| + | |
| + | - <DIV>クラス名を変更しない場合、読み込む CSS ファイル名を変えても、CSS 定義が後で読み込まれる他のブロックにて上書きされる可能性があります。 |
| + | - 空白(ファイルを指定しない)にすると、CSSは読み込まれません。ただし、<DIV>クラス名を指定していないと、他のブロックで xpWiki の CSS が読み込まれると、xpWiki の CSS が適用されます。 |
| + | |
| + | ** CSS内での相対パスについて [#s5749543] |
| | | |
- | これらのCSSをオーバーライトするには、CSSを記述した同名のファイルを &br;XOOPS_ROOT_PATH/modules/[module_dir]/skin/css &br;に置きます。 . | + | 背景画像などに、URLを指定したい場合に相対パスを使う場合は、XOOPS_URL/modules/[DirName]/skin/loader.php が 自己CSS のパスになりますので、この位置から計算して相対パスを指定する必要があります。 |