6: 2007-10-21 (日) 11:16:20 nao-pon |
現: 2007-12-10 (月) 09:06:35 nao-pon |
| + | #contents |
| * スタイルシートについて [#ua97f3ce] | | * スタイルシートについて [#ua97f3ce] |
- | このページは、Ver 3.21 以降の xpWiki について書かれています。Ver 3.20.1 以前については「[[スタイルシートについて/Ver 3.20.1以前]]」のページをご覧ください。 | + | このページは、Ver 3.45 以降の xpWiki について書かれています。Ver 3.44 以前については以下のページをご覧ください。 |
| | | |
- | #contents | + | #ls2(,pagename,reverse) |
| | | |
| ** 必ず読み込まれる CSS (main.css) [#c2c74035] | | ** 必ず読み込まれる CSS (main.css) [#c2c74035] |
| にアップロードします。 | | にアップロードします。 |
| | | |
- | #code(php){{ | + | #code(css){{ |
| $class h1, | | $class h1, |
| $class h2 { | | $class h2 { |
| | | |
| $class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。(モジュールディレクトリ名が xpwiki ならば、"div.xpwiki_xpwiki") | | $class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。(モジュールディレクトリ名が xpwiki ならば、"div.xpwiki_xpwiki") |
| + | |
| + | ちなみに、このサイトの xpWiki の カスタマイズ CSS は、http://xoops.hypweb.net/modules/xpwiki/skin/css/main.css こんな感じです。 |
| | | |
| ** プラグインが使用するCSS [#i8f2a9b2] | | ** プラグインが使用するCSS [#i8f2a9b2] |
| }} | | }} |
| | | |
- | ** ブロック表示用のスタイルシート [#k436b564] | + | 適用した ページ CSS を変更するには、変更した style.css を再度アップロードして下さい。 |
| | | |
- | ブロック表示される時のみ特定のCSSを適用したい場合もあると思います。 | + | また、ページ CSS を解除するには、''&font(Red){改行のみの};'' style.css をアップロードして下さい。 |
| | | |
- | ページがブロックに表示される場合は、その内容は <div class="xpwiki_b_[ディレクトリ名]"></div> で囲まれますので、html 側の各CSSにクラス指定子をベタ書きしてブロックのみに適用することができます。 | + | ** ブロック表示およびレンダラー用のスタイルシート [#k436b564] |
| | | |
- | 例えば、xpwiki ディレクトリにインストールされた、xpwiki のブロック表示の <h>タグの色を変えたい場合は、次のように main.css に書くことができます。 | + | ブロック表示やレンダラーモードでのみ特定のCSSを適用したい場合もあると思います。 |
| | | |
- | #code(css){{ | + | ブロックモードは _block 、レンダラーモードは _render を読み込むCSSのファイル名に付け加えたCSSファイルを main.css と同様に配置します。 |
- | div.xpwiki_b_xpwiki h1, | + | |
- | div.xpwiki_b_xpwiki h2 { | + | 読み込むファイルが main.css の場合、ブロック表示用が main_block.css レンダラー用が main_render.css となります。 |
- | background-color:#d8bfd8; | + | |
- | } | + | 例えば、デフォルトのスキン「default」のブロック用 main.css の読み込み順は次のようになります。 |
- | div.xpwiki_b_xpwiki h3 { | + | |
- | border-bottom: 3px solid #d8bfd8; | + | + XOOPS_TRUST_PATH/modules/xpwiki/skin/css/main.css |
- | border-top: 1px solid #d8bfd8; | + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css |
- | border-left: 10px solid #d8bfd8; | + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css |
- | border-right: 5px solid #d8bfd8; | + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main_block.css |
- | } | + | + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main_block.css |
- | div.xpwiki_b_xpwiki h4 { | + | |
- | border-left: 18px solid #d8bfd8; | + | また、プラグインが読み込む CSS ファイルについても同様に配置し、適用できます。 |
- | } | + | |
- | }} | + | *** ブロックの CSS を xpWiki と完全に切り離す方法 [#t31e33f0] |
| + | |
| + | XOOPS のブロック管理のブロック編集にて、そのブロックを包む <DIV> のクラス名と、読み込む CSS ファイルを設定することができます。((そのブロックで使用しているプラグインによって、表示が乱れることがあります。)) |
| + | |
| + | xpWiki の CSS の影響を完全に切り離したい場合は、<DIV>クラス名に別のクラス名を指定してください。 |
| + | |
| + | 読み込む CSS ファイルの変更は、若干複雑です。 |
| + | |
| + | - <DIV>クラス名を変更しない場合、読み込む CSS ファイル名を変えても、CSS 定義が後で読み込まれる他のブロックにて上書きされる可能性があります。 |
| + | - 空白(ファイルを指定しない)にすると、CSSは読み込まれません。ただし、<DIV>クラス名を指定していないと、他のブロックで xpWiki の CSS が読み込まれると、xpWiki の CSS が適用されます。 |
| + | |
| + | ** CSS内での相対パスについて [#s5749543] |
| | | |
- | ただし、$class を使ったセクションより後に書くことを忘れないでください。 | + | 背景画像などに、URLを指定したい場合に相対パスを使う場合は、XOOPS_URL/modules/[DirName]/skin/loader.php が 自己CSS のパスになりますので、この位置から計算して相対パスを指定する必要があります。 |