このページは、Ver 3.45 以降の xpWiki について書かれています。Ver 3.44 以前については以下のページをご覧ください。
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 の読み込み順は次のようになります。
次に、例えば<h>タグの色を #9acd32(yellowgreen) に変えたい場合について説明します。
次の内容の main.css を スキンに関わらず適用したい場合は、
"XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/"
にアップロードし、default スキンにのみ適用したい場合は、
"XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/"
にアップロードします。
$class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。(モジュールディレクトリ名が xpwiki ならば、"div.xpwiki_xpwiki")
ちなみに、このサイトの xpWiki の カスタマイズ CSS は、 (xoops.hypweb.net) こんな感じです。
プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。
プラグインが独自に読み込むスタイルシートも、
XOOPS_TRUST_PATH/modules/xpwiki/skin/css
ディレクトリにあります。基本的に プラグイン名.css となっています。
これらのCSSも main.css と同様に上書きすることができます。
各ページにファイル名 style.css として、CSSファイルを添付することで、特定のスタイルシートをそのページに適用することができます。
また、下層ページにもそのスタイルシートが適用(継承)されます。
このページには以下のスタイルシートが添付されています。
1
2
3
| - | ! |
|
適用した ページ CSS を変更するには、変更した style.css を再度アップロードして下さい。
また、ページ CSS を解除するには、改行のみの style.css をアップロードして下さい。
ブロック表示やレンダラーモードでのみ特定のCSSを適用したい場合もあると思います。
ブロックモードは _block 、レンダラーモードは _render を読み込むCSSのファイル名に付け加えたCSSファイルを main.css と同様に配置します。
読み込むファイルが main.css の場合、ブロック表示用が main_block.css レンダラー用が main_render.css となります。
例えば、デフォルトのスキン「default」のブロック用 main.css の読み込み順は次のようになります。
また、プラグインが読み込む CSS ファイルについても同様に配置し、適用できます。
ぺージ情報 | |
---|---|
ぺージ名 : | スタイルシートについて |
ページ別名 : | 未設定 |
ページオーナー : | nao-pon |
閲覧可 | |
グループ : | すべての訪問者 |
ユーザー : | すべての訪問者 |
編集可 | |
グループ : | すべての訪問者 |
ユーザー : | すべての訪問者 |