« アーカイブページのページ分割 | メイン | しらさぎ荘の鮎料理 »

2005年06月30日

サイドメニューの折りたたみ

Category : [ MT Memo ]

サイドメニュー折りたたみスクリプト(cookie等改善版)を参考に実行。

 menufolder.js の248行目の”var linkType = 'unblock';”を”var linkType = 'block';”と変更すると、”Recent Entries”のタイトル部分のDIV属性がなくなった状態になってつぶれてしまう。どうやらスタイルシートの設定をミスしている模様。間違いなく、なんか勘違いをしてそうだ^^;

スタイルシートは下記のようにしていた。(青い文字が追加した部分)

/* 「検索」「コメント」「エントリー」「カテゴリ」「リンク」等の見出し */
.sidetitle {
    color:#666;
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    margin-top:3px;
    background:#f6f6f6;
    line-height:140%;
    padding:1px 0px;
    text-align:center;
    border: 1px solid #999999;
}

/* 折りたたみスクリプト用 */
.sidetitle a.foldmark {
     font-size:9px; /* マークのフォントサイズ */
     padding-right:3px; /* タイトルとマーク間のパディング */
     text-decoration: none; /* マークの文字装飾(何も表示しない) */
     }

 でもう一度小粋空間さんとこを探してたら、サイドメニューの折りたたみ(v4.0)を発見。

menufolder.js の248,257,262,263行目を下記のように修正。

248行目:var linkType = 'block';
257行目:var displayMark = true;
262行目:var openMarkForSideBarMenu = '';
263行目:var closeMarkForSideBarMenu = '';



スタイルシートの修正(青い文字が追加した部分)

/* 「検索」「コメント」「エントリー」「カテゴリ」「リンク」等の見出し */
.sidetitle {
    color:#666;
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    margin-top:3px;
    background:#f6f6f6;
    line-height:140%;
    padding:1px 0px;
    text-align:center;
    border: 1px solid #999999;
}

/* 折りたたみスクリプト用 */
.sidetitle2 {
     width: auto;
     margin:3px 0px 0px 0px;
     padding: 0px;
     text-align: center; /* テキスト配置 */
}

.sidetitle2 a {
     width: auto;
}

/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
     display: block;
     padding: 2px;
     border: 1px solid #999999; /* 枠線 */
     color:#666666; /* 文字色 */
     background-color:#f6f6f6; /* 背景色 */
     font-family: Verdana, Arial, sans-serif;
     font-size:10px;
     text-decoration: none;
}

/* マウスポイント時 */
.sidetitle2 a:hover {
     padding: 2px;
     border: 1px solid #999999; /* 枠線 */
     color:#ffffff; /* 文字色 */
     background-color: #999999; /* 背景色 */
     font-family: Verdana, Arial, sans-serif;
     font-size:10px;
     text-decoration: none;
}
/* 折りたたみスクリプト用ここまで */



テンプレートの修正(青い文字が追加した部分)

<div class="sidetitle2" id="entryname">
Recent Entries
</div>

<div class="side" id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

<script type="text/javascript">
<!--
FoldNavigation('entry','on',true);
//-->
</script>

下記のインクルード文を<head>~</head>中に挿入

<script language="JavaScript" type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>



以上でバッチリ動作!
今はまだエントリーの部分、それもトップページだけなので、これから追加修正します。これでひと段落。

 テンプレート部分の修正方法にいて詳しくは小粋空間さんのサイドメニュー折りたたみスクリプト(cookie等改善版)を参照してください。

トラックバックURL

このエントリーのトラックバックURL:
http://www.mistgrass.com/blog/mt-tlackback.cgi/79

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)