CSS+JavaScript によるカラムレイアウト切り替え（cookieによる状態保持）
Category：[CSS, JavaScript, テンプレート]
Tag：[CSS, Customize, JavaScript, Template]
CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。
前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。
サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。
CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。
１．cookie 保持スクリプトの追加
状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。
<script type="text/javascript">
<!--
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//-->
</script>このスクリプトは QuirksMode：Cookies からの抜粋です。
２．スタイル切り替えスクリプトに cookie 保持起動の追加
CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。
<script type="text/javascript">
<!--
function changeColumn(id) {
var elements = document.getElementsByTagName('body');
document.getElementById('links-right-box').style.display = 'block';
document.getElementById('links-left-box').style.display = 'block';
if(id == '3'){
：
（中略）
：
}
createCookie('style', id, 365);
}
//-->
</script>createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。
３．ページ読み出し時の cookie 取得処理追加
状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。
<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
changeColumn(id);
}
//-->
</script>*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
- Movable Type 4.1 テンプレートセット（スタイル対応版）
- Movable Type でコメント用 RSS フィードを出力する
- 小粋空間テンプレートセットのカラムレイアウト変更方法
- Movable Type 4.1 テンプレートセット
- FC2ブログの個別記事ページで前後記事のリンクを表示する
- Movable Type 4.1 の「ブログのテンプレートを初期化」について
- テンプレートのタグを探す方法
- Movable Type 4 配布テンプレート不具合のお知らせ
- livedoor テンプレート不具合のお知らせ（前後ページへのリンク追加）
- 配布テンプレートのサイドバーにリストを追加する
- サイドバーに Google Adsense を貼り付ける
- テンプレート不具合のお知らせ（カレンダーリンクの改善） for livedoor ブログ
- アメーバブログ スキン設定方法
- アメーバブログ スキン
- Movable Type 4 公開テンプレート設定方法
- Movable Type 4 テンプレート不具合と修正のお知らせ
- Movable Type 4 テンプレート配布再開
- XHTML 1.0 Strict 版テンプレートをカスタマイズする場合の注意事項
- Movable Type 4 テンプレート
- 3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する
