MT4.2でウェジェットの折りたたみをする方法です。
１、javascriptのダウンロード
小粋空間からmenufolder.jsスクリプトをダウンロードします。
http://www.koikikukan.com/scripts.php
ダウンロードしたファイルはそのままMTのindexディレクトリにアップロードします。
２、<head>～</head>に以下の行を追加します。
※menufolder.jsが置いてあるディレクトリにパスを合わせて下さい。
<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script> |
３、CSSの追加
※以下のスタイルシートを追加します。
.fold-header a {
width: 100%;
}
.fold-header a:link,
.fold-header a:visited {
display: block;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
}
.fold-header a:hover {
color:#fff;
background: #AB0404;
text-decoration: none!important;
}
|
４、ウェジェットのソースを書き換える。
※以下のコードは月間アーカイブを書き換えた場合です。
<mt:IfArchiveTypeEnabled archive_type="Monthly">
<mt:ArchiveList archive_type="Monthly">
<mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
<div style="text-align: center; ">
<h3 class="widget-header" fold-header" id="tukianame"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
</div>
<div class="widget-content" id="tukialist">
<ul>
</mt:ArchiveListHeader>
<li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> (<$mt:ArchiveCount$>)</a></li>
<mt:ArchiveListFooter>
</ul>
</div>
</div>
</mt:ArchiveListFooter>
</mt:ArchiveList>
</mt:IfArchiveTypeEnabled>
<script type="text/javascript">
<!--
FoldNavigation('tukia','off',false);
//-->
</script>
|
黄色い文字が追加で赤い文字はidです。
赤い文字は好きな文字を決めて下さい。
※ただし、同じページ内で同じidは使えませんので2箇所目以降は違うidを設定して下さい。
以上で設定は終了ですので、再構築して作動を確認してください。
５、折りたたみオープン時とクローズ時の画像を設定する場合。
menufolder.jsの280行目付近を以下のように設定して下さい。
※画像ファイルのパスは絶対パスにして下さい。
271 //-----------------------
272 // 折りたたみマーク関連
273 //-----------------------
274
275 // 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
276 // 表示する：true
277 // 表示しない：false
278 var displayMark = true;
279
280 // 折りたたみマーク
281 // 上：閉じている状態で表示されるマーク
282 // 下：開いている状態で表示されるマーク
283 // 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
284 var openMarkForSideBarMenu = '<img src="http://www.hoge.hohe/d.gif">';
285 var closeMarkForSideBarMenu = '<img src="http://www.hoge.hoge/u.gif">';
286
287 // 折りたたみマーク位置(折りたたみマークを表示する場合のみ有効)
288 // タイトル前に折りたたみマークを配置：true
289 // タイトル後に折りたたみマークを配置：false
290 // 左端または右端に折りたたみマークを配置：true
291 var preMarkForSideBarMenu = true;
292
293 // 折りたたみマーク画像(リンク方式が 'block' の場合のみ使われます)
294 // 画像を使用する：true
295 // 画像を使用しない：false
296 // var image = false;
|
６、サンプル画像
・クローズ状態
・オープン状態
PR
