Home > Products > Layout Changer レイアウト変更スクリプト

Layout Changer レイアウト変更スクリプト

はじめに

Vicunaのレイアウトを閲覧しているユーザが任意で変更できるスクリプトです。
変更したレイアウト情報はクッキーに保存されるため、再度閲覧した際には、既に変更したレイアウトになります。

質問などは、このページ下部にあるコメントフォームからどうぞ。

スクリーンショット

Layout Changer

動作確認したブラウザ

  • Internet Explorer 6 以上
  • Firefox 1.5 以上
  • Opera 9 以上
  • Netscape 7.1 以上
  • Safari 2 以上

ダウンロード

Layout Changer Ver 1.2

Ver 1.2 (2008-01-06)
細かい修正
Ver 1.1 (2007-11-15)
同様のスクリプトがあってもコンフリクトしないように修正
Ver 1.0 (2007-11-06)
公開

設置方法

※設置方法(特にファイルパス)は各CMSによって変化します。出来る限りすべてに対応させたカタチで記述いたしますが、それでも不明な点がありましたらコメント欄にてお尋ねください。また、fc2.Vicunaは試していないのでサポート外とします。

まずは、最新版のファイルをダウンロードして、任意の場所へ展開してください。
その後、以下の手順に従って各ファイルを設置してください。

CSSの設置

展開したフォルダの中にある、mod_layoutChangerフォルダを以下の場所にアップロードします。

Movable Typeの場合
(MTの設置場所)/mt-static/style-***/module/
Movable Type 4の場合
(MT4の設置場所)/mt-static/themes/style-***/module/
WordPressの場合
(WPの設置場所)/wp-content/themes/wp.vicuna/style-***/module/
Nucleusの場合
(NCの設置場所)/skins/vicuna/style-***/module/
Serene Bachの場合
(SBの設置場所)/template/style-***/module/

次に、Vicunaで配布されているSkinファイルの4-module.cssの一番最後に以下のコードを記述します。

/*--------------------------------------
    *.Layout Changer
    レイアウト変更スクリプト用スタイル
---------------------------------------*/

@import url(module/mod_layoutChanger/layoutChanger.css);

これでCSSの設置は完了となります。

JavaScriptの設置

展開したフォルダの中にある、layout-changer.jsファイルを以下の場所にアップロードします。ディレクトリがない場合は作成してください。

Movable Typeの場合
(MTの設置場所)/mt-static/
Movable Type 4の場合
(MT4の設置場所)/mt-static/js/
WordPressの場合
(WPの設置場所)/wp-content/themes/**.vicuna/
Nucleusの場合
(NCの設置場所)/skins/vicuna/js/
Serene Bachの場合
(SBの設置場所)/template/js/

次に、Vicunaで配布されているテーマファイルのフッターテンプレートのbody要素直前に以下のコードを記述します。

<script type="text/javascript" src="パスは下記を参照"></script>    ←この1行を追加
</body>
</html>
Movable Typeの場合
<$MTStaticWebPath$>layout-changer.js
Movable Type 4の場合
<$MTStaticWebPath$>js/layout-changer.js
WordPressの場合
http://(WPの設置場所)/wp-content/themes/**.vicuna/layout-changer.js
Nucleusの場合
http://(NCの設置場所)/skins/vicuna/js/layout-changer.js
Serene Bachの場合
http://(SBの設置場所)/template/js/layout-changer.js

これでJavaScriptの設置は完了となります。

以上で、Layout Changerの設置作業は完了となります。
サイトにアクセスし、画面右上に"Layout Setting"ボタンが表示されているか確認してください。

カスタマイズ

Layout Changerは、JSファイルの設定を変更することで比較的容易にカスタマイズすることができます。

変更できるレイアウトの種類を増やす

初期設定では、変更できるレイアウトの種類が1カラムと2カラムとなっています。ここに3カラムを増やす場合、layout-changer.jsのおよそ13～16行目を以下のように修正します。

        columnType: [
            'single',
            'double',
            'multi'
        ],

※Vicuna Skinの4-module.css内において、mod_multiCol-Type1.cssまたはmod_multiCol-Type2.cssが読み込まれているか確認してください。詳しくは以下のページを参照してください。

対象となるページを増やす

初期設定では、以下の種類のページに対してレイアウトを変更します。

  • メインページ
  • カテゴリーページ
  • 日付アーカイブページ
  • 個別記事ページ

"個別記事ページ"には、WordPressで作成したページ、検索結果画面、404Error画面も含まれます。たとえば、検索結果画面を個別に設定できるようにする場合、layout-changer.jsのおよそ17～34行目を以下のように修正します。

        name: [
            'メインページ',
            'カテゴリーページ',
            '日付アーカイブページ',
            '個別記事ページ',
            '検索結果ページ'    ←設定パネルで表示される画面
        ],
        page: [
            'mainIndex',
            'category',
            'dateBasedArchive',
            'individual',
            'search'    ←body要素に設定するclass名
        ],
        column: [
            'double',
            'double',
            'double',
            'single',
            'single'    ←初期設定値となるカラム
        ],

この場合、name, page, columnに設定したデータはそれぞれ連動しています。このようにして、値をそれぞれ増やしていけば対象となるページを増やすことが可能です。

さらに、Vicuna テーマファイルの検索結果画面テンプレートのbody要素についているindividualを削除し、そこにsearch(先ほどpage部分に指定したもの)を記述します。

設定を保存する日数を変更する

初期設定では、ユーザが設定したデータは90日間保持されます。たとえば、この日数を180日に変更する場合、layout-changer.jsのおよそ36行目を以下のように修正します。

        cookieDate: 180    ←日数を半角英数字で記述

Comments:17

comao 2007-11-15 (木) 08:32

はじめまして。MT4を最近使い始めてこちらのサイトにたどり着きました。現在あれこれ調整中です。vicunaもMT4対応版を使いました。
さて、Layout Changer レイアウト変更スクリプトの設置を試しているのですが、インストール方法にある
***/wp-content/themes/**.vicuna/style-***/module/
これはどこにあるのでしょうか。探したところ見当たらないので恐らく自分で作成すると思うのですが、どの階層に作ったらいいのか分からないのです。

同様にフォントサイズ切り替えスクリプトの設置方法も、解説を読んだだけではいまいち分かりづらく...。

MT4用に照らし合わせて設置場所などをご教示いただけると幸いです。

どうぞよろしくお願いいたします。

marble 2007-11-15 (木) 13:58

comaoさん、はじめまして。
早速ですがごめんなさい＞＜
上記解説は一部WordPressのみに特化して書かれていました。後ほど修正いたしますね。

さて、MT4への対応ですが、設置は3ping.orgの記事をご覧いただいたかと思います。
こちらに合わせた形でLayout Changerの設置方法を以下に記述いたしますね(｀・ω・´)ｼｬｷｰﾝ

***/wp-content/themes/**.vicuna/style-***/module/

こちらは、MT4の場合以下の場所になります。
(MTのディレクトリ)/mt-static/themes/style-***/module/

また、layout-changer.jsは以下の場所にアップロードすると最適かと思われます。
(MTのディレクトリ)/mt-static/js/

その後、MT4の管理画面を開き、テンプレート->右側のクイックフィルタのテンプレートモジュール->フッターと辿っていき編集画面を表示させます。以下の記述をしてあげると、layout-changer.jsが無事読み込まれると思います。

<script type="text/javascript" src="<$MTStaticWebPath$>js/layout-changer.js"></script>    ←この1行を追加
</body>
</html>

以上で設置完了となります。
もし不明な点がありましたら気軽にどうぞー

marble 2007-11-15 (木) 14:00

あ、忘れてました。
フォントサイズ切り替えスクリプトもそのうち設置方法の詳細ページを作りますねー

comao 2007-11-15 (木) 23:23

はじめまして。MT4ユーザーです。
本日の新しいバージョン、早速インストールしてみました。
が、うまく動作いたしません...。
一応こちらに書いてあるとおりに進めていったのですが、一点だけ、フッターテンプレート内の記述について
<$MTStaticWebPath$>js/layout-changer.js
<$MTStaticWebPath$>mt-static/js/layout-changer.js
2種類の表記がありますがどちらが正しいでしょうか？
どちらも試してみたのですが駄目でした...。

なにか原因などあればご教示いただけると幸いです。

marble 2007-11-16 (金) 01:44

度々すみません。
フッターテンプレート内の記述は先ほどコメント欄に記述しました<$MTStaticWebPath$>js/layout-changer.jsが正しいものとなります。

<$MTStaticWebPath$>については、mt-config.cgiにてStaticWebePathへ指定したパスが代入される形となります。
mt-config.cgiに、

StaticWebPath    http://hoge.com/mt/mt-static

とある場合、layout-changer.jsは、

http://hoge.com/mt/mt-static/js/layout-changer.js

に存在しなければなりません。

上記をふまえて、今一度指定した記述およびファイルの設置場所を見直してみてください。

comao 2007-11-16 (金) 08:47

早速の解説ありがとうございます。
ご指示の通りに何度もやってみたのですが、やはりどおしても表示されません...。
パーミッションなどは特に変更しなくても問題ないでしょうか。
あと

「4-module.cssの一番最後に以下のコードを記述します。」

とありますが,これは「5-module.css」ということでよろしいのですよね。

marble 2007-11-17 (土) 14:53

パーミッションなどは特に変更しなくても問題ないでしょうか。

はい、パーミッションの変更は必要ありません。

これは「5-module.css」ということでよろしいのですよね。

skinによっては接頭辞となる番号が違うようです。
5-module.cssで大丈夫です。

表示されない原因として、いくつか候補があると思いますが、

  • CSS、JSファイルがちゃんと読み込まれているか
  • JavaScriptがエラーを出力していないか

以上二点を今一度ご確認してみてください。

Tina 2007-11-20 (火) 01:29

はじめまして。 Vicuna CMS さんの所で見かけて自分の blog でも導入したいと思ってやってきました。
最新版を DL し、説明通りの手順を踏んで無事動かせるようになったまでは良かったんですけど、カスタマイズが何故か反映されません。
検索結果ページの設定を加えようと思ったので、事例に従って変更を加えたのですが…。設定変更にはちゃんと「検索結果ページ」の設定があるのに、肝心のページのスタイルが切り替わりません。
手順は以下のようにやりました。

layout-changer.js 内に'検索結果ページ' & 'search' & 'double' を記入
MT テンプレート > 検索結果 の <body class="individual single"> を search single に
column の検索結果ページ相当の個所を double に
アップロードして該当ページを開いても single のまま

layout-changer.js の column の個所とテンプレートのスタイル指定が同一になっていないとだめなのかと思って、そちらも変えてみたのですが、やはり切り替わらず。
検索結果ページのスタイルを double に変えると、左の float 部分が尻切れトンボのような状態にも。
環境は

Movable Type ver3.35
Vicuna skin style-bazooka

です。 Firefox のエラーコンソールにもエラーが見受けられなかったので読み込まれていない事は無いと思うんですけど…。
ここがおかしい、原因がここにあるというのがあれば教えて頂けませんか？

Tina 2007-11-20 (火) 01:43

連続投稿で申し訳ありません。スタイルの切り替えは上手くいきました。
該当ページにスクリプトのコードを張っていないとだめなんですね…。
メインページで設定してしまえばいいものばかりだと思っていました。

marble 2007-11-23 (金) 05:22

Tinaさん、はじめまして。

連続投稿で申し訳ありません。スタイルの切り替えは上手くいきました。
該当ページにスクリプトのコードを張っていないとだめなんですね…。

解決されたようでなによりです！
そうですね、スクリプトで毎回body要素のclass属性を書き換えてあげているので、適用させるページにはすべて読み込ませる必要があります。

H.Y 2008-03-01 (土) 11:43

はじめまして、こんにちは！

Layout changerを導入させてもらったのですが、ボタンをクリックした後のウインドウ表示で
文字化けが起こってしまいました。
”メインインデックステンプレート”が”メインインチ□□□ックス”というような感じで＾＾；

どこをいじれば解決できるか教えていただけませんか？

marble 2008-03-01 (土) 16:38

H.Yさん、はじめまして。

ayout changerを導入させてもらったのですが、ボタンをクリックした後のウインドウ表示で
文字化けが起こってしまいました。
”メインインデックステンプレート”が”メインインチ□□□ックス”というような感じで＾＾；

おそらく、layout-changer.jsの文字コードが、サイトの文字コードと異なっているため文字化けが発生していると思われます。
文字コードを変更できるエディタ(秀丸, TeraPad)でlayout-changer.jsを開き、UTF-8にて保存してください。
その後、script要素を埋め込む際に、以下のように記述してみてください。

<script type="text/javascript" charset="utf-8" src="ここにlayout-changer.jsまでのパスを記述"></script>

こちらでいかかでしょうか＞＜

まんまみーや 2008-03-09 (日) 11:54

はじめまして。

Layout changerを導入させていただきましたが、
ページを表示させると、枠の右側に余白ができてしまいました。
（これは３カラム用の空白かと思うのですが……）

貴サイトのスクリーンショットのように、
１カラムと２カラムのイメージを枠の中に均等に表示させるには
どのようにしたら良いのでしょうか？

また、サイドバーにLayout changerの項目を作り、
Layout changerのボタンを埋め込めたらなぁと考えているのですが、
どのようにカスタマイズしたら良いのでしょうか？

お忙しいとは存じますが、ご教授いただけますと光栄です。
どうぞよろしくお願いいたします。

まんまみーや 2008-03-09 (日) 12:12

もうひとつ質問させてください。

私のサイトなのですが、これに３カラムを導入すると、Layout changerを使用して２カラムに戻した時に、サイドバーの位置が右から左へ変わり、
サイドバーの幅も狭くなって表示されてしまいます。

３カラムを導入後に、Layout changerにて２カラムを選択した際、現在の私のサイトのようなレイアウトで表示できるようにしたいのですが、
どのようにしたら良いのでしょうか。

度々申し訳ございません。ご都合のよろしい時で構いませんので、ご教授いただけますと光栄です。
どうぞよろしくお願いいたします。

marble 2008-03-11 (火) 23:20

まんまみーやさん、はじめまして。
返信が遅れてしまい、ごめんなさい。

ページを表示させると、枠の右側に余白ができてしまいました。
（これは３カラム用の空白かと思うのですが……）

むむむ。おそらくではありますが、layout-changer.jsの13～16行目にある

columnType: [
    'single',
    'double',
],

の、'double'の後ろにカンマがついているためと思われます。
この部分はもともと、

columnType: ['single', 'double'],

というものであり、'single'と''double'を区切るためにカンマを記述しているのです。
なので、'double'のあとには何もないので、そのカンマははずして

columnType: [
    'single',
    'double'
],

というかたちにしてみてください。
ほかにも、33～40行目の部分で同じような箇所がありましたので
そちらも直しておくとGoodです！

また、サイドバーにLayout changerの項目を作り、
Layout changerのボタンを埋め込めたらなぁと考えているのですが、
どのようにカスタマイズしたら良いのでしょうか？

サイドバーに埋め込むときは、scriptタグをsidebar.phpに記述してあげなくてはなりません。
さらに、CSSを別途書き直してあげなくてはなりません。
ここあたりについては、こちらでCSSを書く余裕がないのでそれぞれで書いていただくかたちで...(すみません)
もしどうしてもと言う場合は、土日までお待ちください＞＜

私のサイトなのですが、これに３カラムを導入すると、Layout changerを使用して２カラムに戻した時に、サイドバーの位置が右から左へ変わり、
サイドバーの幅も狭くなって表示されてしまいます。

今のテンプレートって3カラムに対応されていないのではないでしょうか...!
Layout Changerでは、bodyタグのクラス名を変更しているだけなので、もしカラムレイアウトに不具合があるとすれば
Vicuna Skinの方がうまくいっていないのかもしれません。
(実際に現象確認できていないので何ともいえませんが)

以上、よろしくお願いいたします。

まんまみーや 2008-03-12 (水) 10:35

marbleさん

お忙しいところ、教えていただきありがとうございます。
とても解りやすくて、大変助かっております。

＞ページを表示させると、枠の右側に余白ができてしまいました。

この件につきましては、marbleさんに教えていただいたとおりに修正いたしましたところ、無事に解決いたしました。
どうもありがとうございました。

＞サイドバーに埋め込むときは、scriptタグをsidebar.phpに記述してあげなくてはなりません。
＞さらに、CSSを別途書き直してあげなくてはなりません。
＞ここあたりについては、こちらでCSSを書く余裕がないのでそれぞれで書いていただくかたちで...(すみません)
＞もしどうしてもと言う場合は、土日までお待ちください

そうなのですね、色々と書き直しが必要なのですね。

maebleさんのご都合のよろしい時で構いませんので（こちらは全く急ぎませんので）
ご教授願えると助かります。

＞今のテンプレートって3カラムに対応されていないのではないでしょうか...!

私が今使用しているのは、Ninjaスキンなので、３カラムにも対応していると思うのですが、
スキンの方がうまく反映されていないのかもしれませんね。。。
もう少し調べてみます。

では、引き続きよろしくお願いいたします。

まんまみーや 2008-03-13 (木) 12:01

まんまみーやです。

＞私のサイトなのですが、これに３カラムを導入すると、Layout changerを使用して２カラムに戻した時に、サイドバーの位置が右から左へ変わ＞＞り、サイドバーの幅も狭くなって表示されてしまいます。

この件につき、Vicuna Skinのサイトにて質問いたしましたところ、
３カラムを導入した場合には、強制的に上記のようなスタイルになるような仕様になっているとのことでした。
（３カラムと２カラムが共存したとき、もっとも大事なナビの位置がずれることを避けるため、だそうです。）

ご迷惑をおかけいたしまして、申し訳ございませんでした。
取り急ぎ、ご報告いたします。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://10coin.com/products/layout-changer/trackback
Listed below are links to weblogs that reference
Layout Changer レイアウト変更スクリプト from 10coin.com

Home > Products > Layout Changer レイアウト変更スクリプト

Return to page top