スタイルシートについて :: XOOPS マニア

必ず読み込まれる CSS (main.css) ^{[7] [8]}

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

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

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

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

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

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

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

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

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

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

プラグインが使用するCSS ^{[13] [14]}

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

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

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

ページ毎のスタイルシート ^{[15] [16]}

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

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

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

1 2 3

- | !

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

適用した ページ CSS を変更するには、変更した style.css を再度アップロードして下さい。

また、ページ CSS を解除するには、改行のみの style.css をアップロードして下さい。

ブロック表示およびレンダラー用のスタイルシート ^{[17] [18]}

ブロック表示やレンダラーモードでのみ特定のCSSを適用したい場合もあると思います。

ブロックモードは _block 、レンダラーモードは _render を読み込むCSSのファイル名に付け加えたCSSファイルを main.css と同様に配置します。

読み込むファイルが main.css の場合、ブロック表示用が main_block.css レンダラー用が main_render.css となります。

例えば、デフォルトのスキン「default」のブロック用 main.css の読み込み順は次のようになります。

1. XOOPS_TRUST_PATH^[9]/modules/xpwiki^[3]/skin/css/main.css
2. XOOPS_ROOT_PATH^[10]/modules/[インストール^[11]ディレクトリ]/skin/css/main.css
3. XOOPS_ROOT_PATH^[10]/modules/[インストール^[11]ディレクトリ]/skin/default/main.css
4. XOOPS_ROOT_PATH^[10]/modules/[インストール^[11]ディレクトリ]/skin/css/main_block.css
5. XOOPS_ROOT_PATH^[10]/modules/[インストール^[11]ディレクトリ]/skin/default/main_block.css

また、プラグインが読み込む CSS ファイルについても同様に配置し、適用できます。

ブロックの CSS を xpWiki^[3] と完全に切り離す方法 ^{[19] [20]}

XOOPS^[21] のブロック管理のブロック編集にて、そのブロックを包む <DIV> のクラス名と、読み込む CSS ファイルを設定することができます。*1

xpWiki^[3] の CSS の影響を完全に切り離したい場合は、<DIV>クラス名に別のクラス名を指定してください。

読み込む CSS ファイルの変更は、若干複雑です。

• <DIV>クラス名を変更しない場合、読み込む CSS ファイル名を変えても、CSS 定義が後で読み込まれる他のブロックにて上書きされる可能性があります。
• 空白(ファイルを指定しない)にすると、CSSは読み込まれません。ただし、<DIV>クラス名を指定していないと、他のブロックで xpWiki^[3] の CSS が読み込まれると、xpWiki^[3] の CSS が適用されます。

CSS内での相対パスについて ^{[22] [23]}

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