スポンサーサイト





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

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

CSSを動的に変える





このブログのタイトル下に、ブログのテンプレートを変更するボタンを設けています。

20110511_1


これは、クリックするとCSSファイルが切り替わるという仕組みを使っています。その仕組みを実現するため、styleswitcher.js という外部ライブラリを利用しました。

今回は、このstyleswitcher.js の利用方法について書きます。


実は、本家のstyleswitcher.js は不具合が報告されています。

私も試してみたのですが、IEでは動作するもののChromeとFirefoxでは動作しませんでした。

そこでいろいろ調べてみたところ、修正版が配布されていました。

修正版は、こちらのサイトのコメント欄にあります。

ファイルのある場所はここです。


手順1 : styleswitcherのダウンロード


まずは、これをダウンロードしておきます。ファイル名は styleswitch.js とでもしておきましょう。


手順2 : CSSファイル作成


次に、CSSファイルを複数作成します。色彩を変化させるほか、レイアウトを変化させるとか、文字の大きさを変えることも自在です。

もともとのCSSファイルの名前を default.css、この作成したCSSファイルの名前を blue.css、red.css とでもしておきます(ファイル名はご自由に)。


手順3 : HTMLファイルのヘッダーにCSSファイルを登録


ヘッダーには、以下のような使用するCSSファイルを登録した個所があるはずです。

<link rel="stylesheet" type="text/css" href="default.css" />

これは、このHTMLファイルはdefault.cssというCSSファイルをスタイルシートとして利用します、といった意味です。

ここに、blue.cssやred.cssも登録します。

<link rel="stylesheet" type="text/css" href="default.css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" href="red.css" title="red" />

赤い部分が書き加えた個所です。

上の記述では、どのCSSファイルか判別するために、ファイルごとに title をつけています。また、デフォルトのスタイルシートは
 link rel="stylesheet"
としていますが、替えのスタイルシートは
  link rel="alternate stylesheet"
と書きます。


手順4 : styleswitch.jsをヘッダーに登録


手順3 の下に、styleswitch.js を外部ファイルとして登録します。

<script type="text/javascript" src="styleswitch.js">




手順5 : スタイルを切り換えるためのボタンを設置


ボタンは画像でも文字でも何でもいいです。ボタンの画像ファイルを default_button.gif、blue_button.gif、red_button.gif としますと、

<a href="javascript:;" onclick="setActiveStyleSheet('default')"><img src="default_button.gif"></a>
<a href="javascript:;" onclick="setActiveStyleSheet('blue')"><img src="blue_button.gif"></a>
<a href="javascript:;" onclick="setActiveStyleSheet('red')"><img src="red_button.gif"></a>

のようなソースになります。

setActiveStyleSheet('CSSファイル名') がstyleswitch.js のメソッドになります。


関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/34-9a537678
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。