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

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

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

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 ライブラリのインクルード順を変更しました（エラーになるため）

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


トラックバック

≫ 追記文章の折りたたみ from Atelier Shuhei Weblog
　最近は、Web Radio に熱中していたので、いつもブログの改修に参考させてもらっている「小粋空間」さんへの訪問が少なくなっていた。久しぶりに覗いてみ... [続きを読む]

Tracked on March 8, 2007 8:42 PM

≫ 「続きを読む」の折り畳みをAjaxで制御 from ブランドって何だぁ？
以前設置していた「続きを読む」のハックを設置を先日小粋空間様がリリースした追記文章の折りたたみ Web2.0 に変更しました。 小粋空間様、いつもありが... [続きを読む]

Tracked on March 10, 2007 5:07 PM

≫ 「続きを読む」ってやつ from 瑞了奇譚
ブログを読んでいるとよく「続きを読む」ってのが文章に出てきます。 私の親友はこれを文章内容の変化時に使って多用しています。 [続きを読む]

Tracked on February 13, 2008 4:33 PM

≫ ネットブック from 美大日記：：ムサビの手羽
今日は理事会と評議員会。土曜日から1泊２日のセミナー研修in船橋。で、来週は金沢... [続きを読む]

Tracked on May 27, 2009 5:09 AM
コメント

何度もすみません・・・。
こちらの方法は、FC２ブログで設定する事は不可能なのでしょうか？
もし可能でしたら、修正方法を教えていただけると嬉しいです。
図々しくも色々な箇所にコメントしてしまって申し訳ございません・・。

よろしくお願いします○┓

[1] Posted by ナチ : March 8, 2007 5:36 PM

＞yujiroさん
お久しぶりです。ご紹介いただいたカスタマイズを早速取り込みました。（TB参照）
いつも丁寧な説明ありがとうございます。
おかげで短時間にできました。
Thanks a lot!

[2] Posted by n_shuhei : March 8, 2007 8:51 PM

＞ナチさん
こんばんは。
ご質問の件ですが、可能なようですので別途エントリーさせて頂きます。
申し訳ございませんが少々お時間ください。

＞n_shuheiさん
こんばんは。
ご無沙汰しております。
ご利用＆トラックバックありがとうございました。
うまくできたようでよかったです。
ではでは！

[3] Posted by yujiro : March 9, 2007 2:04 AM

早速導入させていただいたのですが、IE6.0でステータスバーにエラーが表示されます。

「catchステートメントでは適用されますが、throwステートメントでは適用されません」

サンプルサイトでも、同様のエラーが表示されます。
サンプルサイトではそれでもきちんと動作しているようですが、私のサイトはIEでは動作しません。
（単なるエントリーアーカイブへのリンクとして動作します）

スクリプトを調べてみたのですが、throwが至る所にあってどれが問題なのかさっぱり分かりませんでした。


Firefoxではきちんと動作しています。
一応ご報告まで

[4] Posted by R34 : March 9, 2007 11:16 AM

＞R34さん
こんにちは。
ご利用ありがとうございます。
ご指摘の件については、script タグの記述順序を修正することで解消されます（投稿後の翌朝に気がついてソースコードはすぐに修正しましたが入れ違いになってしまったようで申し訳ありません）。
サンプルの方は直せていなかったので先ほど修正いたしました。ご迷惑おかけして申し訳ございませんでした。
それではよろしくお願い致します。

[5] Posted by yujiro : March 9, 2007 12:46 PM

scriptタグの記述順序を入れ替えて、IEでのエラーは表示されなくなりました。

ありがとうございました。

ついでに質問なんですが、このカスタマイズで使われているprototype.jsって汎用性があるものなんでしょうか。

最近導入したほかのカスタマイズ（Ajax系）でもprototype.jsを使用していて、同じファイルを指定しても（というよりも、一方のscriptタグを削除しても）問題なく動くものですから

つまらない質問でスミマセン

[6] Posted by R34 : March 9, 2007 3:14 PM

ほんとに何度もすみません・・。
今日、FC2のお知らせで、このようなお知らせがありました。

http://staff.blog1.fc2.com/blog-entry-210.html

で、こちらからお借りしてるテンプレートの場合、この表示がないようなのですが・・・。
どのエントリーにコメントしたらいいのかわからず、
最新記事のこちらにコメントさせていただきました。
対処方法がありましたら、よろしくお願いします。

上記のエントリー、楽しみにしています＾＾

[7] Posted by ナチ : March 9, 2007 5:55 PM

すみません、↑の件、解決しました。

[8] Posted by ナチ : March 9, 2007 6:08 PM

yujiro様
こんにちわ。
早速こちらのAjax版に変更してみました。ありがとうございました。

[9] Posted by yoichi : March 10, 2007 5:10 PM

＞R34さん
こんにちは。
ご連絡ありがとうございました。
ご質問の件につきましては、prototype.js はどれも同一サイトから配布されているものがバンドルされているという認識なので、script タグでこのファイルを複数インクルードする必要はありません。
ですが、prototype.js を利用しているツール同士が、prototype.js のバージョンの違いによって動作に何か影響があるかもしれません。個人的には新しいバージョンの prototype.js をインクルードすれば大丈夫と思っていますが、まずはご利用のツールを個別に動作確認してみてください。
それではよろしくお願い致します。

＞ナチさん
こんにちは。
ご質問の件、自己解決されたようで良かったです。
ではでは！

＞yoichiさん
こんにちは。
ご利用＆ご連絡ありがとうございます。
うまく設置できたようで良かったです。
ではでは！

[10] Posted by yujiro : March 12, 2007 2:50 PM

yujiro様
いつも便利なカスタマイズをありがとうございます。
こちらのカスタマイズを行ってみたのですがIE7のみ開いた直後表示が崩れるようです。
marginかpaddingが無視される？ような感じで左によります。
こちらのサンプルサイトもよく見てみると同じ動きをしておりました。

お手数ですが対策の方法などありましたら教えていただけませんでしょうか？

[11] Posted by tetsu : April 16, 2007 9:19 PM

＞tetsuさん
こんばんは。
当サイトのテンプレートをご利用であれば下記のスタイルを追加してみてください。

.entry-content {
    width: 100%;
}

他のテンプレートをご利用であれば追記またはエントリー全体を括っているタグに同じ width プロパティを追加すれば解消されると思われます。

なお、この件につきましては別エントリーとして展開したいと思います。貴重な情報ありがとうございました。

[12] Posted by yujiro : April 17, 2007 6:59 PM

yujiroさま

いつもお世話になってます。
早速こちらのAjax版にしました。
わかりやすい説明のおかげで　すぐにできました。
ありがとうございました。

サイドメニューの折りたたみ（v4.0）のほうも　上手く出来ましたので、そちらのほうをTBさせて頂きます。（ちょっと不安だったので送信テスト記事にもテスト送信させていただきました。）
v5.0にもしたいのですが、なかなか上手くいかず、もうちょっと頑張ってみます。

今後とも　よろしくおねがいします。

[13] Posted by しおん : April 17, 2007 11:35 PM

＞しおんさん
こんにちは。
ご利用＆ご連絡ありがとうございました。
うまくできたようで良かったです。
トラックバックもありがとうございました。
ではでは！

[14] Posted by yujiro : April 19, 2007 10:30 AM

yujiro様　はじめまして。

いつもこちらのサイトで勉強させて頂いております。
とても役に立つ情報、本当にありがとうございます。
私も、折りたたみのスクリプトを使用させていただいています。

少しスクリプトでトラブルが発生したので、質問させて下さい。

先日、友人のブログにスクリプトを設置したときのことです。

IEでは正常動作を確認できたのですが、FireFoxでは、一度クリックするとリンク（a href）が
外れ、ただのテキスト（続きを読む等）になってしまうのです。

リロードするとまた使用できるのですが、開くのも閉じるのも一度きりという不便なものになってしまいました。同じものを使用した、自分のブログでは異常はありません。
java等の知識がなく解決できず、困っています。
なにか考えられる原因はあるでしょうか？

ちなみに問題のブログです。　こちら　

アドバイス頂けたらうれしく思います。

[15] Posted by craymore : May 1, 2007 2:39 AM

＞craymoreさん
はじめまして。
ご利用ありがとうございます。
サイトを拝見させて頂いたところ、エントリーアーカイブではある程度正常に動作しているようですので、トップページの設定がエントリーアーカイブの設定と異なっているかもしれません。
もしかしたらマークアップが影響しているかもしれませんので、上記の修正で不具合が解消しない場合、Another HTML-lint gatewayで確認してみてください。
それではよろしくお願い致します。

[16] Posted by yujiro : May 3, 2007 2:38 AM

初めましてyujiroさん
いきなりですが質問させてください
このエフェクトなんですが、WordPressでも出来ますかね
私のテンプレートはCSSとPHPで出来ていて
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>

JSファイルの所をURLで指定したいんですが、どうすればいいですかね
ここをURLで指定すると後々の設定もちょっと変わりますよね

Press9というサービスを利用しているのですが、ここは凄く不親切でプラグインの追加もしてくれないし、ビジュアルリッチエディダの不具合もあるのに改善してくれないしFTPアカウントも貰えるけど弄れるのはwp-themeだけだし･･･。

（点線以降はWordPressでこのエフェクトがかけられるなら教えてください)

[17] Posted by saburoku : September 15, 2007 1:44 PM

＞saburokuさん
こんばんは。
ご質問の件ですが、「WordPress で「続きを読む」の折りたたみ Web2.0」をエントリーしましたので、参考になれば幸いです。
それではよろしくお願い致します。

[18] Posted by yujiro : September 20, 2007 1:31 AM

本記事に基づいて記事の折りたたみを実行してみました。ほぼ望む形で動作しているのですが、1点問題が出ておりアドバイス等頂けますと幸いです。
月別アーカイブなどから追記のある記事の「続きを読む」を押すと追記分が出るようにはなったのですが、そのとき追記部分の一番上に本来は「続きを読む」と表示されるべきところが文字化けした状態になっています。ソースを直接確認したところちゃんと「続きを読む」となっていました。
適用したのはMT4.01、ヘッダ部の改変はモジュールテンプレート→ヘッダー、追記文章表示用の改変はモジュールテンプレート→ブログ記事の概要に対して行っています。また、テンプレートは貴サイトのMT4用のテンプレートを使用しています。
[参考]：http://diarlog.myftp.org/archives/2006/07/

[19] Posted by Makoto : November 13, 2007 12:29 AM

＞Makotoさん
こんにちは。
ご質問の件ですが、option.js の文字コードをUTF-8で保存して頂けますでしょうか。
それではよろしくお願い致します。

[20] Posted by yujiro logo : November 13, 2007 10:04 AM

＞ yujiroさま

ご指摘の通りUTF-8で保存すると問題無く動作しました。
以上、ありがとうございました。

[21] Posted by Makoto logo : November 13, 2007 7:14 PM

＞Makotoさん
こんにちは。
ご連絡ありがとうございました。
ではでは！

[22] Posted by yujiro logo : November 16, 2007 4:13 PM

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

導入以来特に問題なく機能していたのですが、追記文が長文の場合、「続きを読む」をクリックすると、右サイドバーがページ下部へと移動し、レイアウトが崩れてしまいます。文章が短い場合は特に問題ないようです。アレコレ検証はしてみたのですが、どうも原因がわかりません。

御手数をお掛けするとは思いますが、アドバイスいただけると幸いです。

[23] Posted by toycozy : January 28, 2008 8:31 PM

＞toycozyさん
こんにちは。
ご質問の件ですが、該当の記事と事象が発生するブラウザをご連絡ください（FirefoxとIE6で1月27日の記事を確認しましたが同じ事象になりません）。
それではよろしくお願い致します。

[24] Posted by yujiro logo : January 30, 2008 5:27 PM

お忙しい中、早々に御返事いただきまして有り難うございます。

WindowsXPで、Firefoxでは問題ないのですが、Sleipnir2.6.1とIE6だと、右サイドだけが下へ行ってしまいます。１月２７日の記事のみです。他の記事で折り畳みを試してみたところ問題ありません。同じブラウザで確認していただいて同じ現象が起きないということは、どうも当方の環境が疑わしいですね～・・(汗)。原因がわからず今のところお手上げ状態ですが、特に他へ与える影響もなさそうなので、もう少し検証してみます。お手数をお掛けし申し訳ありませんでした。

[25] Posted by toycozy logo : January 30, 2008 6:50 PM

＞toycozyさん
こんばんは。
すいません、他のPCで拝見すると再現しました。
ということで、下記のスタイルを追加してください。

.layout-three-column #content {
    float: left;
    width: 578px;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    overflow: hidden;
}

それではよろしくお願い致します。

[26] Posted by yujiro logo : February 3, 2008 11:13 PM

お忙しい中、有り難うございます。
アドバイスいただいたスタイルを追加したところ、全く問題なく動作するようになりました。日別のページにて確認出来ました。感謝感激です。本当に有り難うございます。
早速overflowについて調べているところです。“スクロールバーを消す・・・”・・・？・・・う～ん・・・・何故折り畳みのところで・・・
まだそこに気付くまでに時間がかかりそうです(笑)。
有り難うございました。

[27] Posted by toycozy logo : February 4, 2008 1:18 AM

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

[28] Posted by yujiro logo : February 6, 2008 2:26 AM

いつも参考にさせていただいています。
先日、PCを購入しまして　IE７にて自分のサイトを見てみましたら、
こちらが作動しなくなってしまいました。
以前、IE6のときは、なんら問題なく、作動していました。
再度、こちらを書き換えたりしてみたのですが、上手くいきません。
何か原因がお分かりになりますでしょうか？
よろしくお願いします。

[29] Posted by chi- : March 22, 2008 2:01 PM

とりあえず、自己解決しました。
原因は、以前より組み込んでありました、「jumptop.js」というもののようです。
それを削除しましたら　できるようになりました。
失礼しました。

[30] Posted by chi- : March 22, 2008 7:46 PM

＞chi-さん
こんばんは。
ご連絡ありがとうございました。
ご質問の件、自己解決されたようで良かったです。
また原因もご連絡いただき、貴重な情報ありがとうございます。
ではでは！

[31] Posted by yujiro logo : March 22, 2008 8:52 PM

Movable Type4.1では若干修正方法が違うようですね
修正箇所がわかりません？
お手数ですがまた、サポート宜しくお願いします

[32] Posted by conan : June 20, 2008 9:10 AM

＞conanさん
こんにちは。
ご返事遅くなってすいません。
ご質問の件ですが、公開テンプレートであれば、４項は「ヘッダー」テンプレート、５項の前半が「ブログ記事の概要」テンプレートモジュール、後半が「ブログ記事」アーカイブテンプレートになります。
その他不明な部分がありましたらお知らせください。
それではよろしくお願いいたします。

[33] Posted by yujiro logo : July 2, 2008 5:37 PM

お世話になっております。
MovableType5.02にこのカスタマイズをしようと試みているのですが、記述が違うようでよくわかりません。
できましたらMT5用に再度エントリーもしくは補足をしていただけると嬉しいです。

[34] Posted by れでぃけっと : August 23, 2010 10:42 PM
コメントする
greeting

*必須

*必須（非表示）


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

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

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

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