本文と追記を切り替える Web2.0: 小粋空間

ナビゲーションをスキップする

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞追記＞本文と追記を切り替える Web2.0

本文と追記を切り替える Web2.0

Posted at May 20,2008 1:33 AM
Tag：[Customize, Folding, MovableType]

本文と追記の表示を切り替えるカスタマイズです。
ご要望を頂きましたので、まずは Movable Type の「追記文章の折りたたみ Web2.0」をアレンジしたものをご紹介します。

１．特徴

JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示し、本文を非表示にします。
JavaScript が無効の場合はブログ記事アーカイブにジャンプします。
ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。

２．サンプル

本文と追記を切り替えるサンプル

３．script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

script.aculo.us のページ

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

script.aculo.us のページ

ダウンロードアーカイブを解凍して内容をサーバのメインページと同じディレクトリにアップロード。ここでは下記のような配置になっていることを前提に話を進めます。

/scriptaculous
　　　/lib
　　　　 　prototype.js
　　　/src
　　　　　 controls.js
　　　　 　effects.js
　　　　 　scriptaculous.js

scriptaculous というディレクトリは解凍後のディレクトリ名を変更しています。lib と src はアーカイブのままの構成です。src 配下にはここで利用しないファイルも含まれていますので、まとめてアップロードしておくといいでしょう。

４．テンプレートの修正1（HTMLヘッダ修正）

折りたたみをしたいテンプレートの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
  element = $('Body' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

6行目以降は script 開始・終了タグを外して外部ファイルにしても構いません（その場合インクルードするための script タグは effct.js をインクルードしている script 要素の下に記述してください）。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { ... } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．テンプレートの修正2（追記文章表示用 MT タグ修正）

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。

変更前（デフォルトテンプレート）

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="entry-more-link">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTIfNonEmpty>

変更前（公開テンプレート）

<MTEntryIfExtended>
<div class="entry-more">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>

変更後（デフォルトテンプレート／公開テンプレート共通）

<div id="Body<$MTEntryID$>"><$MTEntryBody$></div>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
</div>
</MTIfNonEmpty>

ブログ記事アーカイブは下記の内容を利用してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更後・ブログ記事アーカイブ（デフォルトテンプレート／公開テンプレート共通）

<div id="Body<$MTEntryID$>"><$MTEntryBody$></div>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください（Firefox で正常に動作しなくなります）。

６．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

７．その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

yujiroさま

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

早速導入させていただいたのですが
「続きを読む」を押しても表示が一番上に戻りません。
上までスクロールしなければなりません。
本文が長いせいでしょうか？
対処方法などございますか。
よろしくお願い致します。

[1] Posted by みゅみゅ : November 19, 2008 3:10 PM

yujiroさま

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

[2] Posted by みゅみゅ : November 19, 2008 3:15 PM

＞みゅみゅさん
こんばんは。
ご質問の件ですが、たしかに折りたたみ切り替え時に一番上に戻る設定になっていないのが原因です。

以下の内容に書き換えて試してみてください。

４項

…前略…
function ajaxShowHide(entryID, url) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
            location.href = url + '#Link' + entryID;
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
            location.href = url + '#Link' + entryID;
        }
    };
    Effect.BlindUp(element, options);
  }
  element = $('Body' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
…後略…

５項（変更箇所のみピンポイントで）

変更前

onclick="ajaxShowHide('<$MTEntryID$>');return false;"

変更後

onclick="ajaxShowHide('<$MTEntryID$>', '<$MTEntryLink$>');return false;"

[3] Posted by yujiro

: November 21, 2008 11:44 PM

yujiroさま

ありがとうございます。
早速ご指示の通り修正してみました。
一番上には戻るのですが、本文が折りたたみになりません。
全て表示された状態で一番上に戻ります。
どこか間違って修正しているでしょうか。
お忙しいところ申し訳ありませんが、確認願えますでしょうか。
よろしくお願いいたします。

[4] Posted by みゅみゅ : November 22, 2008 4:51 PM

＞みゅみゅさん
こんばんは。
すいません。５項の修正のみ、再度[3]のコメントの内容を設定し直してください（typoがありました）。
それではよろしくお願い致します。

[5] Posted by yujiro

: November 22, 2008 11:04 PM

yujiroさま

こんばんは。
修正してみたのですがうまく行きません。
最初に見ていただいた、「一番上まで行かない場所」あたりでリロード（？）されて
折りたたみになっていない状態で上まで戻ります。
URLが　･/archives/･･･と変わってます。
説明が下手ですみません。
見ていただくと分かると思います。
お忙しいところ何度もすみません。
よろしくお願いいたします。

[6] Posted by みゅみゅ : November 23, 2008 1:51 AM

＞みゅみゅさん
こんばんは。
たびたびすいません。勘違いしていました。

トップページに設置する場合は、５項の修正を次の内容にしてください。

onclick="ajaxShowHide('<$MTEntryID$>', '<$MTBlogURL$>');return false;"

月別アーカイブやカテゴリアーカイブには次の内容を設定してください。

onclick="ajaxShowHide('<$MTEntryID$>', '<$MTArchiveLink$>');return false;"

[7] Posted by yujiro

: November 23, 2008 9:40 PM

yujiroさま

こんばんは。
トップページはうまく行きました。
ありがとうございました。
その他なんですが「続きを読む>>」の所が一番上に来てしまいます。
それをもう一度クリックするとちゃんと表示されます。

月別アーカイブやカテゴリアーカイブなんですが
恥ずかしながら基本が分かっておりません。
一応、ブログ記事の詳細とウェブページの詳細を修正してみたのですが
間違ってますでしょうか？
テンプレートは4.2を使わせていただいております。
何度もすみません。
よろしくお願いいたします。

[8] Posted by みゅみゅ : November 25, 2008 2:06 AM

＞みゅみゅさん
こんにちは。
この記事のカスタマイズは「本文と追記を切り替える」なので、追記を表示している間は追記を一番上に表示して、本文は非表示になります。もう一度クリックすると、追記をっ表示にして本文を表示します。したがって、

＞＞「続きを読む>>」の所が一番上に来てしまいます。
＞＞それをもう一度クリックするとちゃんと表示されます。

のご質問については正常な動作です、という回答になりますが、追記を表示したときも本文を表示したままにしておく場合は、「追記文章の折りたたみ Web2.0」を参照してください。

たびたびすいませんが、メインページ・各アーカイブ・ブログ記事ページすべてに適用する場合は、下記の各テンプレートの「変更後」の状態に修正してください。

「ブログ記事の概要」テンプレートモジュール

変更前

<mt:if tag="EntryBody">
   <mt:EntryBody />
</mt:if>
<mt:if tag="EntryMore">
   <p class="entry-more"><a href="<mt:entryPermalink />#more">続きを読む "<mt:entryTitle encode_html="1" />"</a></p>
</mt:if>

変更後

<mt:if tag="EntryBody">
  <div id="Body<mt:EntryID />"><mt:EntryBody /></div>
</mt:if>
<mt:if tag="EntryMore">
  <mt:if name="category_archive">
<div id="Link<mt:EntryID />" class="ajax-entry-more-link"><a href="<mt:EntryPermalink />" name="<mt:EntryID pad="1" />" onclick="ajaxShowHide('<mt:EntryID />', '<mt:CategoryArchiveLink />');return false;">続きを読む ≫</a></div>
  <mt:elseIf name="datebased_monthly_archive">
<div id="Link<mt:EntryID />" class="ajax-entry-more-link"><a href="<mt:EntryPermalink />" name="<mt:EntryID pad="1" />" onclick="ajaxShowHide('<mt:EntryID />', '<mt:ArchiveLink archive_type="Monthly" />');return false;">続きを読む ≫</a></div>
  <mt:elseIf name="main_index">
<div id="Link<mt:EntryID />" class="ajax-entry-more-link"><a href="<mt:EntryPermalink />" name="<mt:EntryID pad="1" />" onclick="ajaxShowHide('<mt:EntryID />', '<mt:BlogURL />');return false;">続きを読む ≫</a></div>
  </mt:if>
<div id="Text<mt:EntryID />" style="display: none">
<mt:EntryMore />
</div>
</mt:if>

「ブログ記事の詳細」テンプレートモジュール

変更前

<mt:if tag="EntryBody">
   <div class="entry-body"><mt:entryBody /></div>
</mt:if>
<mt:if tag="EntryMore">
   <div class="entry-more"><mt:entryMore /></div>
</mt:if>

変更後

<mt:if tag="EntryBody">
  <div id="Body<mt:EntryID />"><mt:EntryBody /></div>
</mt:if>
<mt:if tag="EntryMore">
  <div id="Link<mt:EntryID />" class="ajax-entry-more-link"><a href="<mt:EntryPermalink />" name="<mt:EntryID pad="1" />" onclick="ajaxShowHide('<mt:EntryID />','<mt:EntryPermaLink />');return false;">続きを読む ≫</a></div>
  <div id="Text<mt:EntryID />" style="display: none">
<mt:EntryMore />
</div>
</mt:if>

「ウェブページの詳細」テンプレートモジュール

変更前

<mt:if tag="PageBody">
   <div class="entry-body"><mt:pageBody /></div>
</mt:if>
<mt:if tag="PageMore">
   <div class="entry-more"><mt:pageMore /></div>
</mt:if>

変更後

<mt:if tag="PageBody">
  <div id="Body<mt:PageID />"><mt:PageBody /></div>
</mt:if>
<mt:if tag="PageMore">
  <div id="Link<mt:PageID />" class="ajax-entry-more-link"><a href="<mt:PagePermalink />" name="<mt:PageID pad="1" />" onclick="ajaxShowHide('<mt:PageID />','<mt:PagePermaLink />');return false;">続きを読む ≫</a></div>
  <div id="Text<mt:PageID />" style="display: none">
<mt:PageMore />
</div>
</mt:if>

[9] Posted by yujiro

: November 26, 2008 3:08 PM

こんばんは。
「追記文章の折りたたみ Web2.0」が上手く出来なかったので
こちらを導入してみたところ、無事折りたたむことができました！
ありがとうございましたm(__)m

[10] Posted by れでぃけっと

: August 24, 2010 11:41 PM

＞れでぃけっとさん
こんばんは。
ご連絡ありがとうございました。
カスタマイズ、うまくできたようで良かったです。
ではでは！

[11] Posted by yujiro

: August 25, 2010 3:42 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

Now loading...

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

本文と追記を切り替える Web2.0

１．特徴

２．サンプル

３．script.aculo.us のインストール

４．テンプレートの修正1（HTMLヘッダ修正）

５．テンプレートの修正2（追記文章表示用 MT タグ修正）

６．CSS

７．その他