So-net無料ブログ作成
検索選択
メッセージを送る

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



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

■はじめに



[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

2つの外部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になってますからご注意ください。

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


nice!(2)  コメント(6)  トラックバック(1) 

nice! 2

コメント 6

shikayu

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

sknys

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

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

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

kovaio

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

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

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

kovaio

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

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

shikayu

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

kovaio

shikayuさん こんにちはっ!^^
コメント&nice!ありがとうございますぅ~^^

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

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

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

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 1

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。