Facebookでコメント

関連商品

ZenBack

最近閲覧数が多い記事

テンプレートも配布していることだし、このブログに施しているカスタマイズを順次紹介していく。

今回は配布したテンプレートには標準で装備されているカスタマイズなのだが、「続きを読むを折りたたむ」というカスタマイズ。どういうことかというと、リロードなしにブログの追記部分を表示できるようになる。

あまりにも長い記事書いた場合、追記にすることでブログの見栄えを整えたり、ブログトップの表示を軽くしたりすることがあるが、追記は読者に嫌われがちで読んでもらえなかったりする。その場合に非常に有効なカスタマイズと言える。

やりかたは続きを読むをクリックして折りたたみをひらいてからｗ

まずはテンプレートのHTMLの</head>を探して、（結構上部にあります）。その直後に下記のタグを挿入する。

<script language="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>

続いて<!--more_link-->と<!--/more_link-->で囲われている中身を下記にそっくり置き換えます。

<div class="entry_text">
<div id="varP<%topentry_no>">
<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;">続きを読む</a><br />
</div>
<div id="varXYZ<%topentry_no>" style="display: none"><%topentry_more><br />
<a href="#entry<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">続きをたたむ</a>
</div>
</div>

作業はこれで終了して、あとは保存するだけ。
ms01のテンプレートには元々このカスタマイズは施されているのでご注意を。

関連記事

• FC2ブログで「はてなスター」を導入してみた
• 続きを読むを折りたたむカスタマイズ
• ブログのテンプレートデザインを公開してみた

Facebookでコメント

関連商品

ZenBack

最近閲覧数が多い記事