レイアウト切り替えスクリプト

10coin.comのmarbleくんが、Vicuna CMS向けにレイアウト切り替えスクリプトを作成してくれました。どのようなものかは3ping.orgの右上にある「Layout Settings」というボタンで確認する事ができます。

Vicunaではbody要素のクラスでレイアウトを切り替える仕組みになっており、配布している純正のスキンは、全てのページで1カラムと2カラムでの表示を考慮して作られています。たとえば、この3ping.orgで使っているbazookaスキンでは、トップページ、個別ページ、カテゴリーや月別アーカイブも全て1カラムでも2カラムでも表示できます。(bazookaスキンは1,2カラムのみ、標準のスキンは1,2,3カラムのうちどれかを設定できます)　このスクリプトは、Vicunaで配布しているスキン全てに対応しています。

今回作成されたJavaScriptは、bodyのclassを変更し、各ページにおいて好みのレイアウトをユーザー側が設定できるというもので、JSの設定によって変更できるページも細かく設定できます。例えば、3カラムも設定に加えた場合は次のように自動的に項目が増えます。

 

また、各ページのclassとデフォルトのレイアウトを追加することで、次のように細かくページのレイアウトを設定することもできます。

もちろん、一度決定した設定はcookieに保存され、最訪問の際にも設定が反映されます。

レイアウトの好みは人によって様々なので、こういったツールを用意し、ユーザーの好みのレイアウトでコンテンツを魅せられるのはいいですね。

Vicunaでは任意の場所に任意の画像を表示するアイキャッチモジュールCSSというものがありますが、それらを使用していてもレイアウトチェンジャーとバッティングすることなく、正しくカラムの変更ができます。Mercurius Labでアイキャッチ使用時のレイアウトチェンジャーの動作を確認することができます。

ダウンロード、設置方法やカスタマイズ方法は10coin.comを参照してください。

• レイアウト切り替えスクリプト

この人は、こんなものも作っています!

• フォントサイズ切り替えスクリプト