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

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

Posted at July 23,2007 2:15 AM
Tag:[Customize, Entry, Folding, MovableType]

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

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

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

サンプル

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

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

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

download

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

2.script 要素の追加

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

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

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

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

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

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

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

4.概要を追加する

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

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

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

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

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

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

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

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

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

6.注意事項

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

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

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

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


トラックバック

記事を折りたたみ表示しました from サラリーマン道
トップページ、カテゴリーアーカイヴページ、月別アーカイヴページ中の記事をJavaScriptを用いてサマリー表示と全文表示をとをワンクリックで切り替えら... [続きを読む]

Tracked on July 23, 2007 9:56 AM
コメント

こんにちわ
いつも勉強させていただいております。
今回、この「概要と本文を切り替える(デフォルトテンプレート版)
」を使わせていただこうと思ったのですが…。

微妙に何か違うようで…
「エントリータイトルのタグ」の記述や、「MTEntries の終了タグ」が見あたらなかったり…
と言った具合です。

テンプレートモジュールの「ブログ記事の概要」を見ているのですが、そこから間違っているのでしょうか?

ご教授いただければ幸いです。

[1] Posted by 寺山 銀 : November 9, 2007 5:35 PM

>寺山 銀さん
こんにちは。
ご返事遅くなり申し訳ありません。
本記事はMT3向けの内容ですので、MT4対応の記事を別途エントリーしたいと思います。
それではよろしくお願い致します。

[2] Posted by yujiro logo : November 15, 2007 1:58 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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