小粋空間: 追記アーカイブ

本文と追記を切り替える Web2.0（折りたたみの先頭位置にジャンプ）

January 27,2009 12:55 AM
Tag：[Customize, Folding, MovableType]
Permalink

「本文と追記を切り替える Web2.0」のカスタマイズで、切り替えたときに折りたたみの先頭位置にジャンプする方法を紹介します。

このカスタマイズは記事が長い場合（記事本文や追記がブラウザの縦幅に収まらない場合）に有効です。

折りたたみの機能概要については「本文と追記を切り替える Web2.0」をご覧ください。

１．サンプル

次のサンプルにある最初の記事の「続きを読む ≫」をクリックしてみてください。追記を表示すると、追記の先頭に移動し、「続きを隠す ≫」をクリックすると、「続きを読む ≫」の辺りに移動します。

本文と追記を切り替える（折りたたみの先頭位置にジャンプ）サンプル

２．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, 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);
  }
}
</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$>', '<$MTEntryLink$>');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$>', '<$MTEntryLink$>');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 宣言を外しています。

Comments [2] | Trackbacks [0]

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

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

本文と追記の表示を切り替えるカスタマイズです。
ご要望を頂きましたので、まずは 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 宣言を外しています。

Comments [11] | Trackbacks [0]

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

April 19,2007 1:33 AM
Tag：[CSS, JavaScript, scriptaculous]
Permalink

「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect.BlindUp を利用していますが、「IE7.0では追記部分がずれて表示される」という情報を頂きました。また、折りたたみリンクにある実体参照していない文字「«」「»」の文字化けも同時に確認されていますので、このエントリーで解消方法を示します。

とりあえず IE7 をお持ちの方はサンプルの修正前後の折りたたみ動作をご確認ください。

追記文章の折りたたみ 2.0 サンプル（修正前）

追記文章の折りたたみ 2.0 サンプル（修正後）

ここでは Movable Type をサンプルにしていますが、FC2 ブログ版の「追記文章の折りたたみ 2.0 for FC2 ブログ」も同様の対処が必要と思われます。

１．表示がずれる不具合の解消

確認したところ、Effect する対象のオブジェクト（この場合は追記部分全体）を括る要素や親要素に margin が指定されている場合、IE7では margin 指定が無効になるケースがあるようです。

Movable Type のデフォルトテンプレートではこの事象が発生しなかったので、CSS の差分を確認したところ、公開テンプレートについては下記のように青色の width プロパティを設定することで回避できました（WindowsXP + IE7/Firefox2/Opera9 で確認しています）。XML宣言の有無は関係ありません。

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.entry-content {
    width: 100%;
}

注：.entry の width プロパティに 100% を与えると他の不具合が生じます。

２．文字化けの解消

折りたたみリンクにある「«」や「»」は実体参照しないと IE7 では文字化けが発生します。それぞれ「«」および「»」に修正してください。

以上です。
なおすべてのケースを調査している訳ではないので、適用しているテンプレートの CSS によって事象や対処が異なるかもしれません。

Comments [2] | Trackbacks [0]

追記文章の折りたたみ Web2.0

March 8,2007 12:30 AM
Tag：[Customize, MovableType]
Permalink

Movable Type のオーソドックスなカスタマイズのひとつ、「追記文章の折りたたみ」の Web2.0 版カスタマイズをご紹介します。

１．特徴

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

２．サンプル

追記文章の折りたたみ 2.0 サンプル

３．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);
  }
}
</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>

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

<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 class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</div>
</MTIfNonEmpty>

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

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

<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 class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>');return false;">≪ 続きを隠す</a></div>
</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 宣言を外しています。

2007.03.08 追記
JavaScript ライブラリのインクルード順を変更しました（エラーになるため）

Comments [34] | Trackbacks [4]

追記文章の折りたたみ（閉じた時にページトップに戻る方法）

March 7,2007 12:35 AM
Tag：[Customize, MovableType]
Permalink

オーソドックスなカスタマイズとして、昔紹介した「追記文章の折りたたみ用スクリプト（改）」ですが、「折りたたみを閉じた時にページトップに戻る方法はないでしょうか」というご質問を頂きましたので、本エントリーでその方法を紹介致します。

１．方法

実は、下記リンクに示すオリジナルのスクリプト、

scriptygoddess： another revision to the show/hide script

は、閉じた時にページトップに戻る動作になっており、「追記文章の折りたたみ用スクリプト（改）」は、それをトップに戻らないように変更したものです（そのことを忘れてました、すいません）。

したがってオリジナルの内容に戻せば期待する動作になりますので、追記部分のMTタグの赤色部分の "false"

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

を、青色の "true" に修正してください。

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return true;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

２．備考

このように、onclick 属性で実行されたスクリプトの戻り値が true（ここでは "return true;" と記述されている部分が該当）であれば、href 属性に記述された URL に遷移します。
折りたたみを開いた時にページトップに遷移しないのは、開く時の onclick 属性の最後に "return false;" と記述されているからです。

ちなみにこのカスタマイズをエントリーしたのが約2年半前。乏しい知識の中で折りたたみ動作がうまくカスタマイズできた時の喜びは今でも覚えています。
で、「今なら Ajax もありだな」と思い立ったので、明日は Ajax 版を公開したいと思います。

Comments [0] | Trackbacks [0]

エントリー・アーカイブの追記文章の折りたたみ（改）

January 17,2006 11:53 PM
Tag：[Customize, MovableType, MTEntryMore]
Permalink

以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと JavaScript を OFF にした場合、追記文章が読めないという不具合が残っていました（今更ですいません）。

もともとこのスクリプトのオリジナルはscriptygoddess：another revision to the show/hide scriptで、折りたたみを戻す時に指定したアンカー位置にずれないためのカスタマイズ方法を公開していました。その後エントリー・アーカイブでも折りたためますという記事を書いたのですが、当時はアクセシビリティまで考えが及んでおりませんでした。

このスクリプトをメインページ・カテゴリー・アーカイブ・月別アーカイブに導入されている場合は、JavaScript が OFF でもエントリー・アーカイブにジャンプするように作られています（オリジナルからそうなっています）。ただしジャンプした先のエントリー・アーカイブで折りたたみを導入していると読めなくなるケースが発生します。

このエントリーではその点も踏まえ、また 3.2-ja に合わせて過去の記事を書き直してみました。
追記が読めない状態はアクセシビリティ上良くないため、すでに導入されている方は、下記の２項の青色部分を追加されることをお勧めします。

１．JavaScript の追加

エントリー・アーカイブテンプレートの編集画面を開き、<head>～</head> の間に下記を追加します。

<script type="text/javascript">
<!--
function showHide(entryID, entryLink, htmlObj) {
    extTextDivID = ('Text' + (entryID));
    extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
        if( document.getElementById(extTextDivID).style.display ) {
            if( entryLink != 0 ) {
                document.getElementById(extTextDivID).style.display = "block";
                document.getElementById(extLinkDivID).style.display = "none";
                htmlObj.blur();
            } else { 
                document.getElementById(extTextDivID).style.display = "none";
                document.getElementById(extLinkDivID).style.display = "block";
            }
        } else {
            location.href = entryLink;
            return true;
        }
    } else {
        location.href = entryLink;
        return true;
    }
}
//-->
</script>

なお、テンプレートにスクリプトを直接埋め込むよりも、外部ファイルにした方が良いでしょう。

外部ファイルにする場合は、上記リストから先頭と末尾の script タグを削除し、任意のファイル名（拡張子は ".js"）で保存し、そのファイルを index.html があるディレクトリにアップロードします。またファイルの文字コードはブログの文字コードと一致させておく方が良いでしょう。
そしてテンプレートの <head>～</head> の部分に下記の1行を追加します。

<script type="text/javascript" src="<$MTBlogURL$>[ファイル名]"></script>

[ファイル名]の部分に保存したファイル名を設定してください。

２．テンプレートの修正

１項と同様、エントリー・アーカイブテンプレートの編集画面を開き、下記の赤色部分を探してください。

3.2/3.3 デフォルトテンプレートの場合

<div id="more" class="entry-more">
    <$MTEntryMore$>
</div>

公開テンプレートの場合

<MTEntryIfExtended>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</MTEntryIfExtended>

上記の赤色部分を下記の内容に書き換えます。

<noscript>
<$MTEntryMore$>
</noscript>
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

に変更します。青色の noscript タグで括った MTEntryMore が JavaScript がOFFの場合に表示される部分です。

JavaScript が動作しない場合、「続きを読む」のリンクは表示されっぱなしになりますですので、上記リストではリンクの上に追記を表示するようにしていますが、もう少し説明を加えて、

<noscript>
<$MTEntryMore$>
<p>下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。</p>
</noscript>

としておくと分かりやすいでしょう。

３．ブラウザの JavaScript を無効ににする方法

IEの場合は、[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]-[アクティブスクリプト]の「無効にする」を選択してOK→OKをクリックします。Firefoxの場合は、[ツール]-[オプション]-[Web機能]-[JavaScriptを有効にする]のチェックを外してOKをクリックします。
いずれも再起動は不要です。

2006.08.23 追記
１項の説明を修正しました。

Comments [33] | Trackbacks [13]

個別アーカイブに「続きを読む」を導入

November 2,2004 12:50 AM
Tag：[Customize, JavaScript, MovableType, MTEntryMore]
Permalink

エントリー・アーカイブに適用される場合はエントリー・アーカイブの追記文章の折りたたみ（改）を参照ください。

デフォルトテンプレートではメインページは追記部分がリンクで隠されており、他のアーカイブページでは追記を含めて全てを一斉に表示するようになってます。
このサイトでは途中からダジャレのオチを追記に隠すよう各アーカイブページを変更したのですが、修正もれで個別アーカイブにジャンプするとネタが最初から見えてしまっていたので（笑）、こちらも追記を隠すように変更しました。

ということで以下、メインページ以外のアーカイブページで追記を隠すように修正する手順を記します。
なおデフォルト状態でメインページにある「続きを読む」をクリックするとPermalink（デフォルトの設定であれば個別アーカイブ）へジャンプします。これは他のアーカイブページが追記を含め一括表示されることが前提になっているからです。
実は個別アーカイブページ以外の修正方法は以前こちらの記事に記していたのですが、まとめて修正できるよう再掲しておきます。テンプレートの名称は3.11ベースで書いてますので3.01の場合は適宜読み替えてやってください。

まずテンプレート（メインページ/カテゴリー・アーカイブ/個別エントリーアーカイブ/日付アーカイブ/）の <head>～</head> の間に下記を追加します。

<script type="text/javascript">
<!--
function showHide(entryID, entryLink, htmlObj) {
    extTextDivID = ('Text' + (entryID));
    extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
        if( document.getElementById(extTextDivID).style.display ) {
            if( entryLink != 0 ) {
                document.getElementById(extTextDivID).style.display = "block";
                document.getElementById(extLinkDivID).style.display = "none";
                htmlObj.blur();
            } else { 
                document.getElementById(extTextDivID).style.display = "none";
                document.getElementById(extLinkDivID).style.display = "block";
            }
        } else {
            location.href = entryLink;
            return true;
        }
    } else {
        location.href = entryLink;
        return true;
    }
}
//-->
</script>

3.01や3.11の場合は、直接埋め込むよりもテンプレートモジュールにした方がスッキリすると思います。その場合の手順は、管理メニューの「テンプレート」をクリック→次ページの一番下の右にある「新しいテンプレートモジュールを作る」をクリック→次ページで下記を設定

テンプレートの名前：ShowHide（←何でもいいです）
このテンプレートにリンクするファイル：何も設定しない
モジュールの中身：上記のスクリプトを丸ごとコピー

として保存＆再構築。そして各テンプレートの <head>～</head> の間に

<MTInclude module="ShowHide">

を記述すればOKです。

次に同じく、各テンプレートの下記の赤色部分を青色部分に入れ替えます。

メインページ修正前

<MTEntryIfExtended>
<p（またはspan） class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p（またはspan）>
</MTEntryIfExtended>

カテゴリー・アーカイブ/日付アーカイブ修正前

<MTEntryIfExtended>
<$MTEntryMore$>
</MTEntryIfExtended>

個別エントリーアーカイブ修正前

<$MTEntryMore$>

修正後

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

以上です。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

Comments [48] | Trackbacks [43]

追記文章の折りたたみ用スクリプト（改）

August 20,2004 1:31 AM
Tag：[Customize, MovableType]
Permalink

＃「追記折りたたみスクリプト」で再び隠した時に表示がずれるのが気になる方へ。
Movable Type のエントリーの「追記」部分に書いた文章は、エントリー本文の最後に「続きを読む」というリンクが現れ、それをクリックした時に読めるようになります。
ところがデフォルトの設定ではこのリンクをクリックすると個別アーカイブのページにジャンプしてしまい、さっきまで読んでいた箇所まで探さないといけなくなります。感覚的には「続きを読む」をクリックしたらそのまま下に続きを表示して欲しいところです。

そういう訳で、このスクリプトは今読んでいるページを動かさずに本文下に追記を表示してくれるというスグレモノです。これも以前から導入したかった機能でようやく実現できました。「追記」に文章書いたことは一度もないのですが（笑）。
スクリプトは色々なサイトに転がっており、オリジナルはScriptygoddessさんのサイトみたいです。

タイトルの（改）ですが、オリジナルのスクリプトでは続きを再び隠した時に画面がビクッとなり（=アンカー指定の位置にずれる模様）、それが起きないようJavaScriptをちょっと修正しました。それからオリジナルはコメント部分にも使える仕様ですが本文でしか使わないと思い、コメント関連のコードも削除してます。
とりあえずソースと手順を載せておきます。

１．テンプレートにスクリプト追加

リスト１のスクリプトを <head>～</head> の間にコピーしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

リスト１：折りたたみ用スクリプト

２．テンプレートタグの修正

リスト２の赤字部分をリスト３の青字に入れ替えます（緑色部分は隠した時に表示がずれないための改造箇所）。

<MTEntryIfExtended>
<span class="extended">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</span><br />
</MTEntryIfExtended>

リスト２：追記表示用MTタグ（修正前）

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

リスト３：追記表示用MTタグ（修正後）

Category Archive/Date-Based Archiveも同様です。<MTEntryIfExtended>～</MTEntryIfExtended>で括られた部分を適宜入れ替えてください。個別エントリーアーカイブについては「個別アーカイブに続きを読むを導入」をごらんください。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

以上です。↓「続きを読む」をクリックするとこんな感じで追記が表示されます。

続きを読む ≫

Comments [54] | Trackbacks [71]

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

本文と追記を切り替える Web2.0（折りたたみの先頭位置にジャンプ）

１．サンプル

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

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

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

５．CSS

６．その他

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

１．特徴

２．サンプル

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

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

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

６．CSS

７．その他

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

１．表示がずれる不具合の解消

２．文字化けの解消

追記文章の折りたたみ Web2.0

１．特徴

２．サンプル

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

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

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

６．CSS

７．その他

追記文章の折りたたみ（閉じた時にページトップに戻る方法）

１．方法

２．備考

エントリー・アーカイブの追記文章の折りたたみ（改）

１．JavaScript の追加

２．テンプレートの修正

３．ブラウザの JavaScript を無効ににする方法

個別アーカイブに「続きを読む」を導入

メインページ修正前

カテゴリー・アーカイブ/日付アーカイブ修正前

個別エントリーアーカイブ修正前

修正後

追記文章の折りたたみ用スクリプト（改）

１．テンプレートにスクリプト追加

リスト１：折りたたみ用スクリプト

２．テンプレートタグの修正

リスト２：追記表示用MTタグ（修正前）

リスト３：追記表示用MTタグ（修正後）