Alchemistic-Life!

~錬金術的生活SB編~
<< 勢揃い。 :: main :: 7/12怪人TV >>

ページ移動なしで「続きを読む」と「コメントを読む」

相も変わらず改造三昧ですよ(爆
、、、月の中頃は暇になっちゃうんですよね、、、月初めに頑張っちゃうから:(^-^;):
どうも仕事が手元にあると働きマンになっちゃって、分散させられないんですよね:...:

今日の改造は、ページ移動なしで「続きを読む」と「コメントを読む」の2つです。
メインページで記事を読んでいたときに
追記部分やコメントを読もうとすると、違うページに飛んでいましたよね?
それがいちいちうっとおしいかなと思っていたので、
各記事本文の最後に「続きを読む >>」と「コメントを読む >>」というリンクをつけて、
クリックすると、ページ移動なしで本文の下に追記やコメントが読めるようにしてみました。
説明が長いかな(^-^;

今回も参考にさせていただいたのは、
MT :: luvlog : ページ移動なしで「続きを読む」

MT :: luvlog : indexのエントリー内でコメント折りたたみ表示
いつも本当に有難うございます!:(,-_-,):

ということで、せっかくなので具体的な改造方法は追記部分にこれから記入してみようかと(w
試しに↓クリックしてみてね:run:
まず、「続きを読む」を折りたたみ式に。

1.メインページのテンプレートのソースを改造します。
 <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>


2.同じメインページのテンプレートの中で、<MTEntryIfExtended>〜</MTEntryIfExtended>で挟まれている部分を全部下記に書き換えます。


<MTEntryIfExtended>

<span id="varP<$MTEntryID$>">

<a title="<$MTEntryTitle$>の続きを読む" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>"

onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');

return false;">read more...</a></span>

<div id="varXYZ<$MTEntryID$>" style="display: none">

<$MTEntryMore$>

<a title="<$MTEntryTitle$>の続きを隠す" href="#<$MTEntryID pad="1"$>"

onclick="showMore(<$MTEntryID$>,0);return true;">...hide more</a>

</div>

</MTEntryIfExtended>


3.これで再構築すれば完成です。
 が、私は2.のソース中の「read more...」を「続きを読む >>」へ、「...hide more」を「<< 続きを隠す」に ちょびっと変更。
 また、下記の「コメントを読む」と一緒にしたいので、左揃えにするため
 2.の「続きを読む >>」と「<< 続きを隠す」を「<p>続きを読む ≫</p>」と「<p><< 続きを隠す</p>」に。

 、、、こまい変更ですこと:(^-^;):


そして、次に「コメントを読む」を折りたたみ式に。

1.メインページのテンプレートのソースを改造します。
 <head>〜</head>間に以下のソースを追加します。



<script language="javascript">

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>



2.同じメインページのテンプレートの中で、コメントを表示したい箇所(私の場合は「続きを読む」の下)に以下のソースを追加します。




<MTEntryIfAllowComments>
<span id="varP2<$MTEntryID$>" class="extended">
<a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>"
onclick="showMoreComments(<$MTEntryID$>,'
<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">
<p>show comments right here ≫</p></a><br />
</span><div id="varXYZ2<$MTEntryID$>" style="display: none">
<MTComments>
<$MTCommentBody$>
<p>Posted by <$MTCommentAuthorLink spam_protect="1" show_email="0"$>
at <$MTCommentDate$></p><br /><br />
</MTComments>
<a href="#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,0);
return true;"><p>≪ hide comments</p></a></div>
</MTEntryIfAllowComments>


3.これで再構築すれば完成です。
 が、私は「続きを読む」のときと同様、「show comments right here ≫」を「コメントを読む >>」へ、「≪ hide comments」を「<< コメントを隠す」に ちょびっと変更してあります。
※上記2のソースではコメント投稿者のメールアドレスは表示しない設定です。
もし表示したい場合は<$MTCommentAuthorLink spam_protect="1" show_email="0"$><$MTCommentAuthorLink$>に差し替えてください。

また、私の場合、コメント投稿者にアイコンを割り当てているのでそのソースを入れました。
4.3のソースの中の下線部「Posted by」を下記と差し替えます。
<script language="javascript" type="text/javascript">
<!--
getCommentNameImageTag('<$MTCommentAuthor$>');
//-->
</script>




以上です。
ココまで読んでくださった方、いるかしら(^-^;

7/13 22:35さらに追記

ここで開いた続きとコメント中にアイコンが表示されなかったので
<MTEntryIfExtended>〜</MTEntryIfExtended>の間の
<$MTEntryMore$>
<MTMacroApply><$MTEntryMore$></MTMacroApply>に変更。

また、<MTEntryIfAllowComments>〜</MTEntryIfAllowComments>の間の<$MTCommentBody$>
<MTMacroApply><$MTCommentBody$></MTMacroApply>に変更しました。

ちゃんと表示されてますでしょ?:ok:
MTの改造 - : Edit
2005.07.12 火曜日 : - : -