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

17年6月27日(Tue) 9時06分
TOP » xpWiki::Dev » スタイルシートについて » Ver 3.44以前

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

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

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 は、http://hpwb.net/2LQjv6 こんな感じです。

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を適用したい場合もあると思います。

ブロックモードは _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_block.css
  3. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main_block.css

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

Page Top

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

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


新しくコメントをつける

題名
ゲスト名
投稿本文

より詳細なコメント入力フォームへ

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

パスワード:

オートログイン

Basic 認証 | SSLログイン

新規登録 | パスワード紛失



メインメニュー
付箋機能 (xpwiki)
付箋メニュー 
付箋の編集
文字色: 背景色:
お名前:  線接続id:
 
MenuBar (xpwiki)
ブックマーク
オンサイトブックマークは
ログインするとご利用になれます
[ログインする]
サイト内 Wiki
☆ 検索 ☆



高度な検索(サイト内)
FireFox検索プラグイン
オンライン状況
合計 53 人がオンライン中 :-)
(xpWiki::Dev : 5 人)

登録ユーザ: 0 & ゲスト: 53

もっと...
サイト情報
管理人

nao-pon
 

登録ユーザ数: 4440


Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター
Amazon.co.jpアソシエイト
現在ページのQRコード
現在ページのQRコード
[携帯対応]
参照元情報