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

TOP » xpwiki » スタイルシートについて » Ver 3.42以前

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

このページは、Ver 3.21 以降の xpWiki について書かれています。Ver 3.20.1 以前については「スタイルシートについて​/Ver 3.20.1以前」のページをご覧ください。

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 は、https://hpwb.net/2LQjv6 (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 ;
}
Page Top

ブロック表示用のスタイルシート anchor.png Edit

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

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

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

Everything is expanded.Everything is shortened.
 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 を使ったセクションより後に書くことを忘れないでください。

Page Top

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

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


Front page   Edit Freeze Diff Backup Upload Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 134, today: 1, yesterday: 0
Princeps date: 2007-12-09 (Sun) 17:15:52
Last-modified: 2007-12-09 (Sun) 17:15:52 (JST) (5315d) by nao-pon
このページのTopへ
メインメニュー
ログイン

ユーザー名:


パスワード:





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

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

もっと...
サイト情報