MovableTypeはVer3の頃から使わせてもらっているが、サイドバーの折りたたみは面倒くさそうで手を付けていなかった。
だが、一念発起して挑戦してみようと思い、一通り完成したので、その方法を。
ダイズバタケさんのサイトを参考にして、意外に簡単に出来た。
今回、MT4.1でも無事動作した。
まずは、jsファイルの作成。
以下のソースをエディタで作成し、「folding_sidebar.js」という名前でindexの置いてあるフォルダに保存。
function toggleFold(sender, id) {
var elm = document.getElementById(id);
if (elm.style.display == "none") {
elm.style.display = "block";
sender.className = "unfolded";
} else {
elm.style.display = "none";
sender.className = "folded";
}
}
次に、モジュールテンプレートの「ヘッダー」を開き、folding_sidebar.jsをincludeする。
<script type="text/javascript" src="<$MTBlogURL$>folding_sidebar.js"></script>
MT4.1からは、サイドバーの各モジュールをウィジェットとして管理しているため、折りたたみたいウィジェットを開いて、
<h3 class="widget-header">カテゴリ</h3>
<div class="widget-content">
の部分を、
<h3 class="unfolded" onmousedown="toggleFold(this, 'sidebar_category');">カテゴリ</h3>
<div class="widget-content" id="sidebar_category" style="display: block;">
に書き換える。
あとは、スタイルシートにfolded要素とunfolded要素を加筆するだけだが、ここで注意したいのは、もともとウイジェットのh3要素は「widget-header」という要素で成り立っているので、出来る限りその要素にそろえたい。
そこで、以下のようにしてみた。
.folded {
background-color:inherit;
text-align:left;
font-size:70%;
font-weight:bold;
padding:2px;
margin-bottom:10px;
border-bottom:1px solid #b89d65;
background-image: url(/folded.gif);
background-repeat: no-repeat;
background-position: 0px center;
}
.unfolded {
background-color:inherit;
text-align:left;
font-size:70%;
font-weight:bold;
padding:2px;
margin-bottom:10px;
border-bottom:1px solid #b89d65;
background-image: url(/unfolded.gif);
background-repeat: no-repeat;
background-position: 0px center;
}
あとは、folded.gifとunfolded.gifをindexと同じフォルダに置けばOK。
とても軽快に動作してくれる。