テキスト折りたたみ (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ランキング参加中このエントリーのトラックバックURL: