script.aculo.us（スクリプタキュラス）で続きを読むを折りたたんでみる

今日もせっせとMovableTypeのカスタマイズ。

今回は、MovableTypeの「続きを読む」リンクを、ページの遷移なしにグリグリと見られる拡張でふ。
Ajax様々ですね。Ajaxというとコナミのシューティングゲームを連想ふがふがうわーなにをするー

テストを兼ねて、続きに書いてみます。

続きを読む ≫

最近長い文章を書くときにも「続き」を使わなくなったので、ほとんど意味のないカスタマイズなんですが、過去ログを読んでいて「ｳｾﾞｰ('A`)」と思ったので、導入することにしました。

参考にしたのは、またしても小枠空間:追記文章の折りたたみ Web2.0 であります。

情報が古いので、MovableType4.25で動くか不安でしたが、結論から言えばうまく動きました。

ちょっと躓いたのは、修正するテンプレートがどこなのか分からなかった事です。メモしておきまふ。

５．テンプレートの修正2（追記文章表示用 MT タグ修正）
ここで前半に書いてある修正は、テンプレートモジュール「ブログ記事の概要」の

<mt:If tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            続きを読む: <a href="<$mt:EntryPermalink$>#more" rel="bookmark"><$mt:EntryTitle$></a>
        </div>
</mt:If>

ここを、指定通り

<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$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
</MTIfNonEmpty>

こう変えます。そして、後半に書いてある

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

というところは、アーカイブテンプレート「ブログ記事」の

<mt:If tag="EntryMore" convert_breaks="0">
                                    <div id="more" class="asset-more">
                                        <$mt:EntryMore$>
                                    </div>
</mt:If>

ここを、やはり指定通りに

<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$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<div class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

に変更します。

記事のままだとテンプレートタグが古いので、どこかちょっと分かりづらかったのであります。

これ以外は記事のままやればMovableType4.25でもそのまま使えるようです。

この修正とあわせて、あちこちに分散していてうざかったJavaScriptのソースを入れるフォルダをまとめたりと調整もしました。もはやMovableTypeカスタマイズ日記になってますね。

興味のない人ばかりの予感(*´－`)

※2009/05/01　20時36分現在、アーカイブページをChrome、IE8で見ると上手く表示できてないっぽいのに気付きました。Operaでは上手く表示されてます。FireFoxは入れてないので不明。どうするか検討中。ｳﾞｧｰ('A`)

※2009/05/01　20時41分現在、↑の文章を追加したら上手く表示されるようになりました。何だったんだ。意味不明。どうするかなー。ｳﾞｧｰ('A`)

≪ 続きを隠す