loading ...

2004年6月25日

追記部分を折りたたむ

テキスト折りたたみchiricoyet

「続きを読む」をクリックしたら、別のページに飛ばされないでそのままパカッと開いて読める。つまり追記の部分を格納型にする方法。



まず、テンプレートの書き換えの他に外部javascriptが必要なので、chiricoyetさんで「showMore.js」というファイルを落とさせてもらった。
MTのあるディレクトリに.jsファイルを置く場所をつくり、(「js」という名前でフォルダを作成すればよろし)そこにこの「showMore.js」をアップロードする。


Main Index(Date-Based Archive、Category Archiveでも同じ)テンプレを開き、<head>以下に <script src="http://<$MTBlogHost$>/js/showMore.js"></script> を記述。次に


<MTEntryIfExtended>
<$MTEntryMore$>
</MTEntryIfExtended>


の部分をコメントアウトしてから(<!-- -->ではさむ。面倒くさければ、サクッとこの三行を削除)、そのすぐ下に


<MTEntryIfExtended>
<span id="varP<$MTEntryID$>" class="more">
<a title="続きを読む" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">続きを読む...</a></span>
<div id="varXYZ<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<span class="more">
<a title="元に戻す" href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return true;"> ...元に戻す</a></span></div>
</MTEntryIfExtended>


を書き加える。これで再構築すれば、追記部分が折りたたみ式になる。


折りたたみ式その2

こちらの方法だと、「元に戻す」が追記部分の上と下、両方に表示されるようになる。


<MTEntryIfExtended>
<span id="varP<$MTEntryID$>"><a title="続きを読む" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">read more...</a></span>

<div id="varXYZ<$MTEntryID$>" style="display: none"> <a title="元に戻す" href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return true;">...hide more</a>

<$MTEntryMore$> <a title="元に戻す" href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return true;">...hide more</a> </div> </MTEntryIfExtended>


わたしの場合は、Main Indexでは折りたたみ式にしていない。月別ログとカテゴリー別ログだけ。こういう場合は、Category ArchiveとDate-Based Archiveのテンプレートだけを変更する。



 blogランキング参加中

投稿者 : ナツ at 2004/06/25 | カテゴリー : Movable Type
コメント


コメントする


トラックバックURL

このエントリーのトラックバックURL: