小粋空間  -  a cheap joke and a play on words site

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

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

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

サンプル

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

１．スクリプトのダウンロード・アップロード

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

download

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

２．script 要素の追加

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

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

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

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

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

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

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

４．概要を追加する

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

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

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

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

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

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

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

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

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

６．注意事項

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

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