Nucleus(JP)フォーラムのこの記事を参考に、トップページやカテゴリページなどで、「続きを読む」をクリックするとページはジャンプせずそのままで、記事を折りたたみ表示できるように変更しました。
スキンのメインの目次の<head></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>
テンプレートのアイテムの続きへのリンクを下記のように変更*1。
<div id="varP<%itemid%>" class="more"> <a href="<%itemlink%>#<%itemid%>" onclick="showMore(<%itemid%>,'<%itemlink%>#<%itemid%>');return false;">→続きを読む</a></div> <div id="varXYZ<%itemid%>" style="display: none"><div class="itembody"><%more%></div> <div class="more"><a href="#<%itemid%>" onclick="showMore(<%itemid%>,0);return true;">←続きをたたむ</a></div> </div>
このままだとJavaスクリプトがオフの時に記事の続き部分から読めなくなるので、単体記事のスキンへの「続きへのリンク」の記述を変更。
<a name="more"></a> ↓ <a name="<%itemid%>"></a>
あと、「記事をたたむ」をクリックした時に元の記事の場所まで戻ってこれるように、テンプレートを下記のように変更。
<div class="itembody"><%body%></div><%morelink%> ↓ <div class="itembody"><a name="<%itemid%>"></a><%body%></div><%morelink%>
意味的には<%morelink%>の前にアンカーを付けた方がいいかとも思ったんですが、見やすさを優先してタイトル部分の前にアンカーを付けました。
- 注1 ： フォーラムの記述とほとんど同じですが、CSSなどの都合にあわせて若干自分用に変更しています
コメント
続きを読む
ブログをはじめてまだほんの数日しかたっていないというのに、もう音をあげそうになっている。はっきりいってこんなに使いにくいとは思わなかった。色を一カ所変更するだけでもHTMLとCSSの知識が必要……って本当に…