ニコニコ動画のPSP変換方法、アニメ銀河英雄伝説の壁紙、CSSリファレンスなど、趣味に偏った情報を公開中

スポンサーサイト

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

styleswitcher.jsを使って、クリックひとつで、FC2ブログのデザイン・テンプレートを切り替える方法

 styleswitcher.jsというJavaScriptを使って、マウスクリックでサイト・ブログのデザイン動的に切り替える方法です。
これは他のサイトですでに紹介されているので、FC2ブログでの切り替え方を紹介します。

 まず、このブログでの適用例(見本)はこちら↓
 http://gogosanzi.blog46.fc2.com/?template=grey_2column_black&index
 ヘッダーの下に 黒背景バージョン 白背景バージョン  というリンクがあるので、押してみてください。
 白背景にすると、白地に黒文字のブログデザインに変更されます。


styleswitcher.jsの導入方法はこちらを参考にしました。
http://weblibrary.s224.xrea.com/weblog/webdesign/javascript/styleswitcherjs.html


①styleswitcher.jsのダウンロードとブログへのアップロード


 styleswitcher.jsのダウンロード先→http://www.alistapart.com/
 Topics > Code > CSS > Alternative Style: Working With Alternate Style Sheets
という記事をクリックすると、Download styleswitcher.jsというリンクが出ます。
 "styleswitcher.js"でサイト検索してもOK。

 ダウンロードしたstyleswitcher.jsをブログ管理の「ファイルのアップロード」でアップロード。

②切り替えるためのテンプレートを作る


 「FC2 BLOG 管理ページ」の「テンプレートの設定」で、デフォルトのテンプレと切り替え用のテンプレを作ります。
 デフォルトのテンプレを「複製」してCSSを編集すると、プレビューしながら編集できるので、便利です。
切り替えCSS編集

別途、スタイルシート(.CSS)を使う人はファイルのアップロードをしてください。

③HTML編集


ここからはデフォルトで使う方のテンプレートHTMLを編集します。
切り替え用のHTMLは編集しても意味ないです。

i.まずstyleswitcher.jsを読み込ませる命令


 <head></head>の間に
<script type="text/javascript" src="styleswitcher.jsのアドレス"></script>
を入力します。
 アドレスは、アップロードしたstyleswitcher.jsを表示させると分かります。
 私の場合は"http://blog-imgs-31.fc2.com/g/o/g/gogosanzi/styleswitcher.js"でした。

ii. スタイルシートをを読み込ませる命令


 i.の下に、デフォルトのスタイルシートと切り替え用のスタイルシートを指定する命令を書きます。
【デフォルトのスタイルシートを指定】
<link rel="alternate stylesheet" type="text/css" href="<%css_link>" media="all" title="任意の名前" />

 通常、最初は
 <link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
 というcodeが書き込まれていると思います。
 そこに title="任意の名前" という文字を付け足して、スタイルシートに記号をつけます。

 ※<%css_link>は「そのテンプレート名に対応したスタイルシートへのリンク」を取得するためのFC2 BLOG独特のものです。
  実際には、
  http://gogosanzi.blog46.fc2.com/template/grey_2column_black/style.css
          ↑ブログのアドレス              ↑テンプレート名
  という法則に則って、アドレスを取得しているわけです。

【切り替え用のスタイルシートを指定】
 "交互にする"という意味の"alternate"スタイルシートを追加指定します。
<link rel="alternate stylesheet" type="text/css" href="切り替え用スタイルシートのアドレス" media="all" title="任意の名前" />

 切り替え用スタイルシートのアドレスは↓参照
 http://gogosanzi.blog46.fc2.com/template/grey_2column_white/style.css
       ↑ブログのアドレス             ↑切り替え用のテンプレート名

iii.スタイルシート切り替え用タグを指定


<body>~</body>に以下を加える。
<a href="#" onclick="setActiveStyleSheet('任意の名前'); return false;"/>リンク</a/>
<a href="#" onclick="setActiveStyleSheet(任意の名前'); return false;"/>リンク</a/>


これにて、完成!
---------------------------------
 これは、ユーザーの任意でデザイン切り替えができたら良いなと思って試した次第です。

 他のブログでも応用は効きますし、もっと大胆なデザイン変更をしたら面白いと思います。
 共有テンプレートなどの配布テンプレを手直しすれば切り替え用として使えます(手直しにはhtml、cssの知識が必要ですが)



このページの関連記事
関連記事
スポンサーサイト

テーマ : CSSレイアウト
ジャンル : コンピュータ

コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

メニュー

以下はクリックすると、下位メニューに飛びます。

↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ----------------------------
メニューにない記事はサイトマップへ
カテゴリー
プロフィール

みやま

Author:みやま

地域ブランド力 45位の茨城県在住
20代/女
  • ガンダムと攻殻機動隊と銀河英雄伝説が大好きだ
  • 士郎正宗の描く尻は素晴らしいと思う
--------------------
近況報告、更新情報などツイートしていく予定です。
ツイッターへのリンク@miyama_tweet

リンク
↓バナーとHTMLタグ↓

<a href="http://gogosanzi.blog46.fc2.com/" target="_blank" title="AGPP~趣味に偏った情報を公開"><img src="https://blog-imgs-37.fc2.com/g/o/g/gogosanzi/agpp-bunner.jpg" alt="agpp-bunner" border="0" width="200" height="40"></a>
    ↓登録させていただきました↓
  • loghsearch
銀河英雄伝説名言録


present by 田中芳樹:徳間書店「銀河英雄伝説」
 
  
AGPP TOP > スポンサー広告 > スポンサーサイト> HTML活用 > styleswitcher.jsを使って、クリックひとつで、FC2ブログのデザイン・テンプレートを切り替える方法
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。