CSS+JavaScript によるカラムレイアウト切り替え(cookieによる状態保持)

CSS+JavaScript によるカラムレイアウト切り替え(cookieによる状態保持)

Posted at May 18,2006 1:38 AM
Tag:[CSS, Customize, JavaScript, Template]

CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。

前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。

サンプルを用意しましたのでリロードを実施してみてください。
注:IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。

CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。

1.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>

このスクリプトは QuirksModeCookies からの抜粋です。

2.スタイル切り替えスクリプトに cookie 保持起動の追加

CSS+JavaScript によるカラムレイアウト切り替えの1項のスクリプトに下記の青色部分 *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年有効であることを示します。

3.ページ読み出し時の cookie 取得処理追加

状態保持をしたいテンプレートの最後の方(</html> の前)に下記を追加します。

<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
    changeColumn(id);
}
//-->
</script>

*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)