2006年6月16日

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

June 16,2006 2:16 AM
Tag:[, ]
Permalink

当サイトで公開しているサイドメニューの折りたたみを、Movable Type のデフォルトテンプレートで利用する場合、テンプレートおよびスタイルシートはこれまでのエントリーやマニュアルとは異なった修正が必要になります。
ということで、以下に修正方法を記します。menufolder.js 自体の設定は同じですが、ここではブロック指定による折りたたみのみの方法をご紹介します。

注:このエントリーは Movable Type バージョン 3 の内容です

Windows + IE6.0/Firefox1.5/Opera8 で動作を確認しています。サンプルも用意しましたのでお試しください(最近のエントリー/カテゴリー/アーカイブが折りたためます)。

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

1.各テンプレート

「最近のエントリー」を例に修正前と修正後のタグを示します。修正対象を赤色、修正後または追加部分を青色で示しています。

修正前

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
          :
         (中略)
          :
   </div>
</div>

修正後

<div class="module-archives module2">
   <h2 class="module-header2" id="entryname">最近のエントリー</h2>
   <div class="module-content" id="entrylist">
          :
         (中略)
          :
   </div>
</div>

アーカイブ(月別アーカイブ)に適用する場合は、タイトルのリンク

<h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>

を削除してください。

2.スタイルシート

下記を styles-site.css の最後に追加してください。

.module2 {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #f3f6f9;
    background: #dae0e6;
    overflow: hidden;
    width: 100%;
}
 
.module-header2 {
    width: auto;
    margin: 0;
    padding: 0;
    border-left: 5px solid #36414d;
    font-weight: bold;
    background: #a3b8cc;
}
 
.module-header2 a {
    width: auto;
}
 
.module-header2 a:link,
.module-header2 a:visited {
    display: block;
    padding: 5px;
    _padding: 3px 0 3px 5px;
    color:#ffffff;
    font-size:11px;
}
 
.module-header2 a:hover {
    padding: 5px;
    _padding: 3px 0 3px 5px;
    color:#ffffff;
    background: #999999;
    font-size:11px;
}

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

Comments [32] | 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