小粋空間: サイドメニューの折りたたみ（Movable Type デフォルトテンプレート用）

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞サイドメニュー＞サイドメニューの折りたたみ（Movable Type デフォルトテンプレート用）

2006年6月16日

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

Posted at June 16,2006 2:16 AM
Category：[サイドメニュー]
Tag：[Customize, MovableType]

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

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

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

１．各テンプレート

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

修正前

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

を削除してください。

２．スタイルシート

下記を 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;
}

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

Posted by yujiro

« phpMyAdmin のアップロードファイルサイズを変更する | Main | Movable Type 3.3 追加タグ一覧 »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

今晩はでしょうか？
マタマタお知恵を拝借いたします、以前お世話になりました山の爺です。

mt3.4からmt4にバージョンアップを行った所、折り畳みが意に反する動きです。（以前は良かったかと思いますが？）
3.4の時はコチラのテンプレートを使わせて頂きましたがmt4ではデフォルトの侭です。

左右とも全て閉じて再度下から開いて見ると何か変です？マウスを当てれば正常に反映します。

色々と上に遣ったり入れ替えたりしてみましたが？何か閉じ忘れ？かとも思われますが？良く解りません。
尚topのみ３カラムでその他は２カラムです。

差し支えないので良いような物ですが何か気になりお知恵を・・・。

更にモウ一点。
mt4の記事編集画面には「引用ボタン（blockquote）」は無い物でしょうか？

[1] Posted by 山の爺 : November 9, 2007 7:44 PM

＞山の爺さん
こんばんは。
ご質問の件ですが、ご説明の内容と拝見させて頂いたサイトからでは、問題点が把握できませんでした。
すいませんが「折り畳みが意に反する動き」と「左右とも全て閉じて再度下から開いて見ると何か変」について、もう少し具体的にお知らせください。

また引用ボタンは左から9番目位にあります。
それではよろしくお願い致します。

[2] Posted by yujiro

: November 10, 2007 11:03 PM

ご迷惑お掛けします。
チョット説明が解り難いと思いますので「body」内のタグのみ付けてみますがコレでお解かり頂くでしょうか？

尚是は２カラム左サイドバーの部分のみ書いています、右の「（）」は無視してください。
更にコメントアウトも無視されて結構です。
少しのアドバイスを頂ければ・・と思いますが・・。

尚昨日の引用文の件は了解です。
私の思い込みで箇条書きと勘違いしていました、ありがとうございます。

以下はbodyのサイドバーのタグの部分です。

<div id="container">
<div id="container-inner" class="pkg">

<? include("<$MTBlogURL$>site-banner.php"); ?>　（バナー用）

<? include("<$MTBlogURL$>annai.php"); ?>　（案内用）

<? include("<$MTBlogURL$>Categories.php"); ?>　（カテゴリ用）

<? include("<$MTBlogURL$>entry.php"); ?>　（エントリ用）

<? include("<$MTBlogURL$>coment.php"); ?>　（コメント用）

<? include("<$MTBlogURL$>search.php"); ?>　（検索用）

<? include("<$MTBlogURL$>sonota.php"); ?>　（その他）

<MTBlogIfCCLicense>
<div class="module-creative-commons module">
<div class="module-content">
<a href="<$MTBlogCCLicenseURL$>"><img alt="クリエイティブ・コモンズ・ライセンス" src="<$MTBlogCCLicenseImage$>" /></a><br />
このブログは、次のライセンスで保護されています。 <a href="<$MTBlogCCLicenseURL$>">クリエイティブ・コモンズ・ライセンス</a>.
</div>
</div>
</MTBlogIfCCLicense>

<? include("<$MTBlogURL$>kanri.php"); ?>　（管理者用）

<? include("<$MTBlogURL$>powered.php"); ?>

</div>
</div>

：
（記事部分）
　：

</div>
</div>

<? include("<$MTBlogURL$>Copyright.php"); ?>

</div>
</div>

</body>

以上ですがお解かり頂けますでしょうか？
説明が難しいです・・サイトを見て頂ければ幸いですが・・？

[3] Posted by 山の爺 : November 12, 2007 11:56 PM

＞山の爺さん
こんにちは。
申し訳ありませんがソースコードでは期待されている動作と現状の不具合の差が分かりません。
ひとつ前に頂いたコメントから推測すると、例えば、「折りたたみマークが表示されない」「このページのこの部分の折りたたみリンクをクリックしても閉じない」「一度クリックするだけでは閉じないが、マウスを（折りたたみマーク部分に）再度当て直すと閉じる」等のような表現になるのではないかと思われます。
見たままの状態を、まずはご説明ください。
それではよろしくお願い致します。

[4] Posted by yujiro

: November 13, 2007 1:08 PM

yujiro様早速の検討有難う御座います。
＞見たままの状態を、まずはご説明ください。

先ずは全て（エントリ、コメント、検索、BlogPeople）を開いた状態でエントリを閉じると・・・。
エントリ部分は閉じる。
コメント部は下の途中で切れBlogPeopleがコメント部に掛かり検索部が上に表示される。コノ状態でBlogPeopleにマウスを当てればコメント部が全表示され、次に検索、BlogPeopleが表示される。

全てを閉じた状態からBlogPeople→コメントと開くとBlogPeopleが消えるなど等で、更にエントリを開くとエントリとコメントの間が空きコメントが表示され、コメント上に検索が表示される（ダブって見える）、BlogPeopleのバーは表示されない。

など等です。この様な状態でマウスを持って行けば正常に表示される。

更に全て開いた状態でコメントを閉じると何故かどの様に説明して良いのやら？
コメントバーは残るのですがBlogPeopleの一部がカテゴリの部分まで上昇、等など様々です。ドチラニしてもマウスを持って行けば正常に表示される。

この様な状態ですが・・？
一度折り畳みを解除してみようと思います・・が？次回のコメント待とします。

申し訳け御座いません！

[5] Posted by 山の爺 : November 13, 2007 6:30 PM

＞山の爺さん
こんにちは。
ご説明ありがとうございます。

IE6で動作が確認できました。
おそらく右下にある検索フォームのclass属性（下記）を修正すれば解消されると思います。

修正前

<!-- 検索開始 -->
<div class="module-search module">
　　　　：

修正後

<!-- 検索開始 -->
<div class="module-search module2">
　　　　：

問題発生時は、該当ページを別のファイル名で保存し、不要な記述を削除しながら動作確認すれば切り分けができます。今回は右カラム以外（左カラム、中央カラムはカラムレイアウトに必要なdiv要素のみ残します）を全て削除し、そこから切り分けを行ってみました。

それではよろしくお願い致します。

[6] Posted by yujiro

: November 16, 2007 4:51 PM

ご指導有難う御座います。
先ずは元に戻し再度挑戦しましたが何か要領を得ず改めて挑戦します。
爺さんも最近時間が思うように取れず・・・。

又宜しくお願い致します。

[7] Posted by 山の爺 : November 17, 2007 8:03 PM

＞山の爺さん
こんにちは。
ご連絡ありがとうございました。
ではでは！

[8] Posted by yujiro

: November 19, 2007 1:32 PM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

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

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