TopMovable Typeカスタマイズ折りたたみ追記 > 2009年1月
2009年1月27日

本文と追記を切り替える Web2.0(折りたたみの先頭位置にジャンプ)

January 27,2009 12:55 AM
Tag:[, , ]
Permalink

本文と追記を切り替える Web2.0」のカスタマイズで、切り替えたときに折りたたみの先頭位置にジャンプする方法を紹介します。

このカスタマイズは記事が長い場合(記事本文や追記がブラウザの縦幅に収まらない場合)に有効です。

折りたたみの機能概要については「本文と追記を切り替える Web2.0」をご覧ください。

1.サンプル

次のサンプルにある最初の記事の「続きを読む ≫」をクリックしてみてください。追記を表示すると、追記の先頭に移動し、「続きを隠す ≫」をクリックすると、「続きを読む ≫」の辺りに移動します。

本文と追記を切り替える(折りたたみの先頭位置にジャンプ)サンプル

2.script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

script.aculo.us のページ

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip(または拡張子が tar.gz / tar.bz2)」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

script.aculo.us のページ

ダウンロードアーカイブを解凍して内容をサーバのメインページと同じディレクトリにアップロード。ここでは下記のような配置になっていることを前提に話を進めます。

/scriptaculous
   /lib
      prototype.js
   /src
      controls.js
      effects.js
      scriptaculous.js

scriptaculous というディレクトリは解凍後のディレクトリ名を変更しています。libsrc はアーカイブのままの構成です。src 配下にはここで利用しないファイルも含まれていますので、まとめてアップロードしておくといいでしょう。

3.テンプレートの修正1(HTMLヘッダ修正)

折りたたみをしたいテンプレートの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID, url) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
            location.href = url + '#Link' + entryID;
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
            location.href = url + '#Link' + entryID;
        }
    };
    Effect.BlindUp(element, options);
  }
  element = $('Body' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

6行目以降は script 開始・終了タグを外して外部ファイルにしても構いません(その場合インクルードするための script タグは effct.js をインクルードしている script 要素の下に記述してください)。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { ... } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

4.テンプレートの修正2(追記文章表示用 MT タグ修正)

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。

変更前(デフォルトテンプレート)

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="entry-more-link">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTIfNonEmpty>

変更前(公開テンプレート)

<MTEntryIfExtended>
<div class="entry-more">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>

変更後(デフォルトテンプレート/公開テンプレート共通)

<div id="Body<$MTEntryID$>"><$MTEntryBody$></div>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>', '<$MTEntryLink$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
</div>
</MTIfNonEmpty>

ブログ記事アーカイブは下記の内容を利用してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更後・ブログ記事アーカイブ(デフォルトテンプレート/公開テンプレート共通)

<div id="Body<$MTEntryID$>"><$MTEntryBody$></div>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>', '<$MTEntryLink$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください(Firefox で正常に動作しなくなります)。

5.CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

6.その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません(開く瞬間と閉じた瞬間にビクッとなります)。サンプルの公開テンプレートは XML 宣言を外しています。

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

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


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