続きを読むの折りたたみ
デフォルトでは、”続きを読む”をクリックすると、個別アーカイブへジャンプします。
しかし、続きを読むのだから、その下に、ズラズラーと表示してもらいたいものです。
そこで、私は小粋空間さんからその方法を教わりました。
そして、私なりに”続きを隠す”の動作を少し変更させていただきました。
小粋空間さんでその方法が詳しく書かれています。
ここでは、私なりの方法を書きます。
先ず、テンプレートを新規作成します。
テンプレート名 折りたたみスクリプト
出力ファイル名 readmore.js
このテンプレートにリンクするファイル は無記入
テンプレートの内容
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;
}
}
とし、再構築オプション のチェックをはずし、保存と再構築をクリックします。
次に、テンプレートのモジュールを開き、モジュールを新規作成 します。
テンプレート名 readmore
このテンプレートにリンクするファイル そのまま無記入
テンプレートの内容
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;"><b>続きを読む »</b></a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;"><b>« 続きを隠す</b></a>
<div>
<$MTEntryMore$>
</div>
<a href="#entry-<$MTEntryID$>"
onclick="showHide(<$MTEntryID$>,0,this);"><b>« "<$MTEntryTitle$>"へ戻る</b></a>
</div>
</MTEntryIfExtended>
としました。
小粋空間さんのオリジナルと違うところは、オレンジ色の部分を移動したこと、
緑色の部分を追加したこと、
です。理由は後に述べます。
次に、テンプレートのメインページを開きます。
<head>と</head>の間に
<script type="text/javascript" src="<$MTBlogURL$>readmore.js"></script>
と記入します。
<MTEntries> のすぐ下に
<a name="<$MTEntryID$>"></a>
と記入します。
<MTIfNonEmpty tag="EntryMore" convert_breaks="0"> と
</MTIfNonEmpty> の間はすべて削除します。
削除したところへ
<$MTInclude module="readmore"$>
と記入します。以下のようになります。
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<!-- 続きを読むスクリプト -->
<$MTInclude module="readmore"$>
</MTIfNonEmpty>
以上でメインページへの記入は完了です。
保存と再構築します。
カテゴリー・アーカイブと日付・アーカイブも同様に
<script type="text/javascript" src="<$MTBlogURL$>readmore.js"></script>
の記入。
<MTEntries sort_by="created_on" sort_order="ascend"> のすぐ下に
<a name="<$MTEntryID$>"></a>
と記入。
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">と
</MTIfNonEmpty>の間を削除して、
<$MTInclude module="readmore"$>
と記入します。
以上で、終了です。
私の様に、追記部分が長い場合、続きを隠す をクリックすると、一番下段へジャンプしてしまいます。その結果、どのエントリーだったか判らなくなってしまいます。
もともとの 続きを読む はスクロールして画面から消えているので、わざわざ、続きを読む に戻るよりも、そのエントリーのトップへ戻るほうが良いのではないかと考えました。
そこで、追記部分を挟んで、上の「続きを隠す」はオリジナルのまま。下の「続きを隠す」は、aタグのname属性を利用して、そのエントリーのトップにジャンプするようにしました。
追記部分を<div></div>で挟んだのは、改行設定で”なし”を選んで投稿した場合、「続きを隠す」の横から追記が始まってしまうからです。
以上です。
追記 ： 小粋空間さんで、エントリーのトップへ戻る方法が載っていました。
return false の部分を return true とすると良いとの事。私の場合は、記述していませんが、その場合は、デフォルトの設定である return true になっているようです。
しかし、私の環境で試してみたのですが、個別エントリーにジャンプしてしまいます。
ですから、このままでいく事にしました。
追記 ： エントリーのトップに<div class="entry" id="entry-<$MTEntryID$>"> と言う部分がありました。^^; ですから、わざわざ戻る場所を作らなくても、<a href="#entry-<$MTEntryID$>" ・・・・で、エントリートップに戻ります。余計な記述は避けたほうが良いですよね。
日時: 2007年04月28日 00:18 | パーマリンク | コメント (0) | トラックバック (0)
