最近のコメント、最近のトラックバックも表示・非表示切り替えできるようにしたいと考えまして。
まず、元々使っていたスクリプト を解析しようと思ったんですが、ちっともわかりませんでした。orz
んで、しばらく放っておいたんですが、サイトを巡回していたら Techknow Weblog: サブカテゴリを開閉式にしてみる というエントリーを見つけまして。
これを応用すれば実現できるのではないかと考えました。
なお、スクリプトを変えてしまうので「追記」の表示・非表示部も変更する必要があります。
(追記部分だけはそのままにしていてもいいですが結局は同じことをするのでついでに変更しました)
方法が気になる方は「続き」をどうぞ。
(私が使っているソースをほぼそのまま持ってきているので、一部わかりにくいところがあるかも知れませんがご容赦下さい)
まず、「Main Index」などのヘッダ部に以下の JavaScript を追加します。(テンプレートモジュールに記入して、Includeする方法も可ですね。実は、私はそうしてます。w)
<script language="JavaScript" type="text/javascript">
<!--
/* 続きを読む・隠す */
function shBlock(id, o, s){
// id: 表示・非表示切り替え部の"ID"
// o: 「this」を指定(ボタン形状を変える)
// s: ボタンの文字形式指定( '1' で "＋"や"?" )
var disp = document.getElementById(id).style.display;
if (disp == "block") {
document.getElementById(id).style.display= "none";
if ( s == 1 ) {
// ↓ イメージファイルを使う場合
o.src = "[mt-dir]/images/expand_plus.png";
// ↓ 文字を使う場合
o.innerHTML = "＋";
} else {
o.innerHTML = "続きを読む";
}
o.title = "展開";
} else {
document.getElementById(id).style.display= "block";
if ( s == 1 ) {
// ↓ イメージファイルを使う場合
o.src = "[mt-dir]/images/expand_minus.png";
// ↓ 文字を使う場合
o.innerHTML = "?";
} else {
o.innerHTML = "続きを隠す";
}
o.title = "隠す";
}
}
//-->
</script>
では、本題。まず、Main Index の「最近のコメント」を以下のように変更します。
<ul>
<MTEntries recently_commented_on="10" sort_order="ascend">
<li>
<!-- イメージファイルを使う場合 -->
<img src="<$MTCGIPath$>images/expand_plus.png" class="expand_sw" title="展開" onClick="shBlock('recently_commented_<$MTEnumVar name="recently_commented_id"$>', this, '1');" />
<!-- 文字を使う場合 -->
<span class="expand_sw" title="展開" onClick="shBlock('recently_commented_<$MTEnumVar name="recently_commented_id"$>', this, '1');">＋</span>
<MTEntryCategories glue=", "><span class="entry"><a href="<$MTEntryPermalink$>#comments" class="cat<$MTCategoryID$>" title="[ <MTParentCategories glue = " → "><$MTCategoryLabel$></MTParentCategories> ] <$MTEntryDate$>"><$MTEntryTitle$></a></span> [<$MTEntryCommentCount$>]</MTEntryCategories><br />
<div class="recently_commented" style="display: none;" id="recently_commented_<$MTGetVar name="recently_commented_id"$>">
<MTComments lastn="5"> └ <a href="<$MTEntryPermalink$>#c<$MTCommentID$>" title="<$MTCommentDate$>"><$MTCommentAuthor$></a> さん</span><br />
</MTComments>
</div>
</li>
</MTEntries>
</ul>
「最近のトラックバック」は以下のように変更します。
(ここで書いているのは Ogawa::Memoranda: recently_pinged_on Plugin 使用版です。)
<ul>
<MTEntries recently_pinged_on="10" sort_order="ascend">
<li>
<!-- イメージファイルを使う場合 -->
<img src="<$MTCGIPath$>images/expand_plus.png" class="expand_sw" title="展開" onClick="shBlock('recently_pinged_<$MTEnumVar name="recently_pinged_id"$>', this, '1');" />
<!-- 文字を使う場合 -->
<span class="expand_sw" title="展開" onClick="shBlock('recently_pinged_<$MTEnumVar name="recently_pinged_id"$>', this, '1');">＋</span>
<MTEntryCategories glue=", "><span class="entry"><a href="<$MTEntryLink$>#trackbacks" class="cat<$MTCategoryID$>" title="[ <MTParentCategories glue = " → "><$MTCategoryLabel$></MTParentCategories> ] <$MTEntryDate$>"><$MTEntryTitle$></a></span> [<$MTEntryTrackbackCount$>]</MTEntryCategories><br />
<div class="recently_pinged" style="display: none;" id="recently_pinged_<$MTGetVar name="recently_pinged_id"$>">
<MTPings lastn="5"> └ <a href="<$MTPingURL$>" rel="nofollow" title="<$MTPingDate$> (<$MTPingTitle$>)"><$MTPingBlogName$></a><br />
</MTPings>
</div>
</li>
</MTEntries>
</ul>
で、肝心のエントリーの「追記」部分については
<MTEntryIfExtended>
<!-- Extend -->
<p class="extended" onclick="shBlock('ext<$MTEntryID pad="1"$>', this)" onkeypress="shBlock('ext<$MTEntryID pad="1"$>', this)" title="展開">続きを読む</p>
<div id="ext<$MTEntryID pad="1"$>" class="entryextend" style="display: none;">
<$MTEntryMore$>
</div>
</MTEntryIfExtended>
これでおーけーです。…長っ。w
イメージファイルを使う場合は [mt-dir]/images に イメージファイルを入れておくことを忘れずに。
ちなみに、JavaScriptでやっていることなんですが。
指定した id のタグに設定してある スタイルシートから、「display」を取得し、none(非表示)とblock(表示)を切り替えると同時に、 img あるいは スクリプトを呼び出した間に挟んだ文字を切り替えます。ついでにツールチップも。
このスクリプトを(ある程度改変して)使えばいろいろなところを表示・非表示切り替えができそうですね。
| パーマリンク
