Top > CMS・ブログ > Serene Bachテンプレート > 2006年6月
2006年6月26日

サイドバーの折りたたみ

June 26,2006 2:02 AM
Tag:[, , ]
Permalink

マルチカラムレイアウトでサイドバーを丸ごと折りたたむカスタマイズを紹介します。動作は Windows XP+IE6.0/Firefox1.5/Opera8.0 で確認しています。
下記にサンプルを用意しましたのでお試しください。

サイドバーの折りたたみサンプル

タイトル下の両端にあるリンクをクリックすると、サイドバーの表示・非表示が切り替わります。また折りたたみ時にリンクの内容を変更することができます。サンプルは3カラムですが、2カラムレイアウトでの折りたたみも可能です。

1.動作条件

下記の条件で動作します。

  • cookieが有効であること
  • 固定レイアウト(3カラムおよび2カラム)であること

また公開テンプレートで動作するように設定していますので、公開テンプレート以外でご利用になる場合はスクリプトを修正する必要があります。

2.機能概要

下記のような動作でサイドバーを折りたたみます。

  1. 折りたたみ用リンクをクリック
  2. JavaScript起動
  3. cookieより現在のレイアウト名を取得
  4. クリックされたリンク位置(右または左)と現在のレイアウトを判定し、新しいレイアウトに変更
  5. カラム幅がどのレイアウトでも同一になるように、レイアウトに応じて中央カラム幅を変更
  6. 変更したレイアウトに応じてクリックされたテキストリンクを変更
  7. 変更したレイアウト名をcookieに保持

3.ドネーション

カスタマイズ内容のご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
将来に向けてのご寄付(例:ドネーションによる機能追加や改善要望)は、それらが実現しない可能性があるため、ご遠慮ください。

  • 現状のコンテンツで役立った
  • 質問の回答で疑問や不具合が解消された
  • エントリーの修正等で要望内容が満たされた

等の後に判断して頂ければ結構です。
参考:Web投げ銭

上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。

4.スクリプトのダウンロード・アップロード

下記のリンクより sidebarfolder.js をダウンロードし、ご利用のブログのディレクトリにアップロードしててください(ブログツール・ブログサービスによってアップロード先は若干異なります)。

sidebarfolder.js

なお、このスクリプトの先頭に使用するレイアウトを設定する行があります。

var layout = 'layout-three-column';

デフォルトは3カラムになっていますので、2カラムで利用する場合は下記のように変更してください。

2カラム(左サイドバー)

var layout = 'layout-two-column-left';

2カラム(右サイドバー)

var layout = 'layout-two-column-right';

5.テンプレートの修正(スクリプトのインクルード)

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に下記を追加します。

Movable Type の場合

<script type="text/javascript" src="<$MTBlogURL$>sidebarfolder.js"></script>

Serene Bach の場合

<script type="text/javascript" src="{site_top}sidebarfolder.js"></script>

FC2ブログの場合

<script type="text/javascript" src="<%url>file/sidebarfolder.js"></script>

6.テンプレートの修正(折りたたみ用ナビゲーション追加)

6.1 3カラムレイアウトの場合

    :
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
 
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');"><</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">></a></li></ul>
</div>
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
    :

6.2 2カラムレイアウト(左サイドバー)

下記を追加してください(6.1の追加部分を変更)。

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');"><</a></li></ul>
</div>

6.3 2カラムレイアウト(右サイドバー)

下記を追加してください(6.1の追加部分を変更)。

<div id="navi">
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">></a></li></ul>
</div>

7.テンプレートの修正(JavaScript 追加)

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に、A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsの一部を追加します。すでにご利用になっている場合は不要です。

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

8.スタイルシート修正

スタイルシートに下記を追加します。

#navi {
    padding: 3px;
    border-bottom: 1px solid #666699;
    text-align:center;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    display: inline;
}
#navi ul li {
    display: inline;
}
#leftmark {
    margin-right: 395px;
}
#rightmark {
    margin-left: 395px;
}
Comments [8] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3