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

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

Posted at April 27,2009 1:55 AM
Tag:[Customize, Folding, MovableType]

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

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

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

1.スクリプトのダウンロード・アップロード

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

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

2.テンプレートの修正

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「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$>

3.ウィジェットの修正

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

<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>

4.スタイルシートの修正

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)