Nucleus(JP)フォーラム

NucleusCMS日本語版ユーザーのためのサポートフォーラムです。疑問が生じたらまずは記事検索をご利用ください。

ログインしていません。

#1 2005-08-06 05:38:30

Kirika
メンバー
From: 神奈川(横浜)
登録日: 2005-03-24
投稿: 29
ウェブサイト

Re: 本家LeafスキンのStyleSwitcherの仕組みについて

本家スキンサイトにLeafというスキンがあります。
http://skins.nucleuscms.org/blog/21
このスキンの右上に、フォントサイズを変更できるボタンが並んでいます。
これと同じようなことをしてみようと考えて、仕組みを調べてみましたが、
どうしても分からない点があるので質問投稿しました。

フォントサイズの切り替えは、styleswitcher.jsによるCSS切り替えで行われます。
styleswitcher.jsはここ↓の出典みたいです。
http://www.alistapart.com/articles/alternate/
日本語解説がこちら↓にありました。
http://www.zakimi.com/archives/2004/06/05/214447.php
この二つのサイトを読んで仕組みは理解しました(と思います)。

例えば、デフォルトのスタイルシートがbasic.cssだとして、
basic.cssをlarge.cssという名前にコピーし、
large.cssのfont-sizeの値を変更し、
styleswitcher.jsでbasic.cssとlarge.cssを切り替えれば、
フォントサイズの切り替えることが出来ます。

/* basic.css */
body {
    font-size: 12px;
    background: #FFFFFF url(back.gif) repeat-y;
    color: #000000;
    line-height: 150%;
}

/* large.css */
body {
    font-size: 14px;
    background: #FFFFFF url(back.gif) repeat-y;
    color: #000000;
    line-height: 150%;
}

ところが、Leafスキンの切り替え用スタイルシートを調べてみると、
変更される値のみの記述になっていて、変更されない値は記述されていません。
http://skins.nucleuscms.org/skins/leaf/01_style0101.css
http://skins.nucleuscms.org/skins/leaf/01_style0102.css
先ほどの例に当てはめると、font-sizeのみ変更になっていて、
backgroundなどは省略されています。

/* basic.css */
body {
    font-size: 12px;
    background: #FFFFFF url(back.gif) repeat-y;
    color: #000000;
    line-height: 150%;
}

/* large.css */
body {
    font-size: 14px;
}

しかし、私の環境では、large.cssを読み込んだときは
large.cssにはfont-sizeを14pxにする記述だけなので、
basic.cssと同じbackground, color, line-heightにはならない

ことがわかりました。 sad

では、Leafスキンでは、いったいどのようにして
「01_style0101.cssに記述されているfont-size以外の値」を
01_style0102.css使用時に適用させているのでしょうか。
この点が分からず、調べている内に徹夜になってしまいました。

長ったらしい説明ですいません。
更に分かりにくい説明だったらもっと申し訳ないです。 :oops:
よろしくお願いします。

オフライン

#2 2005-08-06 16:42:02

nakahara21
メンバー
From: 尼崎
登録日: 2003-11-14
投稿: 1,298
ウェブサイト

Re: 本家LeafスキンのStyleSwitcherの仕組みについて

本家のサンプルページを例に取ると、

<link rel="stylesheet" type="text/css" href="http://skins.nucleuscms.org/skins/leaf/01_style0101.css" />
    <link rel="alternate stylesheet" type="text/css" href="http://skins.nucleuscms.org/skins/leaf/01_style0101.css" title="Small" />
    <link rel="alternate stylesheet" type="text/css" href="http://skins.nucleuscms.org/skins/leaf/01_style0102.css" title="Medium" />
    <link rel="alternate stylesheet" type="text/css" href="http://skins.nucleuscms.org/skins/leaf/01_style0103.css" title="Large" />

となっています。
ですから、基本は1行目のcssファイルをそのまま反映させて、例えばMediumボタンを押したときは、title="Medium"という値が入っている<link>行(この上の引用の中では3行目)を有効にする、という仕組みです。
つまりは、01_style0101.cssを読み込んでから、01_style0102.cssを読み込むので、01_style0102.cssに指定しているCSSプロパティが01_style0101.cssを上書きしているだけです。

どこでそんな切り替えをしているのかというと、そのものずばり「styleswitcher.js」です。
いわゆるjavascriptのDOMです。

しかし、私の環境では、large.cssを読み込んだときは
large.cssにはfont-sizeを14pxにする記述だけなので、
basic.cssと同じbackground, color, line-heightにはならない
ことがわかりました。

と言うことは、同じcssファイル内に

body {
font-size: 12px;
background: #FFFFFF url(back.gif) repeat-y;
color: #000000;
line-height: 150%;
}

body {
font-size: 14px;
}

と書いてもbackground:以下の指定が無効になるのでしょうか?
それとも、『alternate stylesheet』というrelのバグか何かでしょうか...


nakahara21
http://nakahara21.com/
(ただいま調整中です)

オフライン

#3 2005-08-06 17:19:08

nakahara21
メンバー
From: 尼崎
登録日: 2003-11-14
投稿: 1,298
ウェブサイト

Re: 本家LeafスキンのStyleSwitcherの仕組みについて

もしかして、safariですかね?Opera?


nakahara21
http://nakahara21.com/
(ただいま調整中です)

オフライン

#4 2005-08-06 17:58:49

Kirika
メンバー
From: 神奈川(横浜)
登録日: 2005-03-24
投稿: 29
ウェブサイト

Re: 本家LeafスキンのStyleSwitcherの仕組みについて

nakahara21さん

返信ありがとうございます。今自分の投稿を読み返してみて、
誤解されやすい文章だったことに気付きました。:oops:

まずはじめに、私が悩んでいることは、
「当方の環境で閲覧すると、Leafスキンが誤動作する。」ではなく、
「Leafスキンのfont-size変更機能に似たものを当方のNucleus(のスキン)に
搭載してみたが、スタイルシート機能の『上書き』が動作しない。」
ということです。
簡潔にして分かりやすくするためにbackground云々と書いたのですが、
かえって紛らわしくなってしまいました。すいません。

私のNucleusブログはこちら↓です。
http://rosso.yi.org/diary/

このスキンのヘッダ部分で次のようにスタイルシートと styleswitcher.js を指定しています。

<link rel="stylesheet" href="http://rosso.yi.org/skins/rosso/rosso.css type="text/css" />
<link rel="alternate stylesheet" href="http://rosso.yi.org/skins/rosso/rosso.css" type="text/css" title="Small" />
<link rel="alternate stylesheet" href="http://rosso.yi.org/skins/rosso/rosso_medium.css" type="text/css" title="Medium" />
<link rel="alternate stylesheet" href="http://rosso.yi.org/skins/rosso/rosso_large.css" type="text/css" title="Large" />
<script type="text/javascript" src="http://rosso.yi.org/skins/rosso/styleswitcher.js"></script>

styleswitcher.jsを呼び出しているのが、Sidebar上部の「Font Size」という部分です。
Smallでデフォルトのスタイルシート(rosso.css)が、
Mediumでfont-sizeの指定だけのスタイルシート(rosso_medium.css)が、
Largeをでrosso.cssのfont-sizeを変更したスタイルシート(rosso_large.css)が
styleswitcher.jsによって読み込まれます。

しかし、rosso_medium.cssを読み込んだとき、
rosso.cssにrosso_medium.cssで指定されたfont-sizeが上書きされるのではなく、
rosso_medium.cssに記されているfont-sizeのみが有効になり、
その他back-groundなどあらゆる指定が無視されてしまうのです。

これはいったいどうしてなのでしょうか?

----
私の閲覧・動作確認環境は Firefox 1.06 / IE 6.02 SP1 on Windows 2000 です。
Nucleusのバージョンは 3.21 で、VineLinux上で稼働させています。

オフライン

#5 2005-08-06 18:34:39

yu
メンバー
From: 神奈川
登録日: 2003-11-15
投稿: 718
ウェブサイト

Re: 本家LeafスキンのStyleSwitcherの仕組みについて

サイトを見させてもらいましたが、CSS自体が適用されてませんでした。

<link rel="stylesheet" href="http://rosso.yi.org/skins/rosso/rosso.css type="text/css" />
<link rel="alternate stylesheet" href="http://rosso.yi.org/skins/rosso/rosso.css" type="text/css" title="Small" />
<link rel="alternate stylesheet" href="http://rosso.yi.org/skins/rosso/rosso_medium.css" type="text/css" title="Medium" />
<link rel="alternate stylesheet" href="http://rosso.yi.org/skins/rosso/rosso_large.css" type="text/css" title="Large" />
<script type="text/javascript" src="http://rosso.yi.org/skins/rosso/styleswitcher.js"></script>

最初の行にタイプミスがありますね。
href="http://rosso.yi.org/skins/rosso/rosso.css
の最後が " で閉じられてませんでした。

※補足
今回の件で影響してるかどうかはわかりませんが
スタイルシートのキャッシュが残って混乱することがあるので(よくハマりました)、
確認するときは毎回リロードを心がけるといいと思います。


Nucleusだとか
http://nucleus.datoka.jp/

オフライン

#6 2005-08-06 19:44:00

Kirika
メンバー
From: 神奈川(横浜)
登録日: 2005-03-24
投稿: 29
ウェブサイト

Re: 本家LeafスキンのStyleSwitcherの仕組みについて

yuさん

yu さんの発言:

最初の行にタイプミスがありますね。
href="http://rosso.yi.org/skins/rosso/rosso.css
の最後が " で閉じられてませんでした。

ぐはぁっ! Σ(´Д`lll) 初歩的ミス中の初歩ミス…。:oops: :shock:

早速修正してみたところ、何の問題もなく動作するようになりました。
お陰様で謎が解けました~。ありがとうございました。

でも、自分の目が信用できなくなってきました。orz

リロードの件、気を付けてみます。

オフライン

Board footer