小粋空間: 追記: 2004年8月アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞追記＞ 2004年8月

2004年8月20日

追記文章の折りたたみ用スクリプト（改）

August 20,2004 1:31 AM
Tag：[Customize, MovableType]
Permalink

＃「追記折りたたみスクリプト」で再び隠した時に表示がずれるのが気になる方へ。
Movable Type のエントリーの「追記」部分に書いた文章は、エントリー本文の最後に「続きを読む」というリンクが現れ、それをクリックした時に読めるようになります。
ところがデフォルトの設定ではこのリンクをクリックすると個別アーカイブのページにジャンプしてしまい、さっきまで読んでいた箇所まで探さないといけなくなります。感覚的には「続きを読む」をクリックしたらそのまま下に続きを表示して欲しいところです。

そういう訳で、このスクリプトは今読んでいるページを動かさずに本文下に追記を表示してくれるというスグレモノです。これも以前から導入したかった機能でようやく実現できました。「追記」に文章書いたことは一度もないのですが（笑）。
スクリプトは色々なサイトに転がっており、オリジナルはScriptygoddessさんのサイトみたいです。

タイトルの（改）ですが、オリジナルのスクリプトでは続きを再び隠した時に画面がビクッとなり（=アンカー指定の位置にずれる模様）、それが起きないようJavaScriptをちょっと修正しました。それからオリジナルはコメント部分にも使える仕様ですが本文でしか使わないと思い、コメント関連のコードも削除してます。
とりあえずソースと手順を載せておきます。

１．テンプレートにスクリプト追加

リスト１のスクリプトを <head>～</head> の間にコピーしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

リスト１：折りたたみ用スクリプト

２．テンプレートタグの修正

リスト２の赤字部分をリスト３の青字に入れ替えます（緑色部分は隠した時に表示がずれないための改造箇所）。

<MTEntryIfExtended>
<span class="extended">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</span><br />
</MTEntryIfExtended>

リスト２：追記表示用MTタグ（修正前）

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>