10coin.comで公開されているLayout changerをFc2 Vicunaに適用する

10coin.comで公開されているLayout changerスクリプトをFc2 Vicuna Templateに適用するための初心者の方向けのエントリー。
ちなみに10coin.comではfc2.Vicunaを試していないのそうなのでサポート対象外とのことです。

Layout changer とは　Vicunaのレイアウトを閲覧しているユーザが任意で変更できるスクリプトです。
変更したレイアウト情報はクッキーに保存されるため、再度閲覧した際には、既に変更したレイアウトになります。
カスタマイズすればマルチカラムにも対応します。

Layout changer Fc2 blog Example

実際の使用例です。
Layout changer Black vicuna Origin Exsample

License

このスクリプトはクリエイティブ・コモンズ　ライセンス3.0の下でライセンスされています。

Title:

Layout Changer for Vicuna 1.2

URI:

http://10coin.com/products/layout-changer/

Author:

marble

Icon by:

http://www.famfamfam.com/

10coin.com Layout changer

Layout changer適用手順

1.http://10coin.com/products/layout-changerから最新版のファイルをダウンロード。

2.imagesフォルダ内の画像をFc2ブログへアップロード。

3.layout-changer.jsをFc2ブログへアップロード。

4.layoutChanger.cssを開き、画像ファイルへのパスを書き換える。

5.layoutChanger.cssの冒頭にある　@charset "utf-8"　の記述を消す。*

6.layoutChanger.cssの内容をコピーしてVicunaテンプレート スタイルシート編集へ貼り付ける。

7.VicunaテンプレートのHTML編集の最下部のbody要素直前に以下のコード(***部分はアップロードしたjsファイルへのパスに書き換えて下さい)を記述して更新ボタンを押せば完了です。

<script type="text/javascript" charset="utf-8" src="http://************/layout-changer.js"></script>

*Fc2blogの文字コードがEUC-JPですので、スクリプトとの整合性が取れればいいのかと思います。
テキストエディタでスクリプトのファイルをEUC-JPに変更しても文字化け対策になります。
その場合はこんな感じだと思います。(多分

<script type="text/javascript" src="http://************/layout-changer.js"></script>

Layout changer sample

とりあえず自分のブログで使ってみたい方は以下の手順を行うことでお試しができます。

1.Layout_changer_sample.css からソースコードをコピーしスタイルシートの編集欄の最後に貼り付けます。

2.Vicuna テンプレートHTML編集の最下部のbody要素直前に以下のコードを記述して更新ボタンを押せば完了です。

<script type="text/javascript" src="http://blog-imgs-21.fc2.com/b/l/a/blackvicuna/layout-changer_euc.js"></script>

*これはサンプルですので継続して使用される場合は新たにご自分で作成して下さい。

参考LINK: 3ping.org / レイアウト切り替えスクリプト

http://3ping.org/2007/11/06/2244

10coin.comでカスタマイズの詳細