特定のカテゴリーのエントリーだけ折りたたみにする(MT)

  • 投稿日:
  • by

1ヶ月くらいまえから、del.icio.usのソーシャルブックマークをこのブログにエントリーするようにしたのですが、メインページでブックマークが並んでいるのが結構うざいな。。と感じていました。

↓詳しくはこのエントリーを。
Project MultiBurst:「del.icio.us」の「daily blog posting」の設定


そこで、トップページの表示で、「del.icio.us」ブックマークのエントリーだけを隠す等できないかな~と考えていました。

そこで見つけたのが、「MTSwitch」というプラグイン

このプラグインは、<MTSwitch>と<MTSwCase>というタグで条件式を作り、<MTSwDefault>にて条件式以外の場合を表示します。


具体的には、こんな感じでしょうか。

<MTSwitch value="[MTテンプレートタグ]">
<MTSwCase value="A">
A用のコードを書く
</MTSwCase>

<MTSwCase value="B">
B用のコードを書く
</MTSwCase>

<MTSwDefault>
それ以外の場合のコードを書く
</MTSwDefault>
</MTSwitch>


[MTテンプレートタグ]では、さまざまなタグが使えるので、いろいろなカスタマイズができるかと思います。

例えば、
MovableType備忘録: ブログの表示を条件で変える
などがあります。


このプラグインは、下記のサイトよりダウンロードしてください。

http://virtuelvis.com/archives/2003/03/mtswitch

ダウンロードしたファイルを、「MT/Plugins」にアップロードするだけで使用できます。


そこで本題ですが、このプラグインと、小粋空間さん「追記文章の折りたたみ用スクリプト」を併用して、特定のカテゴリーだけ折りたたみにしてみました。


まず、下記のスクリプトを、<head>~</head>の間に埋め込みます。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
extTextDivID = ('Text' + (entryID));
extLinkDivID = ('Link' + (entryID));
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
</script>


次にメインページを以下のように書き換えます。


<MTEntries>

<!-- エントリー日付開始 -->
<MTDateHeader>
<h2 class="date"><$MTEntryDate format="%x"$></h2>
</MTDateHeader>
<!-- エントリー日付終了 -->

<div class="entry">


<!-- エントリータイトル -->
<h3 class="entry-header"><$MTEntryTitle$></h3>


<MTSwitch value="[MTEntryCategory]">
<MTSwCase value="del.icio.us">

<div class="entry-more">
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">中身を見る ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryBody$>
<br />
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 隠す</a>
</div>
</div>

</MTSwCase>
<MTSwDefault>

<!-- エントリー -->
<div class="entry-content">
<div class="entry-body"><$MTEntryBody$></div>

<!-- 追記 -->
<MTEntryIfExtended>
<div class="entry-more">
<br />
<a title="このエントリーの続きを読む(<$MTEntryTitle$>)" href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>
</div><!-- /entry-content -->

<!-- 投稿者情報開始 -->
<div class="entry-footer">

<MTIfCommentsActive>
<a href="<$MTEntryPermalink archive_type="Individual"$>#comments" title="このエントリーのコメント">Comments</a> [<$MTEntryCommentCount$>]
</MTIfCommentsActive>
<MTIfPingsActive>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks" title="このエントリーのトラックバック">Trackbacks</a> [<$MTEntryTrackbackCount$>]
</MTIfPingsActive>
</div><!-- /entry-footer -->
<!-- 投稿者情報終了 -->

</MTSwDefault>
</MTSwitch>

</div><!-- /entry -->

</MTEntries>


青文字「MTSwith」での条件分け。
赤文字「折りたたみ」です。


出来上がりはこんな感じになります。

通常の閉じているとき

close.jpg


開いたとき


全体を見ると、「del.icio.us」カテゴリーのみが折りたたみになっています。


けっこう重宝してます(^^;)

Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編
藤本 壱
ソーテック社
売り上げランキング: 3410
おすすめ度の平均: 5.0
5 Movable Typeの可能性が広がる本