2009年4月27日

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

April 27,2009 1:55 AM
Tag:[, , ]
Permalink

当サイトで公開しているサイドメニューの折りたたみを、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;
}

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

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

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3