TopMovable Typeカスタマイズ折りたたみサイドメニュー > サイドメニューの折りたたみ(Movable Type デフォルトテンプレート用)
2006年6月16日

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

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

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

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

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

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


コメント

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

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

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

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

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

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

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

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

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

[2] Posted by yujiro Author Profile Page : November 10, 2007 11:03 PM

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

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

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

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


<body class="layout-two-column-left main-index">

<!-- container開始 -->
<div id="container">
<div id="container-inner" class="pkg">

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


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

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

<? 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>
<!-- alpha左サイドバー終了 -->

<!-- beta開始 -->
 :
(記事部分)
 :
<!-- beta終了 -->

</div>
</div>
<!-- ページボディー終了 -->

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

</div>
</div>
<!-- container終了 -->
</body>


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

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

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

[4] Posted by yujiro Author Profile Page : 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 Author Profile Page : November 16, 2007 4:51 PM

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

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

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

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

[8] Posted by yujiro Author Profile Page : November 19, 2007 1:32 PM
コメントする

*必須



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

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!