Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Wrap Scroll / ブラウザースクロールと連動するサイドバー

May142007
Vote:
http://bizcaz.com/archives/2007/05/14-000031.php
Categories: JavaScript
Tags: JavaScript
Social Bookmark

Prev Page: dp.SyntaxHighlighter
Next Page: IE6 で min-width、max-width を実装する

こんにちわ^^
あっち行ったり、こっち行ったりと、今日は何かと忙しかった(振り回された)bzbellです (＞∀＜　)

チョビッと疲れ気味なのでこのエントリ投稿したら、すぐ寝ます（￣、￣＠）ｚｚｚ

さて、今回はブラウザーのスクロールに連動してサイドバーもいっしょにスクロールするカスタマイズをやってみましたのでご紹介です。

ブラウザーのスクロールバーでスクロールすると、コンテンツやサイドバーなどは固定されているので、見えなくなってしまうのが通常ですよね。
今回のカスタマイズでは、スクロール量に合わせてサイドバーをいい具合に移動させるようなカスタマイズになります。

ブラウザーのスクロール量に連動させるには、こちらのyoumosさんで配布されてる、wrapscroll.jsを使用します。
wrapscroll.js

このwrapscroll.jsは基本的には有償ですが、個人利用（非営利）の場合は無償で使うことができます。
アフィリエイトは … … … どうなんでしょ、商用利用になるのかなぁ (;￣∇￣A

とりあえずサンプルですね (￣∇￣)b
ANNEX::MovableType MEMO

上記はわたしのサイトで配布しているテンプレートのサンプルページになります。
そのサンプルページのサイドバーをブラウザーのスクロールに連動させてみました。

ディレクトリ構成

今回のカスタマイズでは、以下のようなディレクトリ構成として説明します。

http://●●●.com/
|
+-- index.html <-- 各自のトップページ
+-- styles-site.css <-- 各自のスタイルシート
|
+-- js/
| +-- wrapscroll/ <-- 新規作成
| | +-- wrapscroll.js
| | +-- wrapscroll.css
| |

カスタマイズ

まず、wrapscroll.jsを入手します。
上記URLからwrapScroll_070.zipという圧縮ファイルをダウンロードします。

そして、適当なフォルダに展開して、上記ディレクトリ構成のようにアップロードします。
次に各テンプレートを変更します。

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2007/05/14-000031.php on line 95

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/wrapscroll.png&width=240&height=183&title=&noscript=0) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2007/05/14-000031.php on line 95

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/wrapscroll.png&width=240&height=183&title=&noscript=0' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2007/05/14-000031.php on line 95

最初はお手軽なメインページやテストページで試してみてください。

先ほどサンプルとして示したサンプルページは左図のような構造になっています。

上記緑色の範囲内で、黄色い部分をブラウザーのスクロール量に連動させてスクロールさせています。
そして、青色の部分がスクロールするブロックで、新規に追加してます。

上記図を元に、各自のテンプレート内の、スクロールさせたいブロックを<div id="movable">~</div>で囲ってください。
次に、スタイルシートを作成します。
上記サンプルで使用しているスタイルシートを以下に記します。
wrapscroll.css
1. #movable {
2. padding-top: 2em; <-- スクロールするブロックのトップを調整
3. position: absolute; <-- ★重要(忘れないで!!)
4. }
動的に移動するブロック(div id="movable">~</div>)の属性にposition:absoluteを追加します。
これを忘れると思った動作しませんのでご注意ください。

作成したら上記ディレクトリ構成のようにサーバにアップロードします。
次に、<head>~</head>内に以下のコードを追加します。
<head>~</head>の間に追加
1. <link rel="stylesheet" href="<$MTBlogURL$>js/wrapscroll/wrapscroll.css" type="text/css" />
2. <script type='text/javascript' src="<$MTBlogURL$>js/wrapscroll/prototype.lite.js"></
3. <script type='text/javascript' src="<$MTBlogURL$>js/wrapscroll/wrapscroll.js"></
青い字の部分を各自の環境に合わせて変更します。
prototype.jsを既に読み込み済みの場合は、prototype.lite.jsは必要ありません。

そしてもう1つ、以下のコードを追加することで、wrapscroll.jsを実行させます。
wrapscroll.js実行
1. <script type="text/javascript">new wrapScroll ('movable', 'blog');</script>
青い字の部分がスクロールするブロックのIDになります。
赤い字の部分は移動する領域のIDを指定します。

サンプルでは、<div id="blog">~</div>の高さを移動範囲としています。
一通り変更したら、保存して再構築します。