●追記文章を同一ページ内で開閉させる
MovableType の default では、
追記文章は本文の下に 『続きを読む ≫』 というふーに､
リンクが表示され､クリックすると個別アーカイブページに切り替わり、
続きが読めます。
しかーし、個別アーカイブページに飛ばされてしまうものだから、
元のページに戻るのになんかちょっと違和感を覚えます。
そこで 『続きを読む』 リンクをクリックすると､
そのまま同一ページ内で､追記文章を開いて表示されるよーにしてみました。
今回勉強させていただいたのは､
「小粋空間」様です。
ありがとうございます。
JavaScript による制御です。
まず､テンプレートモジュールを作成します。
MovableType の管理画面の「テンプレート」－｢モジュール｣－｢モジュールを新規作成｣。
・テンプレート名 ：showHide（てきとーに何でもよい。）
・このテンプレートにリンクするファイル：何も書かない。
・モジュールの内容：ここに以下のスクリプトをコピペ。
<script type="text/javascript">
<!--
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;
}
}
//-->
</script>
<!--
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;
}
}
//-->
</script>
設定保存後、メインページテンプレートの <head>～</head> 間に
<MTInclude module="テンプレートモジュール名">
を書き足します。
そして、メインページテンプレートの
<MTEntryIfExtended>
<p class="entry-more-link">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
</p>
</MTEntryIfExtended>
<p class="entry-more-link">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
</p>
</MTEntryIfExtended>
を、以下のものと置き換えます。
<noscript>
<$MTEntryMore$>
</noscript>
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>
<$MTEntryMore$>
</noscript>
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>
今回は､メインページのみに適用しましたが、
各アーカイブページにも追々適用していきたいです。
