追記表示(続きを読む)をページ遷移させることなくシームレスに同一ページに表示させる方法を紹介します。
この機能は現在(2006/09/01以後 Ver.7)には標準装備されています。それ以前のバージョンをお使いの方は下記を参考にカスタマイズしてください。
このカスタマイズは
ABCK(アジアンビートカンケリキッズ)さんの
追記の展開・折りたたみを参考にアレンジしました。
HTMLを編集します。<head>と</head>の間に以下を挿入します。
<head>
～<script type="text/javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>～
</head>更に下記箇所を変更します。
<!--▼ エントリー（記事）▼-->
～<!--more_link--><a href="<%topentry_link>#more">続きを読む</a><!--/more_link-->
<!--more-->
<hr class="tuduki" noshade size="1">
<%topentry_more><!--/more-->～
<!--▲ エントリー（記事）▲-->この部分を次の記述に書き換えてください。
<!--▼ エントリー（記事）▼-->
～<!--more_link-->
<div id="varP<%topentry_no>">
<div class="readmore"><a href="<%topentry_link>" title="続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;">【続きを読む】</a></div>
</div>
<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="続きを閉じる" onclick="showMore(<%topentry_no>,0);return true;">【続きを閉じる】</a></div>
<%topentry_more>
</div>
<!--/more_link-->
<!--more-->
<%topentry_more><!--/more-->～
<!--▲ エントリー（記事）▲-->最後にスタイルシートに次の記述を追加します。
/* 続きを読む・閉じる */
.readmore {
margin-top: 10px;
}
.readclose {
margin-top: 10px;
margin-bottom: 10px;
}これで追記が同一ページで表示されます。変更箇所が多いので
バックアップをとってから挑戦することをお薦めします。
- 関連記事
-
