オリジナルスキン [skin switcher]

ってことでまとめてみました。＾＾

■はじめに

[skin switcher]は、ユーザが好きなスキンに切り替えることが出来るもので、仕組みは、2つのCSSファイルをジャバスクリプトを使って切り替えるってものです。
ココとかは、フォントサイズを変更することができるけど、考え方は一緒。

ソネ風呂の場合、ベースになるスキンとデフォルトで呼び出すスキンを同じモノにしておくとよいです。

図解すると、こんな感じ。

真中の[.jsファイル]がCSSを切り替える[skin switcher]なるモノです。＾＾

ココから拾ってきたのですが、英語なのでよーわかりません。
参考にさせていただいたのは、こちらです。

■カスタムスキンを用意

まずは、ベースになるカスタムスキンを作ります。
これは、こちらを参考にがんばって作ってください。＾＾；

で、そのベースになるCSSを元に背景色を変えたり、フォントカラーを変えたりもう1つのカスタムスキンを作るわけですが、注意しておかなくちゃいけないのは、読み込む方のCSSの方に指定がされていないとベースのものが出てきちゃいます。

EVAスキン	黒虎スキン	EVAをベースにした場合

EVAスキンでは、コメント欄に枠をつけてますが、黒虎スキンでは指定してません。
ベーススキンをEVAスキンにするとこんな感じで黒虎スキンなのにEVAスキンの枠が出てきちゃいます。

そんなことに注意しながら2枚のカスタムスキンを作ると、管理画面上ではこんな感じになります。

■外部CSSファイルのリンク

カスタムスキンを作ってソースを見るとカスタムスキンのCSSファイルが外部ファイル化されリンクされているので、それぞれのカスタムスキンのCSSのリンクをコピっておきましょう。

<link rel="stylesheet" type="text/css" href="Http://blog.so-net.ne.jp/_images/blog/_82b/b_chboy2/205691/ style.css?1173437095000" media="all"/>

赤文字が外部ファイル化されたCSSのURLです。
httpはHttpになってますからご注意ください。

■skin switcher.js

ココからstyleswitcher.jsをダウンロードして、それをサーバにアップするんですが、ソネ風呂はjs（ジャバスクリプト）ファイルはアップできないので、どこかのサーバにアップする必要があります。

サーバお持ちでない人もいると思いますので、kovaioのサーバにあげておきますので、こちらのstyleswitcher2.jsをお使いください。
（※kovaioの都合でjsファイルを削除することもありますので、その点はご理解いただきお使いください。）

Http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/styleswitcher2.js

２つの外部CSSとJSファイルがそろえば、後は、カスタムペインにHTMLを埋め込めば終了です。

■skin switcherの設置

カスタムペインにいつもの作法で埋め込んでいただければ、OKです。＾＾

<link rel="stylesheet" href="Http://blog.so-net.ne.jp/_images/blog/_82b/b_chboy2/205691/ style.css?1171524510000"　type="text/css" title="Default" />
<link rel="alternate stylesheet" href="Http://blog.so-net.ne.jp/_images/blog/_82b/b_chboy2/207516/ style.css?1173023530000" type="text/css" title="eva" />

↑ここはそれぞれの外部CSSの呼び出すための指定をしてます。

<script type="text/javascript" src="Http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/ styleswitcher2.js"></script>

↑これは、js（ジャバスクリプト）の呼び出しを指定してます。

<a href="#" onclick="setActiveStyleSheet('eva'); return false;" onkeypress="">EVAスキン</a>

<a href="#" onclick="setActiveStyleSheet('Default'); return false;" onkeypress="">黒虎スキン</a>

↑ここはリンクですね。

赤文字を指定しなおしてもらえればOKかと。
httpはHttpになってますからご注意ください。

一応、カスタムは、自己責任でお願いしますね。＾＾；
ではでは。

コメント 8

あー、まずカスタムスキンからですね、（汗）
そのあとkovaioさんのところにきて・・・
・・・でも私、ブログ始めたころはCSSファイルとかタグとかスクリプトとか
全然全然わかりませんでしたが
kovaioさんのおかげでだいぶ「なんとなく」（笑）
も、もしやこう？とか想像できるように・・・（笑）
春休みやってみようかな～～（笑）
by shikayu (2007-03-12 11:46) 

kovaioさん、こんばんは。
１クリックでスキンを切替える「skin switcher」は、
お洒落なカスタマイズだと思います＾＾
代替スキンを再読み込みした際にデフォルト・スキンが一瞬
表示されることを除けば、問題はないでしょう。

カレンダーのリンク色が消えたり、
ネコ・ログのtable枠が２重線に戻ったりしましたが、
何とか修正しました。
カスタムペインの中にCSSを入れて置かない方が良いのかな？

スイッチ・ボタンのデザインに苦労しちゃった＾＾;
プロフ欄の「nice!」マークを流用して、
「skin switcher」の部分をリンクにしたんですが‥‥。
by sknys (2007-03-13 00:09) 

shikayuさん　こんばんはっ！＾＾
コメント＆nice!ありがとうございますっ！
カスタムしていくと面白いし愛着も沸くてもんです。＾＾

CSSは奥が深いけど、イメージ通りにできたときの快感はなんともいえず癖になっちゃいます。＾＾；
kovaioは、A型ゆえに凝り性。（笑）

実装するときは、声かけてくださいね~
この前の背景事件の時にちょこっとshikayuさんのカスタム部分攻略しかけたんでカスタムスキンから手伝えますよ~（笑）
by kovaio (2007-03-13 02:53) 

sknysさん　こんばんはっ！＾＾
あんなにいっぱいリンクしていただいて、ありがとうございますっ！！

ベースのスキンと代替スキンで差分があるとどうしてもベースのが出てきちゃうんですよねー　
kovaioも結局EVAのCSSは黒虎のCSSをEVA用に作り変えたんでほぼ新調したようなもんです。（おかげで安定するまで手間取りましたが。。。）
カスタムペインの中にCSSを入れておいても大丈夫だと思いますが、カスタムスキンでCSSを一括管理しておいたほうが、あとあと（ワイド化計画とか）大規模修繕するときは楽ではないかと。。。＾＾；
by kovaio (2007-03-13 03:11) 

まぁ！私の！！なんか嬉しさのあまりドキドキ～ヽ(*^○^*)ノ
カスタムスキンは何からしていいのか
想像もつかないので、きっとkovaioさんにおんぶにだっこだな～・・・
でも挑戦はしてみたいんですぅぅo(≧∇≦o)(o≧∇≦)o
何か読んでおいたほうがイイモノってありますかね、
kovaioさんの記事はほぼすべて読んでますが、本とか（笑）
by shikayu (2007-03-14 23:25) 

shikayuさん　こんにちはっ！＾＾
コメント＆nice!ありがとうございますぅ～＾＾

本とかだとタグ一から打たないといけないので
あんまり使ってないんですけど、WEBでkovaioが
結構お世話になってるところは、
HTMLクイックリファレンス
http://www.htmq.com/

と、ソネ風呂の
ブログ教室はソネ風呂向きなのでよいかも
http://blog.so-net.ne.jp/blog-class/

です。
参考までに～＾＾
by kovaio (2007-03-15 16:09) 

kovaioさん、ありがとう。
サーバを替えただけで、簡単に復旧しました。
代替CSSを４つのブログ（３つは未使用）に割り振っていたのが幸いしたようです＾＾

数日後、突然ブログのCSSが反映されなくなった。
またソネブロの障害かと思ったのですが、正常に表示されるサイトやブログもある。
ブラウザ（Firefox）の不具合かと疑って、再インストールしたものの改善されず。
試行錯誤の後、プラグイン（Adblock Plus）を外したら元に戻りました。

広告をブロックしていたので、その様変わりにビックリ！
最新ミラーレスの情報を見た直後に、カメラの広告が表示されたり‥‥実に巧妙化しています。
管理ページの中まで広告で埋め尽くされているのは目障りですが＾＾;
by sknys (2018-08-25 12:55) 

sknysさん、こんばんは。
旧サーバだから壊れてたんですね。（＾＾；）
なんにつけてもよかったです。＾＾

プラグインが障害になるのは、WPでもしばしばあります。
コアユニットのアップデートに追いつかない。
セキュリティ性と安定性ありがちな問題ですけど、
サードパーティのみなさんには頑張っていただきたい。
・・・と他力本願です（汗
by kovaio (2018-08-25 19:55)