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

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

当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズです。

注：本カスタマイズは Movable Type 3.x 用です。Movable Type 4 で利用する場合は、「概要と本文を切り替える（Movable Type 4・デフォルトテンプレート版）」をご覧ください。

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

サンプル

このエントリーではデフォルトテンプレートのトップページおよびカテゴリーアーカイブ／日付アーカイブに適用する例を紹介します。

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

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

download

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

２．script 要素の追加

カスタマイズを適用するテンプレートに下記の script 要素を追加。

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

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

エントリータイトルのタグ

<h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>

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

<h3 class="entry-header" id="content<$MTEntryID$>name"><$MTEntryTitle$></h3>

４．概要を追加する

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

<div class="entry-body">
   <$MTEntryBody$>
   <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
   <p class="entry-more-link">
      <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
   </p>
   </MTIfNonEmpty>

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

<div class="entry-body">
   <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">
      <$MTEntryBody$>
      <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
      <p class="entry-more-link">
         <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
      </p>
      </MTIfNonEmpty>
   </div>

また、MTEntries の終了タグ直前にスクリプト起動用の script 要素を追加します。

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

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

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

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

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

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

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

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

６．注意事項

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

2007.07.31
カスタマイズ手順に誤りがありましたので修正しました。

2007.11.25
５項を追加しました。また、MT4 版へのリンクを追加しました。