知的?自己流?普利伊待夢な育児ブログ

主に子育て日記。パソコン関連はソフト紹介や備忘録。
美容/健康・ベビー/マタニティに関する商品も紹介中。

cssc cssc cssc
--/--/--  Post at Diskenth
Category スポンサー広告 Tags

MicroAd(マイクロアド)に登録して自分のWeb/Blogに広告を貼るだけでお小遣いが稼げます。 ↓から登録いただければ、報酬アップに必要なサイトランクアップ方法などノウハウを提供します。楽天ぴたっとアドも稼げるのでオススメです。
MicroAd(マイクロアド)の登録はコチラ  楽天ぴたっとアドの登録はコチラ



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009/06/05  Post at Diskenth
Category JavaScript Tags Tips カスタマイズ レイアウト CSS

MicroAd(マイクロアド)に登録して自分のWeb/Blogに広告を貼るだけでお小遣いが稼げます。 ↓から登録いただければ、報酬アップに必要なサイトランクアップ方法などノウハウを提供します。楽天ぴたっとアドも稼げるのでオススメです。
MicroAd(マイクロアド)の登録はコチラ  楽天ぴたっとアドの登録はコチラ



WebサイトやブログのスタイルシートをJavaScriptによって動的に変化させる小技です。TOPページだけではなく、ページ全体のレイアウトを変化させることができ、更新したり別ページに移動しても変化したスタイルシートを適用できます(cookieが有効なブラウザならです)

このブログでも実装しており、どうやってやるの?という質問をいただきましたので、記事にしようかと思いました(●´∀`●)

サンプルは、私のブログTOPページの目次タブにある、6つのリンクアイコンを押してみてください。レイアウトがパッパッと変わりますw
TOPページのみに表示するこのタブアイコンです。
style_manu.png

  • 黒アイコン1:メインカラムが中央のデフォルトcss
  • 黒アイコン2:メインカラム左でサブカラム右詰めcss
  • 黒アイコン3:メインカラム右でサブカラム左詰めcss
  • 金虎アイコン:メインカラムが中央の背景が金虎柄透過背景css
  • 銀虎アイコン:メインカラムが中央の背景が銀虎柄透過背景css
  • 白アイコン:デフォルトの白版css(ちょい失敗)

気になる実装手順は続きをご覧ください。


↓以下、追記です↓

実装手順
1. 切り替え用のスタイルシート(css)を別途準備しておく
2. スタイルシート(css)のアップロード
3. Downloadページでstyleswitcher.jsをダウンロード
4. styleswitcher.jsをアップロード
5. html(head内)に以下を記述
<script type="text/javascript" src="★/styleswitcher.js"></script>
6. 既存のスタイルシートに以下をつける
title="Default"
7. 切り替え用のアップロードしたスタイルシートのパスをhtml(head内)に記述
<link rel="alternate stylesheet" type="text/css" href="★/hogehoge.css" title="☆" />
★:アップロード後の各環境下のURLに
☆:任意の名称で構いません

利用方法
スタイルシートを切り替えるためのリンクを該当箇所に記述
<a href="#" onclick="setActiveStyleSheet('☆'); return false;">★</a>
★:リンクになる箇所なので任意で構いません
☆:工程7でつけた「title="☆"」と同じにしてください
失敗するとテンプレートが戻らない場合もありますので、
バックアップの事前作成&自己責任にてお願いします
スポンサーサイト

コメント

質問
はじめて質問させていただきます。
別の切り替え用のCSSは準備してアップロードしたんですが、どこに「title="Default"」を追加するのでしょうか?元々のCSSはデフォルト、切り替え用のCSSは適当なタイトルをつけるんでしょうか?

できれば例を教えてくださると助かります。
初心者ですいません。
2009/06/07 01:25  ユウ  URL  #MaYIUM5Y  編集

返信:styleswitcherについて
ユウさん

ご質問ありがとうございます。
ブログテンプレートのcssにもともと以下のような
<link rel="stylesheet" type="text/css" href="<%css_link>" />

が、あるかと思います。これを
<link rel="stylesheet" type="text/css" href="<%css_link>" title="Default" />

のようにしてみてください。
仮に3つのcssを切り替えたい場合、head内に
<link rel="alternate stylesheet" type="text/css" href="★/hogehoge.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="★/hogehoge.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="★/hogehoge.css" title="style2" />

のようにして、切り替えをする該当部分(body内)に
<a href="#" onclick="setActiveStyleSheet('Default'); return false;">Defaultに戻します!</a>
<a href="#" onclick="setActiveStyleSheet('style1'); return false;">style1に変更します!</a>
<a href="#" onclick="setActiveStyleSheet('style2'); return false;">style2に変更します!</a>

みたいに記述してみてください。
上の例はリンクをクリックすると切り替わるイメージなので、imgなどの画像タグにしてボタンにしてみても良いですよ(●´∀`●)
2009/06/07 10:20  Diskenth  URL  #6zcrtZLY  編集


この記事に対するコメントの投稿
















この記事に対するトラックバック

トラックバックURL
http://nakano66.blog66.fc2.com/tb.php/72-6faa809a
この記事にトラックバックする(FC2ブログユーザー)
Profile

Diskenth

Author:Diskenth

はじめまして。Diskenthです。
30代のしがないリーマンですw
詳しくは ... 自己紹介 »

Archives
Categorise
Comments

Trackbacks
Links

MyBlog Links

Friend Links

Favorite Links

AffiFrend Links

Software | Material Links

Tips | Customize Links

Affiliate Links

Access Up Links

このブログをリンクに追加する

Ad Rakuten

Ad Micro

マイクロアドBTパートナーでおこづかいゲット!

Ad Sense

Ad Trend Match

Ad Adgger

アフィリエイト

ウェルカムボード

大阪 出張マッサージ 鍼灸 神戸 心理カウンセラー 福岡 Gree 広告 DM 制作 ダイレクトメール 代行 ダイレクトメール 発送代行 ショッピング枠現金化 リサイクルショップ 大阪

AccessUp Parts

キーワードアドバイス
ツールプラス

PING送信プラスSEO対策

RSS | Parts

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