ABCK
アジアンビートカンケリキッズ
2005-01-01
■ [custom] 追記の展開・折りたたみ
追記を記事ページに移動することなく、クリックひとつで表示するためのカスタマイズです。
ブログのトップを開くときに追記部分も一緒に読み込むので、追記に画像が多いとトップが重くなります。
スクリプトはHere and There Blogの「エントリー、コメントの折りたたみ-2」を参考にしました。
原文はMovable Type仕様なので、Movable Typeユーザー・マニュアルの「テンプレート・タグ」を参考にしました。
HTMLの<head>と</head>の間に以下を挿入します。
そしてHTMLの<!--more_link-->と<!--/more_link-->の間を以下に変更します。
<!--more-->から<!--/more-->の部分までも変えてしまわないように注意して下さい。
【Read More】と【Hide More】はそれぞれ好きに変えちゃってください。
備考
※ このカスタマイズを施したテンプレートを共有テンプレとして登録することは禁止はしませんが、推奨していません。転載についても言わずもがな。
※ 透過（filter）を行っているテンプレートでは記事が見えなくなるなどの不具合が起こり得ます。もしそのような状態になったらサポートフォーラムへ書き込むか、ご自分でスタイルシートの該当部（filter...）を消してください。
閉じたときに記事の頭へ戻れない！
という問題があった場合にはHTMLを少しだけ変更する必要があります。通常では閉じたあとに記事タイトルへと戻るようになっているのですが、一部のテンプレでは変な場所へと飛んでしまうという不具合が報告されました。以下に対処法を記します。
閉じるときにはid="<%topentry_no>"を目印にしているので、記事タイトル（<%topentry_title>）を囲む<h3>や<div class="entry_title">などにid="<%topentry_no>"を入れます。
<%topentry_title>がどこにあるかわからないという場合は、<%topentry_body>（記事本文）の上を探してください。ほとんどの場合で記事タイトルは記事本文の頭にあり、<%topentry_body>はテンプレ内にひとつしかないので見つかると思います。
閉じたときに記事の頭に戻りたくない！
という場合は2ヶ所変更する必要があります。
<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;">【Read More】</a>
を以下に変更します
<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="EM<%topentry_no>" id="EM<%topentry_no>">【Read More】</a>
そして
<a href="#<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【Hide More】</a>
を以下に変更します
<a href="#EM<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【Hide More】</a>
個別記事でも折りたたみたい！
このスクリプトは個別記事（...fc2.com/blog-entry-X.html）ではそのまま追記を表示してしまいます。そこで、個別記事でも折りたためるようにする方法を記します。
上記のスクリプトと<!--more_link-->の変更を先に行うことが前提です。（下にサンプルがあります）
- まず、<!--more_link-->から<!--/more-->をコピーし、複製を真下にペーストします。同じモノが2つ並ぶので仮に上をA、下をBと区別します。
- Aの<!--more_link-->の上に
<!--permanent_area-->を、同じくAの<!--/more-->の下に<!--/permanent_area-->を加えます。 - Aの<!--more-->を
<noscript>に、<!--/more-->を</noscript>に変更します。 - Aの<!--more_link-->と<!--/more_link-->それぞれの_linkを削り、
<!--more-->と<!--/more-->に変更します。 - Bの<!--more_link-->の上に
<!--not_permanent_area-->を、同じくBの<!--/more-->の下に<!--/not_permanent_area-->を加えます。
※ スクリプトオフの状態だと、個別記事に追記が表示されているのにもかかわらず【Read More】というリンクが表示されてしまうので、Aの【Read More】を【以下追記】などに変更した方がいいと思います。
サンプル
未変更なら、<!--more_link-->から<!--/more-->までを上記に変更しても再現できると思います。
