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

TOP » xpwiki » スタイルシートについて のバックアップの現在との差分(No.6)
6: 2007-10-21 (日) 11:16:20 nao-pon ソース バックアップ No.6 を復元して編集 現: 2007-12-10 (月) 09:06:35 nao-pon ソース 編集
Line 1: Line 1:
 +#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]
Line 35: Line 36:
にアップロードします。 にアップロードします。
-#code(php){{+#code(css){{
$class h1, $class h1,
$class h2 { $class h2 {
Line 52: Line 53:
$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]
Line 77: Line 80:
}} }}
-** ブロック表示用のスタイルシート [#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 
-&nbsp;   border-top:    1px solid #d8bfd8++ XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css 
-&nbsp;   border-left:  10px solid #d8bfd8; ++ XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css 
-&nbsp;  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 { + 
-&nbsp;   border-left:  18px solid #d8bfd8+また、プラグインが読み込む CSS ファイルについても同様に配置し、適用できます。 
-} + 
-}}+*** ブロックの CSS を xpWiki と完全に切り離す方法 [#t31e33f0] 
 + 
 +XOOPS のブロック管理のブロック編集にて、そのブロックを包む &lt;DIV>; のクラス名と、読み込む CSS ファイルを設定することができます。((そのブロックで使用しているプラグインによって、表示が乱れることがあります。)) 
 + 
 +xpWiki の CSS の影響を完全に切り離したい場合は、&lt;DIV&gt;クラス名に別のクラス名を指定してください。 
 + 
 +読み込む CSS ファイルの変更は、若干複雑です。 
 + 
 +- &lt;DIV>クラス名を変更しない場合、読み込む CSS ファイル名を変えても、CSS 定義が後で読み込まれる他のブロックにて上書きされる可能性があります。 
 +- 空白(ファイルを指定しない)にすると、CSSは読み込まれません。ただし、<;DIV>クラス名を指定していないと、他のブロックで xpWiki の CSS が読み込まれると、xpWiki の CSS が適用されます。 
 + 
 +** CSS内での相対パスについて [#s5749543]
-ただし、$class を使ったセクションより後に書くことを忘れないでください。+背景画像などに、URLを指定したい場合に相対パスを使う場合は、XOOPS_URL/modules/[DirName]/skin/loader.php が 自己CSS のパスになりますので、この位置から計算して相対パスを指定する必要があります。


トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 528, today: 1, yesterday: 1
このページのTopへ
メインメニュー
ログイン

ユーザー名:


パスワード:





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

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

もっと...
サイト情報