CSS+JavaScript によるカラムレイアウト切り替え（cookieによる状態保持）
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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。
とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。
以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。
その理由は、現在公開しているテンプレートでは1つのスタイルシートに
- 3カラムリキッドレイアウト
- 3カラム固定レイアウト
- 2カラムリキッドレイアウト（右サイドバー）
- 2カラム固定レイアウト（右サイドバー）
- 2カラムリキッドレイアウト（左サイドバー）
- 2カラム固定レイアウト（左サイドバー）
- 1カラムリキッドレイアウト
- 1カラム固定レイアウト
の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。
<body class="layout-three-column">CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。
body.layout-three-column {
margin-bottom: 20px;
}
.layout-three-column #box {
width: 850px;
}
.layout-three-column #content {
float: left;
width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
padding: 15px 15px 0 15px;
}公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。
つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。
以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。
１．スクリプトの追加
切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。
<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'){
elements[0].setAttribute('class','layout-three-column');
elements[0].setAttribute('className','layout-three-column');
} else if(id == '3l') {
elements[0].setAttribute('class','layout-three-column-liquid');
elements[0].setAttribute('className','layout-three-column-liquid');
} else if(id == '2l') {
elements[0].setAttribute('class','layout-two-column-left');
elements[0].setAttribute('className','layout-two-column-left');
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '2ll') {
elements[0].setAttribute('class','layout-two-column-liquid-left');
elements[0].setAttribute('className','layout-two-column-liquid-left');
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '2r') {
elements[0].setAttribute('class','layout-two-column-right');
elements[0].setAttribute('className','layout-two-column-right');
document.getElementById('links-left-box').style.display = 'none';
} else if(id == '2rl') {
elements[0].setAttribute('class','layout-two-column-liquid-right');
elements[0].setAttribute('className','layout-two-column-liquid-right');
document.getElementById('links-left-box').style.display = 'none';
} else if(id == '1') {
elements[0].setAttribute('class','layout-one-column');
elements[0].setAttribute('className','layout-one-column');
document.getElementById('links-left-box').style.display = 'none';
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '1l') {
elements[0].setAttribute('class','layout-one-column-liquid');
elements[0].setAttribute('className','layout-one-column-liquid');
document.getElementById('links-left-box').style.display = 'none';
document.getElementById('links-right-box').style.display = 'none';
}
}
//-->
</script>２．切り替え用プルダウンメニューの追加
１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。
：
<!-- 中央カラム開始 -->
<div id="content">
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select>
</form>
<div class="blog">
：リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）
<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>３．スタイルの追加
２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。
#cc {
text-align:center;
padding-top: 15px;
}*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
