FC2ブログのテンプレート工房


記事の内容

前へ | 次へ

追記【続きを読む】を同一ページに表示させる
2006/09/09 23:35

追記表示(続きを読む)をページ遷移させることなくシームレスに同一ページに表示させる方法を紹介します。
この機能は現在(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;
}



これで追記が同一ページで表示されます。変更箇所が多いのでバックアップをとってから挑戦することをお薦めします。

カテゴリ:standard 専用

前へ | 次へ

コメントを見る(62)
コメントを書く
トラックバック(3)
BlogTOP
このユーザーのホーム

ログイン


Powered By FC2ブログ