ページへ戻る
− Links
印刷
スタイルシートについて
の編集 ::
XOOPS マニア
xpwiki
:
スタイルシートについて
の編集
# c2c74035 の編集
ページ内容:
** 必ず読み込まれる CSS (main.css) [#c2c74035] xpWiki では、デフォルトの表示状態(defaultスキン)でのCSSをXOOPS_TRUST_PATH 側に持っています。ただ、CSSを独自にカスタマイズした場合に、バージョンアップするとカスタマイズした分が元に戻ってしまいます。 それでは具合が悪いので、スタイルシート(CSS)のオーバーライト(上書き)を取り入れています。 xpWikiが読み込むCSSの実体は、&br; XOOPS_TRUST_PATH/modules/xpwiki/skin/css&br; ディレクトリにあります。 ページを表示する場合に必ず読み込まれる CSS は main.css (media="all") と main_print.css (media="print") です。 この main.css を上書きするためには、&br; XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/css ディレクトリに、main.css というファイル名でアップロードします。 さらに、スキンにより上書きすることができます。そのためには、&br; XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/[スキン名] ディレクトリに、main.css というファイル名でアップロードします。 まとめると、デフォルトのスキン「default」における main.css の読み込み順は次のようになります。 + XOOPS_TRUST_PATH/modules/xpwiki/skin/css/main.css + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css + XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css 次に、例えば<h>タグの色を #9acd32(yellowgreen) に変えたい場合について説明します。 次の内容の main.css を スキンに関わらず適用したい場合は、&br; "XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/"&br; にアップロードし、default スキンにのみ適用したい場合は、&br; "XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/"&br; にアップロードします。 #code(css){{ $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://xoops.hypweb.net/modules/xpwiki/skin/css/main.css こんな感じです。
編集の要約:
Q & A 認証:
ページ更新時は次の質問にお答えください。(プレビュー時は必要ありません)
Q:
「京都」の読みがな?(ひらがなで)
A:
お名前:
タイムスタンプを変更しない
テキスト整形のルールを表示する
[1]
Links list
(This host) = https://xoops.hypweb.net
(This host)
/modules/xpwiki/?cmd=edit&help=true&page=%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%A4%CB%A4%C4%A4%A4%A4%C6