概要と本文を切り替える(Movable Type 4・デフォルトテンプレート版)

概要と本文を切り替える(Movable Type 4・デフォルトテンプレート版)

Posted at November 25,2007 1:07 AM
Tag:[Customize, Entry, Folding, MovableType]

当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズで、以前紹介した「概要と本文を切り替える(デフォルトテンプレート版)」のMovable Type 4・デフォルトテンプレート版です。

概要に本文の先頭から指定文字数を表示する設定になっている(=概要フィールドに何も書いていない)場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。

サンプル

このエントリーではデフォルトテンプレートのトップページおよびカテゴリーアーカイブ/日付アーカイブに適用する例を紹介します(ブログ記事リストを使用したアーカイブにも適用されます)。

1.スクリプトのダウンロード・アップロード

下記のリンクより menufolder.js をダウンロード(本カスタマイズ用に機能追加しています)

download

ダウンロードしたスクリプトを、ブログの index.html と同じディレクトリにアップロードしてください。

2.script 要素の追加

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を開き、head 終了タグの前に下記の script 要素を追加。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

3.エントリータイトルに折りたたみのリンクを与える

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ブログ記事の概要」を開き、エントリータイトルのタグ

<h2 class="asset-name"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>

を下記のように変更します。a 要素を削除して h2 に id 属性を追加しています。

<h2 class="asset-name" id="content<$MTEntryID$>name"><$MTEntryTitle$></h2>

4.概要を追加する

エントリーを表示するタグ

    <div class="asset-content">
<MTIfNonEmpty tag="EntryBody">
        <div class="asset-body">
            <$MTEntryBody$>
        </div>
</MTIfNonEmpty>
<MTIfTagSearch>
        <$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            <a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む
        </div>
</MTIfNonEmpty>
    </div>

に対し、青色のタグを追加します。

    <div class="asset-content">
    <div id="content<$MTEntryID$>list2">
       <p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
    </div>
    <div id="content<$MTEntryID$>list">
<MTIfNonEmpty tag="EntryBody">
        <div class="asset-body">
            <$MTEntryBody$>
        </div>
</MTIfNonEmpty>
<MTIfTagSearch>
        <$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            <a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>の続きを読む
        </div>
</MTIfNonEmpty>
    </div>
    </div>

また、同じ「ブログ記事の概要」テンプレートの一番最後(このテンプレートでは表示されていませんが、MTEntries の終了タグ直前)にスクリプト起動用の script 要素(下記)を追加します。

<script type="text/javascript">
//<![CDATA[ 
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>

これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。

5.折りたたみ状態を保持しないようにする

このカスタマイズでは折りたたみ状態がクッキーを利用して保持されます。つまり、ブラウザをリロードした時等、直前の折りたたみ状態でページが表示されます。

折りたたみ状態を保持したくない場合は、ダウンロードした menufolder.js の中間辺りに下記の設定(赤色)

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする:true
// 無効にする:false
var holdState = true;

を下のように変更してください。

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする:true
// 無効にする:false
var holdState = false;

6.注意事項

概要の表示文字数より本文の文字数が少ないと効果ありません。

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


トラックバック

本文と概要の折りたたみ from MY Blog … 思いつかない…
本文と概要の記事を折りたためるようになりました♪ [続きを読む]

Tracked on November 27, 2007 8:12 AM
コメント

また、Wrodpress版のカスタマイズ方法もエントリーお願いします。

[1] Posted by panser : November 25, 2007 12:21 PM

MT4バージョンの掲載ありがとうございます。
書かれているとおりに設定してみたのですが…
うまくいきません(T-T)

「エントリータイトルに折りたたみのリンクを与える」
のところで書き換えると、何故かエントリータイトルではなくブログタイトルにリンクが与えられてしまいます…。

どのように対処すればよろしいでしょうか?

[2] Posted by 寺山 銀 : November 26, 2007 10:49 PM

すみません。ブログタイトルには何故かはじめからリンクが与えられてます…。

それと、エントリータイトルにもリンクが与えられていて、クリックするとそのエントリーだけのページとなるのですが、
このカスタマイズを利用するとエントリータイトルのリンクが消えてしまうようです。

きっちり確認しないままコメントして申し訳ありませんm(__)m

[3] Posted by 寺山 銀 : November 26, 2007 11:02 PM

>panserさん
こんばんは。
ご返事遅くなり申し訳ありません。
ご質問の件ですが、実現可能であれば別途エントリーしたいと思います。
それではよろしくお願い致します。

>寺山 銀さん
こんばんは。
ご質問の件ですが、2項で設定したスクリプトが指定したURL
http://www.mt-silver.org/blog/menufolder.js
に存在しないようです。
menufolder.js のアップロード先をご確認頂ければ幸いです。
それではよろしくお願い致します。

[4] Posted by yujiro logo : November 27, 2007 1:16 AM

MT4をインストールした場所ではなく、ブログ作成時に作られるindex.htmlの場所だったのですね…
今の今までそういうフォルダが作られていることすら気付いてませんでした(;^_^A アセアセ…

うまくできました♪
ありがとうございますm(__)m

[5] Posted by 寺山 銀 : November 27, 2007 7:39 AM

>寺山 銀さん
こんにちは。
ご連絡ありがとうございました。
無事解決されたようで良かったです。
ではでは!

[6] Posted by yujiro logo : November 27, 2007 10:14 AM

はじめまして。
概要と本文の切り替えを試してみました。
サンプルのようにある文字数にいったら省略させることはできたのですが、
その下に元の全文章が表示されてしまいます。
どのように対処すればよろしいでしょうか?よろしくお願いします。

[7] Posted by citron : December 15, 2007 5:38 AM

>citronさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、おそらくJavaScriptが正常に動作していないのが原因です。
URLをご連絡頂ければより適切な回答ができると思います。
それではよろしくお願い致します。

[8] Posted by yujiro logo : December 15, 2007 12:28 PM

お返事ありがとうございます。
気づいたことがあって、altをクリックして展開した状態になると下の全文は消え、
その状態で記事タイトルをクリックすると本来表示されるべき(であろう)形になります。
お手数かけます。よろしくお願いします(__;)

[9] Posted by citron : December 15, 2007 4:13 PM

>citronさん
こんにちは。
原因が分かりました。
下のコードが改行を除去されて1行になっているためです(1行にしてしまうと、//<![CDATA[ の後ろが全てコメントとしてみなされてしまうため、 JavaScript が動作しません)。

<script type="text/javascript">
//<![CDATA[ 
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>

上のソースコードは加工せず(少なくとも FlodNavigation~ が行頭にくるよう)にお使いください。
それではよろしくお願い致します。

[10] Posted by yujiro logo : December 15, 2007 4:54 PM

コピーペーストをした結果1行になっておりましたのでそこは軽視しておりました…。
本当にお手数をおかけしましたが、
yujiroさんのおかげでうまく動作するようになりました^▽^
ありがとうございました。

[11] Posted by citron : December 15, 2007 5:55 PM

>citronさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようでになによりです。
ではでは!

[12] Posted by yujiro logo : December 17, 2007 1:42 PM

いつもBlog拝見させて頂いています。
大変参考になります。
そこでこちらのカスタマイズに挑戦しようと思うのですが
説明のテンプレートモジュールの中の「ヘッダー」、「ブログ記事の概要」などが
見当たりませんのでカスタマイズにつまづいています。
お手数ですがサポートお願いします。

[13] Posted by conan : May 31, 2008 12:47 AM

>conanさん
こんにちは。
ご返事遅くなってすいません。
ご質問の件ですが、ご利用のテンプレートをお知らせください。
それではよろしくお願いいたします。

[14] Posted by yujiro logo : July 2, 2008 1:05 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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