＞ ＞ ＞ ＞ 概要と本文を切り替える（公開テンプレート版）

概要と本文を切り替える（公開テンプレート版）

Posted at August 1,2007 12:18 AM
Tag：[Customize, Entry, Folding, MovableType]

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

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

サンプル

このエントリーでは公開テンプレートのトップページおよびカテゴリーアーカイブ／日付アーカイブに適用する例を紹介します。
なお先日紹介したデフォルトテンプレート版のカスタマイズ手順に一部誤りがありましたので修正しています（本エントリーは修正済）。

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

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

download

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

２．script 要素の追加

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

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

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

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

<h2 id="a<$MTEntryID pad="1"$>" class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></h2>

を下記のように変更します。a 要素を削除して h2 の id 属性を書き換えます。

<h2 id="content<$MTEntryID$>name" class="entry-header"><$MTEntryTitle encode_html="1"$></h2>

４．概要を追加する

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

<!-- エントリー -->
<div class="entry-content">
   <$MTEntryBody$>
 
   <!-- 追記 -->
   <MTIfNonEmpty tag="EntryMore">
   <p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
   </MTIfNonEmpty>

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

<!-- エントリー -->
<div class="entry-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">
   <$MTEntryBody$>
 
   <!-- 追記 -->
   <MTIfNonEmpty tag="EntryMore">
   <p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
   </MTIfNonEmpty>
   </div>

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

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

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

５．注意事項

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

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ MT4のカスタマイズ from FOX3 Diary
"概要と本文を切り替える（公開テンプレート版）"を適用したんですが、本文に切り替... [続きを読む]

Tracked on November 30, 2007 12:04 AM
コメント

yujiroさん
　どうも、keiです。

　いつも、便利なカスタマイズを、有り難うございます。

　今回は、"概要と本文を切り替える（公開テンプレート版）"をMT4で使用してみたんですが、

　エントリーの表示なんですが、概要のみの表示から「全部を読む」をクリックすると、本文が表示され成功したと思ったんですが、上にそのまま概要が残ったままになってしまっています。

いろいろと試してみているんですが、いまいち分からないんです。
お忙しい中、すいません。　アドバイスをいただければ嬉しいのですが、宜しくお願いします。

[1] Posted by kei : November 28, 2007 10:29 PM

＞keiさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、１項にあります、この記事からリンクされている menufolder.js（ver7.01～） に差し替え願えますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro logo : November 29, 2007 10:36 AM

＞yujiroさん

ども、keiです。
ああ、お手数おかけしました。

menufolder.jpをバージョンアップさせるの忘れていました。
よく読んでいるようで、抜けてますね。

バージョンアップさせたら、問題なく表示されるようになりました、有り難うございました。

[3] Posted by kei : November 29, 2007 9:47 PM

＞keiさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。

少し前に私も同じ失敗をしてましたので（笑）。

[4] Posted by yujiro logo : November 29, 2007 10:24 PM

いつもありがとうございます。MT4の公開テンプレートでカスタマイズしてみましたがどうしてもうまくいきません。右のサイドが下にきてしまいうまくいきません。お手すきのときにおしえてもらえませんでしょうか？よろしくおねがいします。

[5] Posted by 揚羽蝶 logo : November 30, 2007 8:03 AM

＞揚羽蝶さん
こんにちは。
ご質問の件ですが、解消されましたでしょうか。
午前中に少し拝見させて頂いた限りでは、右サイドバーにあったプルダウンメニュー（セレクトボックス）の横幅がサイドバーの幅を超えているのが原因のように思われました。
それではよろしくお願い致します。

[6] Posted by yujiro logo : November 30, 2007 5:52 PM

ありがとうございます＾＾無事にできました。
これからもよろしくおねがいします。
二重コメントすみません。

[7] Posted by 揚羽蝶 logo : December 1, 2007 2:05 PM

＞揚羽蝶さん
こんばんは。
ご連絡ありがとうございます。
重複コメントは削除しておきました。
ではでは！

[8] Posted by yujiro logo : December 2, 2007 9:27 PM

このエントリー通りにしてるのですが折りたたみ表示させた後に
また続きを読むができてしまい全文表示できません。
また、最後のscript要素挿入箇所が説明通りの箇所が説明通りの
箇所がありませんしわかりません。
MT4.1ようにもう少しサポートして頂けないでしょうか
宜しくお願いします

[9] Posted by conan : June 21, 2008 9:14 PM

すみません。　追記に記事を書き込んでいたので重複して表示していたようでした。
追記を切り替えるとはまた違う考え方なんですね
誠に失礼しました。

[10] Posted by conan : June 21, 2008 9:47 PM

いつもお世話になっております。
同じようなものかわかりませんが、
「小粋空間」のトップページの様に
タイトルの表示のみにしたいのですが、
この応用でよいのでしょうか？
教えていただけたら幸いです

[11] Posted by ＳＯＵＬ : August 30, 2008 2:05 PM

＞ＳＯＵＬさん
こんばんは。
はい、その通りです。
もし設定が分からないようであればご連絡ください。
（気が向いたら当ブログの方法をエントリーするかもしれません）
それではよろしくお願い致します。

[12] Posted by yujiro logo : August 31, 2008 2:16 AM

yujiro様
早速の回答ありがとうございます。
本を見ながら勉強中なのですが。。
なかなか難しくて・・・
少し自分で弄ってみます。
分からないことがあれば質問させていただきます。
ありがとうございました。

[13] Posted by ＳＯＵＬ : August 31, 2008 7:24 AM

MT4.2になってからこちらのどのカスタマイズも少し修正方法が
違うみたいですね
ＭＴ4.2のテンプレートのタグ構成が違うからでしょうね
カスタマイズがなかなかできないので困ります
また少しづつＭＴ4.2でのカスタマイズ方法もエントリーして頂ければ幸いです
宜しくお願いします

[14] Posted by conan : August 31, 2008 10:47 PM

いつもお世話になっています。
メインページではなんとかできたのですがカテゴリー、タグ、月別アーカイブ
ではテンプレートをどのように修正すれば良いのでしょうか？
全てのページでこのカスタマイズを適用させたいと思います。
お手数ですがご教授の程宜しくお願いします。

[15] Posted by conan : September 15, 2008 11:18 PM

投稿した後でscriptの追記してみたところ表示させる事ができました。
すみませんでした。

[16] Posted by conan : September 15, 2008 11:52 PM

＞conanさん
こんばんは。
ご質問の件、自己解決されたようでよかったです。
ご連絡ありがとうございました。
ではでは！

[17] Posted by yujiro logo : September 15, 2008 11:57 PM

いつも大変お世話になっております。

使って見たいのですが、
これを使うことで各ページの
アクセス解析は可能なのでしょうか？

それぞれのページにアクセス解析のたぐを
埋め込んでいます。

これが集計できないと困るなあと思ったんですが、
続きを読むを押したらカウントされると
考えていいのでしょうか？

[18] Posted by aji : December 16, 2009 12:17 PM

＞ajiさん
こんばんは。
ご質問の件ですが、本カスタマイズは同じページで表示を切り替えるだけなので、アクセス解析とは特に関連はありません。
それではよろしくお願い致します。

[19] Posted by yujiro logo : December 17, 2009 1:21 AM
コメントする
greeting

*必須

*必須（非表示）


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

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

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

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