Top > CMS・ブログ > FC2ブログテンプレート > 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]
2006年6月 9日

FC2ブログでのテンプレート設定方法

June 9,2006 1:55 AM
Tag:[, ]
Permalink

FC2ブログ登録方法の続きで、当サイトのテンプレートを設定する方法を紹介します。

管理画面FC2ブログに、登録したIDでログインしてください。ログイン後にスクリーンショットのような画面が表示されますので、左側のちょっと下にある「テンプレートの設定」をクリックします。
テンプレート設定画面画面中央右にある「修正」をクリックします。
HTML編集画面このようにテンプレート編集画面が表示されます。まず青枠で括っている「HTMLの編集 xxxxを編集しています。」の下のテキストエリアの内容を消去します。
テキストエリア内容の選択Windows でテキストエリアの内容をまとめて削除するには、テキストエリアの任意の位置をクリックし、その状態で Ctrl+a をタイプ入力するか、マウスを右クリックして「すべてを選択」を選択します。選択できるとテキストが反転した状態になりますので、Delete キーを入力してください。
テキストエリア内容の消去削除すると、このようにテキストエリアに何もない状態になります。
テンプレート(HTML)のコピーブラウザをもうひとつ開いて、当サイトのFC2ブログテンプレートを開きます。この記事の下の方にテンプレートがあります。ここでは「HTML(通常カレンダー版)」の下にあるテキストエリアを選択状態にします(テキストエリアのどこかを右クリックするだけで全てが選択されます)。 選択状態になったら、Ctrl+c またはテキストエリアのどこかにマウスがある状態で右クリックして「すべて選択」を選択します。 これで新しいテンプレートがメモリに記憶された状態になりました。
テキストエリアへテンプレートを貼り付けFC2ブログのテンプレート編集画面を開いているブラウザに戻り、先ほど空にしたテキストエリアのどこかをクリックして、Ctrl+v または 右クリックして「貼り付け」を選択 します。これで新しいテンプレートがテキストエリアに設定されました。 ついでにその上にある名称も「koikikukan」等に変更しておきます。 これで上下いずれかの「更新」をクリックし、変更したテンプレートを保存します。
変更完了画面保存がOKであれば、左のようなメッセージが表示されます。
スタイルシート編集画面次はスタイルシートの変更を行います。前の画面で「編集」をクリックして、次のページをスクロール(下に移動)してスタイルシートのテキストエリアを表示します。
テキストエリア内容の消去このテキストエリアも、前のHTMLと同様の手順で空っぽの状態にしてください。
テンプレート(スタイルシート)のコピーもうひとつのブラウザで開いている、当サイトのFC2ブログテンプレートから「スタイルシート」の下にあるテキストエリアを選択状態にします(テキストエリアのどこかを右クリックするだけで全てが選択されます)。
テキストエリアへテンプレートを貼り付け空のテキストエリアに貼り付けて、保存をクリックします。
変更完了画面保存できたら左のようなメッセージが表示されます。 ここまで終わったら、左メニューにある「ブログの確認」をクリックしてください。
ブログの確認当サイトのブログが表示されれば完成です。お疲れ様でした。
テンプレート選択画面よりデザイン追加現在使っているデザインはそのままで、デザインをもうひとつ追加して、そこに当サイトのテンプレートを適用する場合は、「公式デザインから新しくダウンロードする」「共有デザインから新しくダウンロードする」のいずれかをクリックしてください。
テンプレート選択画面任意のテンプレートを選んで右側の「このテンプレートを追加する」をクリックします。
テンプレート選択完了画面これで新しいテンプレートが追加されますので、「修正」をクリックして先ほどと同じ手順でテンプレートを差し替えてください。 テンプレートを差し替えた後、青枠にある「このテンプレートに変更」を必ずクリックしてからブログ画面を確認してください。

「FC2ブログの共有デザインに登録すれば?」というツッコミはなしで(笑)。

Comments [2] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2021年
2020年
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