サイドメニューの折りたたみ(Movable Type デフォルトテンプレート用)
当サイトで公開しているサイドメニューの折りたたみを、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;
}
配色は適宜修正してください。
- ListfolderプラグインをMovable Typeに適用する
- サイドメニューの折りたたみ(Movable Type 4.x デフォルトテンプレート用)
- サイドメニューの折りたたみ(定義リスト編)
- サイドメニューの一部を折りたたむ
- サイドメニューの折りたたみマークに画像を使用する
- サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)
- サイドメニューの折りたたみに画像を使用する
- サイドメニューの折りたたみ(v4.0)
- menufolder.js 3.01 リリース
- Movable Type ユーザー・マニュアルをサイドメニューに追加
- サブカテゴリーリストの折りたたみ
- サイドメニュー折りたたみスクリプト(cookie等改善版)
- サイドメニューの折りたたみスクリプト改修中
- サイドメニュー折りたたみの動作遅延対処
- サイドメニュー折りたたみ状態保持スクリプト
今晩はでしょうか?
マタマタお知恵を拝借いたします、以前お世話になりました山の爺です。
mt3.4からmt4にバージョンアップを行った所、折り畳みが意に反する動きです。(以前は良かったかと思いますが?)
3.4の時はコチラのテンプレートを使わせて頂きましたがmt4ではデフォルトの侭です。
左右とも全て閉じて再度下から開いて見ると何か変です?マウスを当てれば正常に反映します。
色々と上に遣ったり入れ替えたりしてみましたが?何か閉じ忘れ?かとも思われますが?良く解りません。
尚topのみ3カラムでその他は2カラムです。
差し支えないので良いような物ですが何か気になりお知恵を・・・。
更にモウ一点。
mt4の記事編集画面には「引用ボタン(blockquote)」は無い物でしょうか?
>山の爺さん
こんばんは。
ご質問の件ですが、ご説明の内容と拝見させて頂いたサイトからでは、問題点が把握できませんでした。
すいませんが「折り畳みが意に反する動き」と「左右とも全て閉じて再度下から開いて見ると何か変」について、もう少し具体的にお知らせください。
また引用ボタンは左から9番目位にあります。
それではよろしくお願い致します。
ご迷惑お掛けします。
チョット説明が解り難いと思いますので「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>
以上ですがお解かり頂けますでしょうか?
説明が難しいです・・サイトを見て頂ければ幸いですが・・?
>山の爺さん
こんにちは。
申し訳ありませんがソースコードでは期待されている動作と現状の不具合の差が分かりません。
ひとつ前に頂いたコメントから推測すると、例えば、「折りたたみマークが表示されない」「このページのこの部分の折りたたみリンクをクリックしても閉じない」「一度クリックするだけでは閉じないが、マウスを(折りたたみマーク部分に)再度当て直すと閉じる」等のような表現になるのではないかと思われます。
見たままの状態を、まずはご説明ください。
それではよろしくお願い致します。
yujiro様早速の検討有難う御座います。
>見たままの状態を、まずはご説明ください。
先ずは全て(エントリ、コメント、検索、BlogPeople)を開いた状態でエントリを閉じると・・・。
エントリ部分は閉じる。
コメント部は下の途中で切れBlogPeopleがコメント部に掛かり検索部が上に表示される。コノ状態でBlogPeopleにマウスを当てればコメント部が全表示され、次に検索、BlogPeopleが表示される。
全てを閉じた状態からBlogPeople→コメントと開くとBlogPeopleが消えるなど等で、更にエントリを開くとエントリとコメントの間が空きコメントが表示され、コメント上に検索が表示される(ダブって見える)、BlogPeopleのバーは表示されない。
など等です。この様な状態でマウスを持って行けば正常に表示される。
更に全て開いた状態でコメントを閉じると何故かどの様に説明して良いのやら?
コメントバーは残るのですがBlogPeopleの一部がカテゴリの部分まで上昇、等など様々です。ドチラニしてもマウスを持って行けば正常に表示される。
この様な状態ですが・・?
一度折り畳みを解除してみようと思います・・が?次回のコメント待とします。
申し訳け御座いません!
>山の爺さん
こんにちは。
ご説明ありがとうございます。
IE6で動作が確認できました。
おそらく右下にある検索フォームのclass属性(下記)を修正すれば解消されると思います。
修正前
<!-- 検索開始 -->
<div class="module-search module">
:
修正後
<!-- 検索開始 -->
<div class="module-search module2">
:
問題発生時は、該当ページを別のファイル名で保存し、不要な記述を削除しながら動作確認すれば切り分けができます。今回は右カラム以外(左カラム、中央カラムはカラムレイアウトに必要なdiv要素のみ残します)を全て削除し、そこから切り分けを行ってみました。
それではよろしくお願い致します。
ご指導有難う御座います。
先ずは元に戻し再度挑戦しましたが何か要領を得ず改めて挑戦します。
爺さんも最近時間が思うように取れず・・・。
又宜しくお願い致します。
>山の爺さん
こんにちは。
ご連絡ありがとうございました。
ではでは!
どうもです。
いつも色々とありがとうございます。
早速ですが質問です。
上記のCSSをコピーして指定の場所に貼りましたが、うんともすんとも言いません。
属性値が違うとおっしゃっていましたが具体的にはどこがどう違うのでしょうか?
MT4でサイドバーをたたむにはどうしたらいいのでしょうか?
よろしくご教授ください。
>諸葛藤さん
こんにちは。
ご質問の件ですが、改めて、下記の手順を行ってみてください。Movable Typeバージョン4.2で、デフォルトテンプレートを想定して、「最近のブログ記事」を折りたたむ例で記述しています。追加する内容は以前のものから一部見直してます。
- ダウンロードした menufolder.js(動作確認のため内容は編集せずに)を、ブログのindex.htmlと同じディレクトリにアップロード
- 「HTMLヘッダー」テンプレートモジュールの最後に下記の1行を追加
<script type="text/javascript" src="<mt:BlogURL />menufolder.js" charset="utf-8"></script>
- 「最近のブログ記事」ウィジェットを下記の内容に入れ替え(青色が追加部分)
<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"> <!-- FoldNavigationByTagName('entry','on', false); //--> </script> </mt:If>
- スタイルシートに追加した内容を、下記に入れ替え
.fold-header { margin: 0 0 2px; padding: 0; background: #a3b8cc; } .fold-header a { width: 100%; } .fold-header a:link, .fold-header a:visited { display: block; padding: 5px 5px 5px 15px; color:#fff; text-decoration: none; } .fold-header a:hover { padding: 5px 5px 5px 15px; color:#fff; background: #999; text-decoration: none!important; }
- 全体を再構築すれば、「最近のブログ記事」が折りたためます
上記の4の配色等は適宜変更してください。
それではよろしくお願い致します。
どうもです。
ご丁寧な回答をありがとうございます。
たためることができました!
ありがとうございます。
しかし、なぜか検索窓とRSSを購読する項目とブログパーツ置き場が閉じれません。
検索窓はソースを記述すると事が見つかったのですが反応しない。
RSS購読とブログパーツ置き場はソースを記述するところが見当たらない。
このような状況です。
ブログパーツ置き場とRSS購読はウィジットヘッダーが表示されてないのでこれを表示すればいいのでしょうか?表示の仕方がわからないのですが・・・。
検索窓に関してはまったくわかりません。
一応ソースを貼っておきますのでお目を通していただけたら幸いです。
<div class="widget-search widget">
<h3 class="widget-header" fold-header" id="srname">検索</h3>
<div class="widget-content" id="srlist">
<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" />
<mt:If name="search_results">
<input type="hidden" name="IncludeBlogs" value="<$mt:SearchIncludeBlogs$>" />
<mt:Ignore>
<!-- use these options only with MT::App::Search::Legacy -->
<ul class="search-options">
<li><input type="checkbox" name="CaseSearch" /> 大文字/小文字を区別する</li>
<li><input type="checkbox" name="RegexSearch" /> 正規表現</li>
</ul>
</mt:Ignore>
<mt:Else>
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
</mt:If>
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<input type="submit" accesskey="4" value="検索" />
</form>
</div>
</div>
<mt:If name="search_results">
<mt:IfTagSearch>
<div class="widget-tags widget">
<h3 class="widget-header">タグ</h3>
<div class="widget-content">
<ul>
<mt:Tags>
<li><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;"><$mt:TagName$> (<$mt:TagCount$>)</a></li>
</mt:Tags>
</ul>
</div>
</div>
</mt:IfTagSearch>
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
</mt:If>
よろしくお願いします。
>諸葛藤さん
こんばんは。
ご質問の件ですが、「fold-header」の直前にある「"」が冗長なようです。
ソースを貼り付けるときは、すいませんがコメント投稿フォームのすぐ上に記載している注意書きの作業を行なってください。
それではよろしくお願い致します。
ご教授ありがとうございます。
教えて頂いたとおりに
h3 class="widget-header fold-header" id="srname"
このようにしたのですが・・・。
何故か閉まりませんし、背景画像等がおかしくなりました。
その状態で公開してるのでURLから飛んでみて頂けたら幸いです。
これはどのように処理したらよろしいでしょうか?
>諸葛藤さん
こんにちは。
まず、他の折りたたみについても、「fold-header」の直前にある「"」が冗長なようですので、最初にそれを直してください(下の回答はその後ご覧ください)。
余談ですが、class属性の値には、半角スペースをはさんで、次のように複数の値を設定できます。fold-header の追加も、この仕様を利用しています。
class="foo bar hoge"
上記の修正が完了したら、すべての折りたたみの配色が変わってしまったと思います。これが、追加したCSSが正常に反映されている状態です(折りたたみが動作していたのは、ブラウザがうまく解釈してくれていたのだと思います)。
後は、[10]のコメントで「配色は適当に変更してください」とお願いしたとおりです。例えば、下記の赤色部分を変更すればマウスをポイントしていないときの色が変更できます。background~ の行を丸ごと削除してもかまいません。
.fold-header {
margin: 0 0 2px;
padding: 0;
background: #a3b8cc;
}
それではよろしくお願い致します。
迅速な回答ありがとうございます。
早速すべてを直しました。今まではブラウザが上手い事解釈してくれてただけだったんですね^^;
色が全て変わりました。これは正常に作動してるって事なんですね。
ここまではOKです。
でも、まだカラーは修正していません。
やはり検索だけ動きません。
どうしてでしょうか。
また月別アーカイブが
月別
アーカイブ
という風に表示されます。
これはどういう処理をすれば以前のような1行表示になるのでしょうか?
なかなか解決できずにすいません。
すいません。回答もれでした。
一点目は、検索用の JavaScript(下記)を追加してください。
<script type="text/javascript">
<!--
FoldNavigation('sr','off',ture);
//-->
</script>
二点目は、月別アーカイブゐジェットの中にある
<h3 class="widget-header fold-header" id="maname"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
を
<h3 class="widget-header fold-header" id="maname"><$mt:ArchiveTypeLabel$> アーカイブ</h3>
に修正してください(タイトルの中にリンク用のタグがあると、折りたたみのリンクがうまく生成されません)。
それではよろしくお願い致します。
ありがとうございます。
月別アーカイブの表示は自分の求めるものになりました。
ありがとうございます。
検索は相変わらずおかしいです。
ウィジット内の
FoldNavigationByTagName('sr','off', false);
このタグを
FoldNavigation('sr','off',ture);
こう書き直すという事でしょうか?
それともJavaScriptテンプレート内に追加するのでしょうか?
それともウィジット内に追加でしょうか?
一応上記3つのうち1番上と一番下は試してみました。
が、うまく動作してくれませんでした。
よろしくご教授願います。
>諸葛藤さん
こんにちは。
一部回答誤りがありました。
[16]のコメントの一点目については修正しないで大丈夫です。ただ、
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
がメインページのソースに存在していないので、「検索」ウィジェットへの上記コードの追加位置が正しくないと思われます。
ということで、「検索」ウィジェットの一番最後に、
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
を追加してみてください。
それではよろしくお願い致します。
こんにちは。
早速追加しました。
が、特に変わりありません。
今のソースの状況はコメント15の時と同じ状況です。
何故検索だけ動作しないのでしょうか?
検索ウィジット以外の部分で何かが干渉してるのでしょうか?
よろしくご教授ください。
>諸葛藤さん
こんにちは。
各ページは再構築されましたでしょうか。
ご確認ください。
再構築ですが、毎回必ずやっています。
念のためもう一度やってみましたがやはり変化はありませんでした。
再構築は「すべてのページ」で纏めてやっています。
何か他の方法があるのでしょうか?
ご教授いただけたら幸いです。
どうもです。
今他の事で色々いじっていましたらいつの間にか折りたためるようになっていました。
どうしてなのかはわかりませんが・・・。
確かに先ほど、念のためと再構築をしましたが動作に変化はありませんでした。
何故動いたのかが分からないのでもやもやしますが・・・。
一応解決と言う事になりますでしょうか?
>諸葛藤さん
こんばんは。
正常に動作しているので大丈夫だと思います。
ブラウザのキャッシュがたまっていただけかもしれません。
他のパーツも、これまでの内容を確認しながら行なってみてください。
それではよろしくお願い致します。
こんにちは。
なんとか自力でやろうと残りのパーツをいじってたのですが、お手上げです。
また、ご教授いただけますでしょうか?
ブログパーツもフィードも最後に挿入するスクリプトの挿入場所がどうしてもわからないんです。
たぶん、これが原因で動かないんだと思うのですが・・・。
>諸葛藤さん
こんにちは。
ブログパーツやフィードを、どのテンプレートにどのように埋め込んでいるのか分からないと回答できないので、該当のテンプレートまたはウィジェットをコメント欄に貼り付けてお送りください。
「<」や「>」の変換をお忘れなく。
それではよろしくお願い致します。
フィードのソースは特に変えていません。
RSS2.0のソースを加えてるくらいです。
基本的にはデフォルトのままです。変える技術もありませんし・・・。
パーツのほうですが
<div class="widget-parts widget">
<h3 class="widget-header fold-header" id="paname">ブログパーツ</h3>
<div class="widget-content" id="palist">
ブログパーツのURLは生成されたものをペーストしただけです。
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
</div>
</div>
です。今はこの位置に入れてますがうまく動きません
</div>
ここにもいれてみたこともあります
</div>
これもダメでした。
何か他の記述がいるのでしょうか?
よろしくご教授ください。
>諸葛藤さん
上記の設定の、
FoldNavigationByTagName('sr','off', false);
を
FoldNavigationByTagName('pa','off', false);
にしてください。
フィードの方も同じ原因かもしれません。
それではよろしくお願い致します。
どこに挿入するかばかりで肝心の部分の書き換えを怠っていたようですね。
申しわけありません。
両者とも正常に動きはします。
が、フィードとブログパーツの間に妙な空白ができているのはなぜでしょう・・・。
あと、検索が動かなくなりました。
これもブラウザのキャッシュがたまっているからなのでしょうか?
前回検索のみ閉じないと御相談しましたが、突然動作しはじめ・・・ブラウザのキャッシュがたまってるという事で一応は解決したように思いましたが・・・。
不思議でたまりません。
いったいどういう事なのかお知恵を拝借できるでしょうか。
>諸葛藤さん
こんばんは。
まず、「検索」ウィジェットの内容をコメント欄に貼り付けてください(内容は一字一句変えずにお願いします)。
また、空白ができるのは、「ブログパーツ」のh3タグの行頭に全角スペースがあるのが原因のようです。
それではよろしくお願い致します。
<div class="widget-search widget">
<h3 class="widget-header fold-header" id="srname">検索</h3>
<div class="widget-content" id="srlist">
<form method="get" action="<$mt:CGIPath$>;<$mt:SearchScript$>">
<input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" />
<mt:If name="search_results">
<input type="hidden" name="IncludeBlogs" value="<$mt:SearchIncludeBlogs$>" />
<mt:Ignore>
<!-- use these options only with MT::App::Search::Legacy -->
<ul class="search-options">
<li><input type="checkbox" name="CaseSearch" /> 大文字/小文字を区別する</li>
<li><input type="checkbox" name="RegexSearch" /> 正規表現</li>
</ul>
</mt:Ignore>
<mt:Else>
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
</mt:If>
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" >>
<input type="submit" accesskey="4" value="検索" />
</form>
</div>
</div>
<mt:If name="search_results">
<mt:IfTagSearch>
<iv class="widget-tags widget">
<h3 class="widget-header">タグ</h3>
<div class="widget-content">
<ul>
<mt:Tags>
<li><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;"><$mt:TagName$> (<$mt:TagCount$>)</a></li>
<mt:Tags>
</ul>
</div>
</div>
</mt:IfTagSearch>
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
</mt:If>
です。おそらくコメント11の時と変ったところはほとんどないはずです。
2行目の「"」を抜いたくらいでしょうか。
あとは教えていただいたとおりにやっているのですが・・・。
よろしくご教授願います。
>諸葛藤さん
こんにちは。
[18]のコメントで、「一番下に」と申し上げてます通り、
…前略…
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
</mt:If>
ではなく、
…前略…
</mt:If>
<script type="text/javascript">
<!--
FoldNavigationByTagName('sr','off', false);
//-->
</script>
としてください。
それではよろしくお願いいたします。
またもやこちら側の単純なミスだったのですね・・・。
申しわけありませんでした。
おかげさまで自分の求める姿になりました。
感謝の思いでいっぱいです。
また、何かとご教授いただく事もあるかと思いますが、よろしくお願いします。
では、失礼します。