エントリー、コメントの折りたたみ-2
以前のエントリーコメントの折りたたみで、コメントの折りたたみを行ったが、コメントも一応折りたたみ、展開表示があまり違和感なく表示できるように変更した。
↓
変更記録自分用メモです。
サイトは、
Scriptygoddess:Scripts: Collapsing entries AND COMMENTS
を参考にしました。
また、コメントの展開・折りたたみによりコメントだけの表示は必要なしと考え、TrackBack数表示の後に、コメントの数の表示と展開・折りたたみのエリアを表示するようにしました。
Maim Indexにｊavascriptを追加：
Javascript追加部分：
<div id="content">
<div class="blog">
の後辺りに以下を追加：
<!-- Foldable Entry -->
<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; }
}
function showMoreComments(varA12, varB12){
var1232 = ('varXYZ2' + (varA12));
varABC2 = ('varP2' + (varA12));
if( document.getElementById ) {
if( document.getElementById(var1232).style.display ) {
if( varB12 != 0 ) {
document.getElementById(var1232).style.display = "block";
document.getElementById(varABC2).style.display = "none";
} else { document.getElementById(var1232).style.display = "none";
document.getElementById(varABC2).style.display = "block"; }
} else { location.href = varB12;
return true; }
} else { location.href = varB12;
return true; }
}
</script>
Main Indexの以下の部分を、変更します。
<MTEntryIfExtended>
<span class="extended"><a href="<$MTEntryPermalink$>#more">Continued... "<$MTEntryTitle$>"</a></span><br />
</MTEntryIfExtended>
<div class="posted">Posted by <$MTEntryAuthor$> : <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
の部分を、
下記のように変更（TrackBack URLの表示を含んでいます）。
<MTEntryIfExtended>
<span id="varP<$MTEntryID$>"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">Read More » »</a><br /></span><div id="varXYZ<$MTEntryID$>" style="display: none"><p><$MTEntryMore$></p><a href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return
true;">« « Hide More</a></div><br />
</MTEntryIfExtended>
<div class="posted">Posted by <$MTEntryAuthor$> : <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings> |
<MTEntryIfAllowComments>
<span id="varP2<$MTEntryID$>" class="extended"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">Comments(<$MTEntryCommentCount$>) » »<br /></a></span><div id="varXYZ2<$MTEntryID$>" style="display: none">
<MTComments>
<$MTCommentBody$>
<p>Posted by <$MTCommentAuthorLink$> at <$MTCommentDate$></p><br /><br />
</MTComments>
<a href="#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,0);return
true;">« Hide Comments</a></div>
</MTEntryIfAllowComments>
TrackBack URL: <$MTEntryTrackbackLink$>
今のところ、コメントを含めたこの表示の仕方が一番違和感がないかなというところです。
又違うscriptを見つけたら変更の可能性ありです。
コメントする