hypweb.net
XOOPSマニア  最新情報のRSS(サイト全体)
[ 自宅サーバーWebRing |ID=54 前後5表示乱移動サイト一覧 ]

TOP » xpwiki » スタイルシートについて

スタイルシートについて anchor.png Edit

このページは、Ver 3.45 以降の xpWiki について書かれています。Ver 3.44 以前については以下のページをご覧ください。

Page Top

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

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/"
にアップロードします。

Everything is expanded.Everything is shortened.
 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) こんな感じです。

Page Top

プラグインが使用するCSS anchor.png Edit

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

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

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

Page Top

ページ毎のスタイルシート anchor.png Edit

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

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

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

Everything is expanded.Everything is shortened.
1
2
3
-
|
!
$class div.body {
    background : url(../image/HowToCSS.gif) no-repeat fixed right 200px ;
}

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

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

Page Top

ブロック表示およびレンダラー用のスタイルシート anchor.png Edit

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

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

読み込むファイルが main.css の場合、ブロック表示用が main_block.css レンダラー用が main_render.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
  4. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main_block.css
  5. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main_block.css

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

Page Top

ブロックの CSS を xpWiki と完全に切り離す方法 anchor.png Edit

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

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

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

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

CSS内での相対パスについて anchor.png Edit

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


*1 そのブロックで使用しているプラグインによって、表示が乱れることがあります。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 527, today: 1, yesterday: 0
初版日時: 2007-01-06 (土) 15:22:34
最終更新: 2007-12-10 (月) 09:06:35 (JST) (5953d) by nao-pon
このページのTopへ
メインメニュー
ログイン

ユーザー名:


パスワード:





パスワード紛失  |新規登録
オンライン状況
392 人のユーザが現在オンラインです。 (8 人のユーザが xpwiki を参照しています。)

登録ユーザ: 0
ゲスト: 392

もっと...
サイト情報