小粋空間  -  a cheap joke and a play on words site

サイドメニューの折りたたみ（Movable Type 4.x デフォルトテンプレート用）

当サイトで公開しているサイドメニューの折りたたみを、Movable Type 4.2 のデフォルトテンプレートで利用する場合の設定方法を記します。

サンプルも用意しましたのでお試しください（最近のブログ記事／最近のコメント／タグクラウド／カテゴリ／月別アーカイブが折りたためます）。

デフォルトテンプレートの折りたたみサンプル

１．スクリプトのダウンロード・アップロード

スクリプトのページから、折りたたみ用スクリプト menufolder.js のリンクを右クリックして「名前をつけてリンク先を保存」等でダウンロードして、同じ名前でローカルPCに保存してください。

ダウンロード後、menufolder.js をブログのディレクトリ（ブログのメインページとなる index.html があるディレクトリ）にアップロードしてください。

２．テンプレートの修正

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「HTMLヘッダー」テンプレートモジュールを選択して、下記の青色部分を追加します。

<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>
<$mt:CCLicenseRDF$>

３．ウィジェットの修正

ブログ管理画面より「デザイン」→「ウィジェット」をクリックし、折りたたみたいウィジェットを選択します。「最近のブログ記事」の場合、次の青色部分を追加します。

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header fold-header" id="entryname">最近のブログ記事</h3>
    <div class="widget-content" id="entrylist">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
<script type="text/javascript">
<!--
FoldNavigation('entry','off',false);
//-->
</script>
</mt:If>

赤色部分は追加したときに、ウィジェットによって書き換える部分です。FoldNavigation の第2パラメータの off は、ページを表示したときに、リストを閉じた状態で表示します。リストを開いた状態で表示したい場合は、on を設定してください。

id 属性値とFoldNavigation の第1パラメータは、ウィジェットによって変更します。「最近のコメント」の場合は次のようになります。

<mt:If tag="BlogCommentCount">
    <mt:Comments lastn="10" sort_order="descend">
        <mt:CommentsHeader>
<div class="widget-recent-comments widget">
    <h3 class="widget-header fold-header" id="commentname">最近のコメント</h3>
    <div class="widget-content" id="commentlist">
        <ul>
        </mt:CommentsHeader>
            <li><strong><$mt:CommentAuthor$>:</strong> <$mt:CommentBody remove_html="1" words="10"$> <a href="<$mt:CommentLink$>" title="<mt:CommentEntry><$mt:EntryTitle$></mt:CommentEntry>へのコメント">続きを読む</a></li>
        <mt:CommentsFooter>
        </ul>
    </div>
</div>
        </mt:CommentsFooter>
    </mt:Comments>
<script type="text/javascript">
<!--
FoldNavigation('comment','off',false);
//-->
</script>
</mt:If>

id 属性値は、ページ内に同じ値を設定してはいけない（例えば、id="hoge" という記述がページ内に2ヶ所以上あってはいけない）ので、設定するパーツによって id 属性値を変更してください。

また、「アーカイブ（月別アーカイブ）」ウィジェットを折りたたむ場合、タイトル部分（下記）から、

<h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>

リンクを削除して、class 属性と id 属性を追加してください（下記）。

<h3 class="widget-header fold-header" id="monthlyname"><$mt:ArchiveTypeLabel$> アーカイブ</h3>

４．スタイルシートの修正

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「スタイルシート」インデックステンプレートを選択して、下記を最後に追加してください。

.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;
}

配色は適宜修正してください。

これですべてを再構築すれば、サンプルのように折りたためるようになります。

• 
• Tweet