スタイルシートについて

必ず読み込まれる CSS (main.css)

xpWiki では、デフォルトの表示状態(defaultスキン)でのCSSをXOOPS_TRUST_PATH 側に持っています。ただ、CSSを独自にカスタマイズした場合に、バージョンアップするとカスタマイズした分が元に戻ってしまいます。

それでは具合が悪いので、スタイルシート(CSS)のオーバーライト(上書き)を取り入れています。

xpWikiが読み込むCSSの実体は、
XOOPS_TRUST_PATH/modules/xpwiki/skin/css
ディレクトリにあります。

ページを表示する場合に必ず読み込まれる CSS は main.css (media="all") と main_print.css (media="print") です。

この main.css を上書きするためには、
XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/css ディレクトリに、main.css というファイル名でアップロードします。

さらに、スキンにより上書きすることができます。そのためには、
XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/[スキン名] ディレクトリに、main.css というファイル名でアップロードします。

まとめると、デフォルトのスキン「default」における main.css の読み込み順は次のようになります。

1. XOOPS_TRUST_PATH/modules/xpwiki/skin/css/main.css
2. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css
3. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css

次に、例えば<h>タグの色を #9acd32(yellowgreen) に変えたい場合について説明します。 次の内容の main.css を スキンに関わらず適用したい場合は、
"XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/"
にアップロードし、default スキンにのみ適用したい場合は、
"XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/"
にアップロードします。

1 2 3 4 5 6 7 8 9 10 11 12 13

- | ! - | | | | ! - | !

$class h1, $class h2 { background-color:#9ACD32; } $class h3 { border-bottom: 3px solid #9ACD32; border-top: 1px solid #9ACD32; border-left: 10px solid #9ACD32; border-right: 5px solid #9ACD32; } $class h4 { border-left: 18px solid #9ACD32; }

$class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。(モジュールディレクトリ名が xpwiki ならば、"div.xpwiki_xpwiki")

ちなみに、このサイトの xpWiki の カスタマイズ CSS は、 (xoops.hypweb.net) こんな感じです。

プラグインが使用するCSS

プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。

プラグインが独自に読み込むスタイルシートも、
XOOPS_TRUST_PATH/modules/xpwiki/skin/css
ディレクトリにあります。基本的に プラグイン名.css となっています。

これらのCSSも main.css と同様に上書きすることができます。

ページ毎のスタイルシート

各ページにファイル名 style.css として、CSSファイルを添付することで、特定のスタイルシートをそのページに適用することができます。

また、下層ページにもそのスタイルシートが適用(継承)されます。

このページには以下のスタイルシートが添付されています。

1 2 3

- | !

$class div.body { background : url(../image/HowToCSS.gif) no-repeat fixed right 200px ; }

ブロック表示用のスタイルシート

ブロック表示される時のみ特定のCSSを適用したい場合もあると思います。

ページがブロックに表示される場合は、その内容は <div class="xpwiki_b_[ディレクトリ名]"></div> で囲まれますので、html 側の各CSSにクラス指定子をベタ書きしてブロックのみに適用することができます。

例えば、xpwiki ディレクトリにインストールされた、xpwiki のブロック表示の <h>タグの色を変えたい場合は、次のように main.css に書くことができます。

1 2 3 4 5 6 7 8 9 10 11 12 13

- | ! - | | | | ! - | !

div.xpwiki_b_xpwiki h1, div.xpwiki_b_xpwiki h2 { background-color:#d8bfd8; } div.xpwiki_b_xpwiki h3 { border-bottom: 3px solid #d8bfd8; border-top: 1px solid #d8bfd8; border-left: 10px solid #d8bfd8; border-right: 5px solid #d8bfd8; } div.xpwiki_b_xpwiki h4 { border-left: 18px solid #d8bfd8; }

ただし、$class を使ったセクションより後に書くことを忘れないでください。

CSS内での相対パスについて

背景画像などに、URLを指定したい場合に相対パスを使う場合は、XOOPS_URL/modules/[DirName]/skin/loader.php が 自己CSS のパスになりますので、この位置から計算して相対パスを指定する必要があります。