ページへ戻る

− Links

− Comments

 印刷 

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

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

ページ内コンテンツ
  • スタイルシートについて
    • 必ず読み込まれる CSS (main.css)
    • プラグインが使用するCSS
    • ページ毎のスタイルシート
    • ブロック表示およびレンダラー用のスタイルシート
      • ブロックの CSS を xpWiki と完全に切り離す方法
    • CSS内での相対パスについて

スタイルシートについて anchor.png[1] Edit [2]

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

Page Top

必ず読み込まれる CSS (main.css) anchor.png[7] Edit [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/"
にアップロードします。

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[3] ならば、"div.xpwiki_xpwiki")

ちなみに、このサイトの xpWiki[3] の カスタマイズ CSS は、http://hpwb.net/2LQjv6[12] こんな感じです。

Page Top

プラグインが使用するCSS anchor.png[13] Edit [14]

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

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

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

Page Top

ページ毎のスタイルシート anchor.png[15] Edit [16]

各ページにファイル名 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[17] Edit [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 ファイルについても同様に配置し、適用できます。

Page Top

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

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

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

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

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

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

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


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

コメント一覧

投稿ツリー


EVINFO  投稿日時 2007-9-30 17:06

こんにちは。

ブロックのスタイルシートのカスタマイズについても、お教えいただけると助かります。

nao-pon  投稿日時 2007-10-9 13:32

遅くなりましたが、ブロックのスタイルシートについても説明を加えておきました。 ;-)

kazu   投稿日時 2007-10-20 23:26

はじめまして
教えていただきたいのですが
background-color:#d8bfd8;では、バックの色を決めるのですよね

淡色ではなく模様の入ったバックを作成したいのですが
(:#d8bfd8;)の部分を変えればいいのでしょうか?
又どのように指定すれば変えれるのでしょうか?
よろしくお願いいたします。

nao-pon  投稿日時 2007-10-21 11:47

背景画像を指定したいということですよね。

ただ、相対パスにて URL を指定する場合は、若干注意が必要です。

スタイルシートについて#s5749543 をご覧ください。 :-)

kazu   投稿日時 2007-10-21 16:45

nao-ponさん!すぐにわかりました!^^
ありがとうございました〜^^

又何かありましたらよろしくお願いいたしますね。

EVINFO  投稿日時 2007-11-27 1:43

ありがとうございます。

ただ、いろいろ試行錯誤しているのですが、未だにどうも、思い通りになっていません。

最初の、XOOPS_TRUST_PATH/modules/xpwiki/skin/css の読み込みをスキップする(読み込まない)ようにはできないでしょうか?

nao-pon  投稿日時 2007-11-28 18:08
引用:

最初の、XOOPS_TRUST_PATH/modules/xpwiki/skin/css の読み込みをスキップする(読み込まない)ようにはできないでしょうか?

できないことはないですが、問題点を具体的に上げることはできますか。 :roll:

nao-pon  投稿日時 2007-12-9 22:57
引用:

最初の、XOOPS_TRUST_PATH/modules/xpwiki/skin/css の読み込みをスキップする(読み込まない)ようにはできないでしょうか?

Ver 3.44 にて、XOOPS 管理メニューのブロックの編集にて、ブロックの DIV クラス名と読み込む CSS ファイル名を指定できるようにしてみました。 :-D

EVINFO  投稿日時 2007-12-10 7:47

わざわざ、新たに対応していただき有り難うございます。

早速、自分のサイトで確認したいのですが、なかなか時間がとれずにいて、少し落ち着いてから作業させていただきたいと思っています。

また、先日のご質問にも答えることができていません。
後日コメントさせていただきます。

取り急ぎ御礼まで。

ファンクション サイトURL  投稿日時 2014-3-18 22:27

はじめまして。
「ページ毎のスタイルシート」の項をみてやってみようとおもったのですが、
どうしてもよみこませることができません。
ftest2.page.css ftest2.style.css ftest2 style.css ftest2style.css style.css
などいろいろ名前を変えてみましたがダメでした。

(ページに色がついている部分はblock.cssで変えています。)

このサイトの例と比較すると、
こちらのサイトではmodules/xpwiki/のあとに?が入っているのが気になっています。
ページ毎にスタイルシートを設定する方法について教えてください。

使用しているのは
xpWiki 5.02.7
XC Legacyバージョン : XOOPS Cube Legacy 2.2.2
デフォルト・サイトテーマ : r_simple_blue
です。

よろしくおねがいします。

nao-pon  投稿日時 2014-3-19 1:28

ファンクション さん、こんにちは。

動作確認してみたところ、確かに style.css をアップロードしても、ページ CSS として反映されず、 style.css ファイルとして添付されてしまいますね。

どうやら、ドラッグ&ドロップのファイルアップロード機能を組み込んでから、ずっと誰にも指摘されずにバグとして存在していたようです。 :hammer:

早速、修正に入りましたので次のバージョンで修正されます。もう少々お待ちください。

今回のレポートは大変に助かりました!今後とも、よろしくお願いします。 :-)

ファンクション サイトURL  投稿日時 2014-3-19 19:33

nao-pon様。
すばやい返信ありがとうございます。バグだとわかりすっきりしました。

しばらくは
3.XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css
こちらをいじって調整することにします。

しかし、やはりページごとに設定できるとテストがやりやすく便利だとおもいますので、
次回のバージョンアップではぜひ復活させてください!

今後ともよろしくおねがいします。

nao-pon  投稿日時 2014-3-19 21:18

修正が完了しましたので、xpWiki を Version 5.02.8 とし、リリースしました。 :ok:

以下はコミットログからの引用です。


[plugin:attach] fix problem of pagecss by "style.css" upload

"style.css" をアプロードすることにより、ページ専用 CSS を適用できる機能が正常に働かなくなっていた問題の修正。

仕様変更

以前は、style.css をアップロードした場合は、ページへの添付ファイルとしては扱われず、ページ専用 CSS の設定のみ行われていましたが、今回より style.css として、ページの添付ファイルとしても保存されるようになりました。

ただし、ページ専用 CSS とページにファイルとして添付された style.css は全く別のものになりますので、ページの添付ファイルである style.css を削除しても、ページ専用 CSS には影響ありません。

目的としては、ページ専用 CSS にどのような内容が設定されるかを知ることができるように、添付ファイルとしても残すようにしました。

また、以前は CSS 中での外部サイト画像の参照部分を一律、除外していましたが、今回より管理者以外の者がアップロードした場合のみ、外部URL等を除外するようにしました。



新しくコメントをつける

題名
ゲスト名
投稿本文

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

Last-modified: 2007-12-10 (月) 09:06:35 (JST) (3541d) by nao-pon