スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Alt Style(スタイルシートチェンジャー) 
2006 06 28
Wed 17:48:23

カスタマイズ  Comment 0  Trackback 0  edit.

Harukiya Archivesさんの所で面白いと言うより実用的なスクリプトが出荷されました。(^ー^)
Alt Styleと言うものですが、これはFC2のテンプレートプレビューとは違って、管理者が用意したスタイルシートを訪問者が選び、それを適用したデザインで閲覧可能になると言うスクリプトです。

Cookieに保存される事により、選択したスタイルで訪問時に見られると言うものです。
設置方法などはsugさんの記事を読んで頂くとして「ちょっと戸惑ったのよ?有希之武編」をお送り致します。(^ー^)
配布されているスクリプトはDLして自鯖にアップする訳ですが、スタイルシートも使用する分だけファイルでアップしておく事がまず始めです。
(HTMLに関しては、同じものを使われるので一つのテンプレートを色々カスタマイズしたスタイルシートを用意した方が良いでしょう。)

ファイルを用意出来たら、次はテンプレート(HTML文内)にスクリプトへのリンクとスタイルシートのリンクを追加します。

使い方
上記jsファイルをダウンロードの後、自サバにアップします
<head>要素内の<link>要素群より後に
<script src="<%url>file/altstyle.js" type="text/javascript"></script>
のようにファイルをリンクしてください
以上終了。自動でスタイルシートの数・形式を調べて処理します
コントロール部分のHTMLは
<p id="style_select">
<lable>style: <select>
<option value="固定・優先シートのタイトル">固定・優先シートのタイトル</option>
――スタイルシートの数だけ繰り返し――
</select></lable></p>
の形で、<body>要素直下、すべての要素の後に書き出されます。
CSSにp#style_select以下のスタイルを設定することで見映えを調整できます


と説明が書かれてますが、私は躓きました(^^;
スクリプトへのリンクは判るのですが、スクリプトがどのような制御でスタイルシートへのリンクを読み込むのかという部分ですね。
記事でリンクされている関連記事を読みながら何となく理解して設置にかかりました。

<link rel="alternate stylesheet" type="text/css" href="<%url>file/style-01.css" title="style-01" />
<link rel="alternate stylesheet" type="text/css" href="<%url>file/style-02.css" title="style-02" />
<link rel="alternate stylesheet" type="text/css" href="<%url>file/style-03.css" title="style-03" />


上が使用するスタイルシートのリンクですが、ここで重要なのが、title="style-01" と言う部分です。
使用するスタイルシートのリンクを判りやすいタイトルで使う分だけリンクすると言う事です。

コントロール部分・・・これがちょっと理解するまで多少時間が(^^;
実は、このスクリプト、コントロール部分のタグを追加する必要が無かったのです。(それが判ったのはスクリプトが動作した時点)

「このコントロールをHTMLに追加すれば動くんだよな・・・?」と貼り付けて見ましたが・・・
「あれ?ダブル?エラー?」
なんだか良く分かりませんが、style: と言う文字が二重になって見えていた訳です。
で、結論から言えば、コントロール部分はスクリプトがスタイルシートの分だけ自動で作ってくれるという事だったのでした。(^^;

まぁ?夜中にsugさんの記事を読んで軽い気持ちで設置にチャレンジした私がお馬鹿だった訳ですが(笑)
本人に聞かないで隠れて使おうと企んだ私が悪いのです(ToT)

一応、現在は動いているようですが(だから聞けって?!(心の声))
(コントロールを貼り付けたい場所を指定する時は、#style_select と言う名前でスタイルシートに設定すればOKです。)

それにしてもこのスクリプトは管理者本意ではなく、デザインを閲覧者にも選択の余地を提供する実用的なスクリプトだと思います。
以前、スタイルチェンジジャーの記事を書いた時に「Cookieで保存出来ればいいのになぁ?」とスクリプトを自作出来ない自分が考えて居たものをsugさんが作ってくれた訳です。(偶然ですがw)



sugさんから追加説明を頂きましたので掲載します。


スタイルシートの探査は、前項に書いたとおり
1) リンクタイプ(rel)が stylesheet でタイトル属性(title)が未設定ならば、固定シートになり、必ず読み込まれる
2) リンクタイプが stylesheet でタイトルが設定されていれば、優先シートになる
3) リンクタイプが alternate stylesheet なら代替シートになる。タイトルは必須
ルールを基準にしています。

優先―初期に適用されるシート・スクリプトオフのユーザに見せたいシートにはrel="stylesheet"
代替―切り替え可能なシートにはrel="alternate stylesheet"
を、それぞれ指定してください。

すべてのスタイルシートで共通しているセレクタ/プロパティは
<link rel="stylesheet" type="text/css" href="<%url>/file/all.css" />
のように(例えば新規に)all.css内に集め、title無しでリンクすると、選択したシートにプラスされます。
これは軽量化に役立つと思われます。が、実質no-styleにはできなくなります。



ここで気をつけるのは、リンクタイプですね。
私もこの辺が理解不十分と言うか勉強不足ですが、代替シートと、優先シートの違いに気をつけるという事です。
初期設定用のスタイルシートリンクには、rel="stylesheet" title="default を設定し
代替用にスタイルシートリンクには、rel="alternate stylesheet" とtitle="スタイルシート名" をそれぞれ設定する事で
初めての訪問者には、初期設定用を、来訪者にはcookieに格納されたスタイルシートを読み込むという事です。



この場を借りて感謝 m(_ _)m

ジャンル [ ブログ テーマ [ スクリプト ]

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。