エントリーの部分的な折りたたみ
ようするに、こういうヤツです↓
この部分を折りたたむ
これがやりたくて検索してみましたが、結構多いのが、サイドバーを折りたたむというやつ。
サイドバーじゃなくて記事本文の一部分を任意に折りたたみたいのです。
探していたら、そのものズバリの記事があったのでパクらせて参考にさせていただきました。
昨日書いたブログでも一部折りたたんでますが、そのときに導入したやり方を備忘録として書いておきます。
MovableTypeのテンプレートを新規作成し、以下のように設定する。
テンプレート名： 折りたたみ用（任意）
出力ファイル名： textcollapse.js
インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する： チェックしない
このテンプレートにリンクするファイル： （空白）
テンプレートの内容： 以下の詳細にあるJavaScriptのソースを貼り付ける。
textcollapse.js//
// 記事の折りたたみを制御する
// textcollapse.js ver 0.2
//// 折りたたみ対象部分のコンテナになるtag
// 注）'div'以外で動作するかは未検証
gTextCollapseTagName = 'div';
// 折りたたみ対象部分のclass名
gTextCollapseClassName = 'TextCollapse';
// 折りたたみを切替えるスイッチのテキストを指定するAttribute名
gTextCollapseExpandAttrName = 'tcExpandLabel';
gTextCollapseCollapseAttrName = 'tcCollapseLabel';
// 折りたたみを切替えるスイッチ（ラベル）部のclass名
gTextCollapseSw1ClassName = 'TextCollapseLabel'; // 上部
gTextCollapseSw2ClassName = 'TextCollapseLabel'; // 下部
// 折りたたみを切替えるスイッチ（ラベル）部のid名のプレフィックス
gTextCollapseSw1IdPrefix = 'TextCollapseSW1'; // 上部
gTextCollapseSw2IdPrefix = 'TextCollapseSW2'; // 下部
// 折りたたみ部のclass名
gTextCollapseBodyClassName = 'TextCollapseBody';
// 折りたたみ部のid名のプレフィックス
gTextCollapseBodyIdPrefix = 'TextCollapseBody';
// 折りたたみを切替えるスイッチ（ラベル）の表示位置
// 0:上部のみ 1:下部のみ 2:上部下部両方
gTextCollapseSwPosition = 2;
// 折りたたみを切替えるスイッチのデフォルトのテキスト
gTextCollapseExpand = '[詳細を表示]';
gTextCollapseCollapse = '[詳細を隠す]';
//--------------------------------------
// 展開リンク組み立て
//--------------------------------------
function makeTextExpandLink( aIdNum, aLabel )
{
var lnkText = ( ( aLabel ) ? aLabel : gTextCollapseExpand );return ( '<a href="#' + lnkText + '" ' +
'onclick="return( SwitchTextCollapse(' + aIdNum + ') );" ' +
'onkeypress="return( SwitchTextCollapse(' + aIdNum + ') );">' +
lnkText + '</a></span>' );
}//--------------------------------------
// 折りたたみリンク組み立て
//--------------------------------------
function makeTextCollapseLink( aIdNum, aLabel )
{
var lnkText = ( ( aLabel ) ? aLabel : gTextCollapseCollapse );return ( '<a href="#' + lnkText + '" ' +
'onclick="return( SwitchTextCollapse(' + aIdNum + ') );" ' +
'onkeypress="return( SwitchTextCollapse(' + aIdNum + ') );">' +
lnkText + '</a></span>' );
}//--------------------------------------
// 折りたたみの初期化
//--------------------------------------
function initTextCollapse()
{
var tagObjs = this.document.getElementsByTagName( gTextCollapseTagName );
var sw1Text = ''
var sw2Text = ''
var sw1Link = ''
var sw2Link = ''
var sw1Label = ''
var sw2Label = ''
var bdyText = ''for ( var i = 0; i < tagObjs.length; i++ )
{
if ( tagObjs[i].className == gTextCollapseClassName )
{
bdyText = tagObjs[i].innerHTML;
bdyText = bdyText.replace(/^<br>/ig, '' );
bdyText = bdyText.replace(/\r\n$/ig, '' );
bdyText = bdyText.replace(/\r$/ig, '' );
bdyText = bdyText.replace(/\n$/ig, '' );
bdyText = bdyText.replace(/<br>$/ig, '' );sw1Label = tagObjs[i].getAttribute(gTextCollapseExpandAttrName);
sw2Label = tagObjs[i].getAttribute(gTextCollapseCollapseAttrName);sw1Link = makeTextExpandLink ( i, sw1Label );
sw1Text = '<span id="' + gTextCollapseSw1IdPrefix + i + '" ' + 'class="' + gTextCollapseSw1ClassName + '"';
if ( sw1Label )
{
sw1Text += ' ' + gTextCollapseExpandAttrName + '="' + sw1Label + '"';
}
if ( sw2Label )
{
sw1Text += ' ' + gTextCollapseCollapseAttrName + '="' + sw2Label + '"';
}sw1Text += '>' + sw1Link + '</span>';
if ( gTextCollapseSwPosition > 0 )
{
sw2Link = makeTextCollapseLink ( i, sw2Label );sw2Text = '<span id="' + gTextCollapseSw2IdPrefix + i + '" ' + 'class="' + gTextCollapseSw2ClassName + '"';
if ( sw2Label )
{
sw2Text += ' ' + gTextCollapseCollapseAttrName + '="' + sw2Label + '"';
}sw2Text += '>' + sw2Link + '</span>';
}tagObjs[i].innerHTML = sw1Text +
'<div id="' + gTextCollapseBodyIdPrefix + i + '" ' +
'class="' + gTextCollapseBodyClassName + '">' +
bdyText + '</div>' + sw2Text;document.getElementById( gTextCollapseBodyIdPrefix + i ).style.display = "none";
if ( gTextCollapseSwPosition > 0 )
{
document.getElementById( gTextCollapseSw2IdPrefix + i ).style.display = "none";
}
}
}
}//--------------------------------------
// 折りたたみ／展開の切替え
//--------------------------------------
function SwitchTextCollapse( idNum )
{
var objSW1 = document.getElementById( gTextCollapseSw1IdPrefix + idNum );
var objSW2 = document.getElementById( gTextCollapseSw2IdPrefix + idNum );
var objBody = document.getElementById( gTextCollapseBodyIdPrefix + idNum );if ( objBody )
{
if ( objBody.style.display == 'none' )
{
if ( objSW1 )
{
if ( gTextCollapseSwPosition == 1 )
{
objSW1.style.display = "none";
}
else
{
objSW1.innerHTML = makeTextCollapseLink ( idNum,
objSW1.getAttribute(gTextCollapseCollapseAttrName) );
}
}objBody.style.display = "block";
if ( objSW2 )
{
objSW2.style.display = "block";
}
}
else
{
if ( objSW1 )
{
if ( gTextCollapseSwPosition == 1 )
{
objSW1.style.display = "block";
}
else
{
objSW1.innerHTML = makeTextExpandLink ( idNum,
objSW1.getAttribute(gTextCollapseExpandAttrName) );
}
}objBody.style.display = "none";
if ( objSW2 )
{
objSW2.style.display = "none";
}
}
}return false;
}
メインページの「index.php」、エントリーアーカイブなど、<$MTEntryBody$>を含むエントリの本文を表示しているテンプレートに、以下の変更を加える。
ヘッダー部分（<head>～</head>の間）に以下を挿入。
<script type="text/javascript" language="JavaScript" src="<$MTBlogURL$>textcollapse.js"></script>
末尾あたり（エントリよりも確実に下になる部分）に以下を挿入。
<script type="text/javascript">
<!--
initTextCollapse();
// -->
</script>
設定は以上。
実際にエントリに書くときは以下のように<div>タグにクラス名「TextCollapse」で囲む。
<div class="TextCollapse">
折りたたみたい部分
</div>
ちなみに、[詳細を表示]の部分のテキストの変更は、<div>タグの中で、
<div class="TextCollapse" tcExpandLabel="[折りたたみを開く]" tcCollapseLabel="[折りたたむ]">
のように指定する。
↑こんなかんじ↓
Windows 環境での Firefox2.0 および IE6 では動作確認済みです。
4*9=89さんのブログ記事を参考にさせていただきました。
（というか、ほぼ丸写しですが。。）