ページへ戻る

− Links

 印刷 

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

xpwiki:スタイルシートについて/Ver 3.20.1以前
ページ内コンテンツ
  • スタイルシートについて
    • defaltスキンのCSS
    • プラグインが使用するCSS
    • ページ毎のスタイルシート

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

このページは、Ver 3.20.1 以前の xpWiki[4] について書かれています。Ver 3.21 以降については「スタイルシートについて[1]」のページをご覧ください。

Page Top

defaltスキンのCSS anchor.png[5] Edit [6]

xpWiki[4] では、デフォルトの表示状態(defaultスキン)でのCSSをXOOPS_TRUST_PATH[7] 側に持っています。ただ、CSSを独自にカスタマイズした場合に、バージョンアップするとカスタマイズした分が元に戻ってしまいます。

それでは具合が悪いので、スタイルシート(CSS)のオーバーライト(上書き)を取り入れています。

まずは、defaultスキンを使っている場合について説明します。

オーバーライトするために修正すべきファイルは、XOOPS_ROOT_PATH[8]/modules/[module_dir]/skin/default/pukiwiki[9].css.php です。

pukiwiki[9].css.php は次のような内容になっています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<?php
define('_LEGACY_PREVENT_LOAD_CORE_', TRUE); // for XOOPS Cube[10] Legacy
$xoopsOption['nocommon'] = true;
require '../../../../mainfile.php' ;
if( ! defined( 'XOOPS_TRUST_PATH[7]' ) ) die( 'set XOOPS_TRUST_PATH[7] in mainfile.php' ) ;
 
require '../../mytrustdirname.php' ; // set $mytrustdirname
 
// Base
$base   = isset($_GET['base'])   ? "_".preg_replace("/[^\w-]+/","",$_GET['base'])    : '';
$class = "div.xpwiki[4]".$base;
 
$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */
 
EOD;
 
include XOOPS_TRUST_PATH[7].'/modules/'.$mytrustdirname.'/skin/'.basename(__FILE__); 
?>

この中で、CSSを記述する箇所は

1
2
3
4
5

$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */
 
EOD;

です。

例えば<h>タグの色を変えたい場合は、次のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */
$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;
}
EOD;

$class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。

Page Top

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

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

プラグインが独自に読み込むスタイルシートは、
XOOPS_TRUST_PATH[7]/modules/xpwiki[4]/skin/css
ディレクトリにあります。

これらのCSSをオーバーライトするには、CSSを記述した同名のファイルを
XOOPS_ROOT_PATH[8]/modules/[module_dir]/skin/css
に置きます。 .

Page Top

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

各ページにファイル名 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 ;
}
.
.
.
Last-modified: 2007-09-17 (月) 14:27:56 (JST) (6066d) by nao-pon
ページ別名: 未設定
ページオーナー: nao-pon
サイト管理者: nao-pon

Links list

(This host) = https://xoops.hypweb.net

  1. (This host)/modules/xpwiki/492.html
  2. (This host)/modules/xpwiki/493.html#ua97f3ce
  3. (This host)/modules/xpwiki/?cmd=edit&page=%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%A4%CB%A4%C4%A4%A4%A4%C6%2FVer%203.20.1%B0%CA%C1%B0&paraid=ua97f3ce
  4. (This host)/modules/xpwiki/140.html
  5. (This host)/modules/xpwiki/493.html#a85cd60a
  6. (This host)/modules/xpwiki/?cmd=edit&page=%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%A4%CB%A4%C4%A4%A4%A4%C6%2FVer%203.20.1%B0%CA%C1%B0&paraid=a85cd60a
  7. (This host)/modules/xpwiki/130.html
  8. (This host)/modules/xpwiki/129.html
  9. (This host)/modules/xpwiki/89.html
  10. http://xoopscube.jp/
  11. (This host)/modules/xpwiki/493.html#i8f2a9b2
  12. (This host)/modules/xpwiki/?cmd=edit&page=%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%A4%CB%A4%C4%A4%A4%A4%C6%2FVer%203.20.1%B0%CA%C1%B0&paraid=i8f2a9b2
  13. (This host)/modules/xpwiki/493.html#w72894c1
  14. (This host)/modules/xpwiki/?cmd=edit&page=%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%A4%CB%A4%C4%A4%A4%A4%C6%2FVer%203.20.1%B0%CA%C1%B0&paraid=w72894c1