April 08, 2005

CSS切り替えプロジェクト＠ラブログ風味

もうお気づきの方もいると思いますが、
LOVELOG+3columnsのコーナーを大幅に改造しました（・ω・）

ポイントはワンクリックでCSSを入れ替えられるようになったところです。
3カラムのイメージがこれでつけやすくなるかなと思って。

以下、導入方法についてメモを残しておきます。
基本は小粋空間さんの方法をラブログに合うよういじってます。
buena suerte!さんとこのに比べて、SafariとOperaで使えるのがありがたい。
 
作業は以下の3ステップに分けられます。

　１．ファイルをアップロードする作業
　２．切り替え用Javascript等の設定作業
　３．切り替え用スイッチの作成作業

以下概略です。

１．とりあえずCSSがないと何も出来ないので、どこからかCSSを入手してきます。ここではうちに置いてある、「aquablue.css」と「night.css」をダウンロードしたという設定で話を進めます。

まず、CSS切り替え用のJavascriptをダウンロードします。

　styleswitcher.js（クリックで保存）

次に、CSS・Javascriptのアップロードを行います。

↓管理画面の「ファイルのアップロード」から「新規ファイルの追加」を選びます。
↓ファイルと書かれてある隣の「参照」をクリックして、保存しておいたCSSを選択します。ファイルタイトルは適当に。
↓「保存する」を押すと、ファイルの一覧に先ほど作ったタイトルのファイルが追加されます。
↓そのファイルの「投稿」をクリックして、出てくるアドレス（http://〜.css）をメモしておきます。実際に投稿はしませんので注意！
↓以上の操作を繰り返して、全てのCSSをアップロードします。


Javascriptも同様にアップロードしておきます。アドレス（http://〜.js）をメモするのを忘れないで。

２．アップロードしたファイルを使うために、HTMLをいじります。初心者の方は慎重に！

↓管理画面の「デザインの設定」→「カスタムデザインテーマ」を選びます。
↓custom1（なんでもいい）を選択すると、新しいウインドウが表示されます。
↓上部にある、HTMLテンプレート編集機能はこちらのページからどうぞ。を選択。
↓HTMLテンプレートの編集に入ります。


以下の行程は、５つある編集部分の全てに共通です。（つまり５回やります。）編集を押して、以下の部分を変更します。

＊CSSの追加行程（＜＞は各自半角に置き換えてください。）

＜link rel="stylesheet" href="<$CSSUrl$>" type="text/css"＞　の表記を
↓
＜link rel="stylesheet" href="<$CSSUrl$>" type="text/css" title="Default"/＞

＜link rel="alternate stylesheet" href="http://〜.css" type="text/css" title="Aquablue" /＞

＜link rel="alternate stylesheet" href="http://〜.css" type="text/css" title="Night" /＞　に変更


下線部は先ほどメモったアドレスをコピペしてください。太字部分は、この後CSS切り替えのスイッチを作る際に目印となる部分です。好きな名前で構いませんが、必ず全てにつけてください。

なお、切り替えたいCSSが３つ以上あるときは適宜その下に同じ様式で加えていけばOKです。

＊Javascriptの追加行程

＜link rel="stylesheet" href="<$CSSUrl$>" type="text/css" title="Default"/＞

＜link rel="alternate stylesheet" href="http://〜.css" type="text/css" title="Aquablue" /＞

＜link rel="alternate stylesheet" href="http://〜.css" type="text/css" title="Night" /＞　の表記を
↓
＜link rel="stylesheet" href="<$CSSUrl$>" type="text/css" title="Default"/＞

＜link rel="alternate stylesheet" href="http://〜.css" type="text/css" title="Aquablue" /＞

＜link rel="alternate stylesheet" href="http://〜.css" type="text/css" title="Night" /＞

＜script type="text/javascript" src="http://〜.js"＞＜/script＞　に変更


今度はJavascriptの分が加わりました。先ほどと同様に下線部にメモったアドレスを。titleは今回はいりません。

５つの編集部分全て出来たら、次に進みましょう。

３．サイドバーに切り替え用スイッチを作ります。

↓管理画面の「プラグインの追加」から「フリーエリア」を選びます。
↓フリーエリア内容に
＜a href="#" onclick="setActiveStyleSheet('Default'); return false;"＞Default＜/a＞＜br /＞
＜a href="#" onclick="setActiveStyleSheet('Aquablue'); return false;"＞Aquablue＜/a＞＜br /＞
＜a href="#" onclick="setActiveStyleSheet('Night'); return false;"＞Night＜/a＞

というのをコピペします。


太字部分は上の太字部分とリンクしています。注意してくださいね。

あとは全ページ再構築すれば終わり。お疲れ様でした（・ω・）
 


Posted by ちゃーりー at 21:04│Comments(7)│TrackBack(5)｜Edit
このBlogのトップへ│前の記事│次の記事

この記事へのトラックバックURL

http://blogs.dion.ne.jp/clair_de_luna/tb.cgi/888141
この記事へのトラックバック
早朝３カラムのCSSをＵＰした後、以前3カラムにする際にお世話になったcharleyさんのブログを拝見したところ、「CSS切り替えプロジェクト」なるものが進行していたので、さっそく使わせてもらった。 ..
CSS切り替えスクリプトを使ってみた。【マルトクSoliloquy】at July 22, 2005 08:49
CSS切り替えプロジェクト＠ラブログ風味
abortion jewelry【abortion jewelry】at December 09, 2006 19:45
CSS切り替えプロジェクト＠ラブログ風味
make gift baskets【make gift baskets】at December 25, 2006 02:37
CSS切り替えプロジェクト＠ラブログ風味
asbestos abatement contractor【asbestos abatement contractor】at December 25, 2006 12:43
CSS切り替えプロジェクト＠ラブログ風味
how to masterbate【how to masterbate】at March 28, 2007 01:23
この記事へのコメント
css切り替えプロジェクト落ち着いたようでお疲れ様ですm(_ _)m
とても丁寧に説明されていて解り易いです！
buena suerte!さんの所のを使わせてもらおうかな？
と思ってたんですが、こちらも良さそうですね！
新たに検討してみます〜。
Posted by 浅葱　翔 at April 09, 2005 00:56
結構いい感じですよこれ。おためしあれ！
Posted by charley at April 09, 2005 23:35
すごく参考になりますね、わたしは、buena suerteのを使用しました。
こちらも、参考になりました。
Posted by たーちゃん at April 10, 2005 11:14
いっつまいぷれじゃー（・ω・）ｂ
Posted by charley at April 10, 2005 17:31
ＴＢさせてもらいました。
切り替えた内容が簡単に見れるので、重宝しています。
Posted by マルトク at July 22, 2005 08:57
初めまして♪
パソコン初心者です。。３カラムに挑戦してますが、
基本が分かってないので・・・全く分かりません・・
ホントどうしたらいいか。。
助けてくだ・・・
Posted by 新米彫り師 at October 28, 2005 15:12
具体的なヘルプじゃないと対応できないですね＾＾；
この言葉を送りましょう。

（・ω・）つｷｱｲ
Posted by charley at October 30, 2005 20:35
 
 
このページの上へ▲