サイドバーの折りたたみ
Category：[JavaScript, テンプレート, テンプレート, テンプレート, テンプレート]
Tag：[Customize, JavaScript, Sidebar]
マルチカラムレイアウトでサイドバーを丸ごと折りたたむカスタマイズを紹介します。動作は Windows XP+IE6.0/Firefox1.5/Opera8.0 で確認しています。
下記にサンプルを用意しましたのでお試しください。
タイトル下の両端にあるリンクをクリックすると、サイドバーの表示・非表示が切り替わります。また折りたたみ時にリンクの内容を変更することができます。サンプルは3カラムですが、2カラムレイアウトでの折りたたみも可能です。
１．動作条件
下記の条件で動作します。
- cookieが有効であること
- 固定レイアウト（3カラムおよび2カラム）であること
また公開テンプレートで動作するように設定していますので、公開テンプレート以外でご利用になる場合はスクリプトを修正する必要があります。
２．機能概要
下記のような動作でサイドバーを折りたたみます。
- 折りたたみ用リンクをクリック
- JavaScript起動
- cookieより現在のレイアウト名を取得
- クリックされたリンク位置（右または左）と現在のレイアウトを判定し、新しいレイアウトに変更
- カラム幅がどのレイアウトでも同一になるように、レイアウトに応じて中央カラム幅を変更
- 変更したレイアウトに応じてクリックされたテキストリンクを変更
- 変更したレイアウト名をcookieに保持
３．ドネーション
カスタマイズ内容のご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
将来に向けてのご寄付（例：ドネーションによる機能追加や改善要望）は、それらが実現しない可能性があるため、ご遠慮ください。
- 現状のコンテンツで役立った
- 質問の回答で疑問や不具合が解消された
- エントリーの修正等で要望内容が満たされた
等の後に判断して頂ければ結構です。
参考：Web投げ銭
上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。
４．スクリプトのダウンロード・アップロード
下記のリンクより sidebarfolder.js をダウンロードし、ご利用のブログのディレクトリにアップロードしててください（ブログツール・ブログサービスによってアップロード先は若干異なります）。
なお、このスクリプトの先頭に使用するレイアウトを設定する行があります。
var layout = 'layout-three-column';デフォルトは3カラムになっていますので、2カラムで利用する場合は下記のように変更してください。
2カラム（左サイドバー）
var layout = 'layout-two-column-left';2カラム（右サイドバー）
var layout = 'layout-two-column-right';５．テンプレートの修正（スクリプトのインクルード）
サイドバーの折りたたみを設定するテンプレートの <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>６．テンプレートの修正（折りたたみ用ナビゲーション追加）
６．１ 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">
：６．２ 2カラムレイアウト（左サイドバー）
下記を追加してください（６．１の追加部分を変更）。
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
</div>６．３ 2カラムレイアウト（右サイドバー）
下記を追加してください（６．１の追加部分を変更）。
<div id="navi">
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>７．テンプレートの修正（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>８．スタイルシート修正
スタイルシートに下記を追加します。
#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;
}
- リターン（Enterキー）でフォームを送信しない方法
- onsubmitイベントと「return false」を組み合わせてsubmitを中断する方法
- JavaScriptで現在日時を取得する
- FirefoxやChromeでブラウザのウインドウサイズを変更するブックマークレット
- フォームから別ウィンドウを開く方法のまとめ
- jQuery ベースのドロップダウンメニュー「Superfish」（縦メニュー）
- jQuery ベースのドロップダウンメニュー「Superfish」
- Accordion で特定のメニューをデフォルト表示する
- 「JavaScript で文字をトリミングする（改善版）」バージョンアップ
- dtree のサブカテゴリーリストにブログ記事タイトルを表示する for Movable Type
- Parallax Backgrounds で背景画像のスクロール速度を変える
- prototype.js と pngfix.js の競合を解消する
- JavaScript の for 文のパフォーマンスを改善する
- Google マップの貼り付け用 HTML を valid にする
- Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する
- ツリー表示 JavaScript 「dTree」詳解
- dTree によるサブカテゴリーリスト for Movable Type
- HighSlide JS と prototype.js の競合を解消する
- HighSlide JS の onclick 属性を JavaScript で登録する
- Slider によるフォントサイズ変更でアクセシビリティを向上させる
≫ サイドバーの折りたたみ for WDP from 他山之石 -Cyprus on the Web-
「Web Liberty」にて、ないと様が配布されている Web Diary Professional（以下、WDP）のマルチカラムレイアウト（2段組 ... [続きを読む]
いつもご活用させていただきお世話になっております。
今回は、サイドバーを出したり隠したりする技術をFC2ブログで実現しようと思っていて、手順どおり行ったところ実現しました。
が、「＞」「＜」ボタンを押すと両サイドの幅が小粋空間さんみたく完全固定せず、チラっと少し動いてから両サイドの影が消えてしまいます。
説明下手で申し訳ありません。。
また、小粋空間さんのようにナビバーの左右に入れるにはどのような記述法が必要なのかご教授いただければと思います。
＞TomoMiXさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、動作が確認できるページのURLをご連絡頂けますでしょうか。
ナビバーの左右に入れるには「3カラムレイアウトをナビゲーションバー部分に適用する」が参考になれば幸いです。
それではよろしくお願い致します。
: March 8, 2008 3:50 PMブログのURL添付忘れてしまい失礼しました。
Blogpeopleにも相互登録させていただいております「TRASH」の管理人です。
ご回答前にナビゲーションバー部分に・・も読ませていただきました。
個人的なスキルでは、
・サイドバー折りたたみの実装
・折りたたみボタンのアイコン化
これは実現できそうですが、どうも切り替えた後にブログ両サイドの影が消えてしまったりするのが疑問です。
ご提供いただいているテンプレートのCSSに記述されている幅の指定を変更したのは、両サイドに影をつけただけで、それ以外の幅の数値はいじっておりません。
以上、よろしくお願いいたします。
＞TomoMiXさん
こんにちは。
すいません。頂いたURLには、ヘッダの下などにサイドバー折りたたみ用のリンクが見当たらないのですが、どこにありますでしょうか（カスタマイズをされて、不具合のある状態を確認をさせてください）。
それではよろしくお願い致します。
: March 11, 2008 1:50 AM始めまして、tsudukuと申します。
夜分遅くに失礼します。
昨日から、小粋空間様のテンプレートをお借りしたり、3カラムを2カラムに変更したりと、Blog三昧の晴れ晴れとした日々でした。
・・・がしかし！右サイドバーの折り畳みで屈折してしまいました。
bokuとしては、小粋空間様のBlogと同じ用にしたかったんですが、ウィンドウは全く変化なしq(T▽Tq)(pT▽T)p
どこが間違っているのかすら解らない現状です。
お忙しいとは思いますが、助言を頂けないでしょうか？
よろしくお願いいたします。
＞tsudukuさん
こんばんは。
ご質問の件ですが、サイドバー全体の折りたたみでよろしいでしょうか。
現在何も設定されていないようですので、不具合が発生している状態でご連絡ください。ただし現在、確認の時間がとれないので、また改めてご連絡頂ければ幸です。
それではよろしくお願い致します。
: May 17, 2008 3:55 AMこんにちは。
せっかくコメントを頂いたのに事後報告になってしまって申し訳ありません。
おまけにコメントを入れるところも違ってますよね( ;´･ω･`)人(´･ω･`; )bokuはFC2ブログなので・・・。
サイドバーの折りたたみは、showry's Blog様やyozoの気が向いたと記2.0様などの記事からなんとか完成させる事ができました。
お忙しいのにコメントをみて頂き、ありがとうございました。
これからもちょくちょくBlogを拝見させていただきます。
＞tsudukuさん
こんにちは。
ご返事遅くなりすいません。
ご連絡ありがとうございました。
無事にできたようでよかったです。
ではでは！
: June 6, 2008 5:56 PM
