エントリー本文
追記文章の折りたたみ Web2.0
Movable Type のオーソドックスなカスタマイズのひとつ、「追記文章の折りたたみ」の Web2.0 版カスタマイズをご紹介します。
１．特徴
- JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
- JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
- 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
- ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。
２．サンプル
３．script.aculo.us のインストール
script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。
次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。
ダウンロードアーカイブを解凍して内容をサーバのメインページと同じディレクトリにアップロード。ここでは下記のような配置になっていることを前提に話を進めます。
/scriptaculous
/lib
prototype.js
/src
controls.js
effects.js
scriptaculous.jsscriptaculous というディレクトリは解凍後のディレクトリ名を変更しています。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$>" »</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 ライブラリのインクルード順を変更しました（エラーになるため）
- Accordion によるサイドメニューの折りたたみ
- 「サイドメニューの折りたたみ」でメニューリスト別に状態保持を設定する
≫ 追記文章の折りたたみ from Atelier Shuhei Weblog
最近は、Web Radio に熱中していたので、いつもブログの改修に参考させてもらっている「小粋空間」さんへの訪問が少なくなっていた。久しぶりに覗いてみ... [続きを読む]
≫ 「続きを読む」の折り畳みをAjaxで制御 from ブランドって何だぁ？
以前設置していた「続きを読む」のハックを設置を先日小粋空間様がリリースした追記文章の折りたたみ Web2.0 に変更しました。 小粋空間様、いつもありが... [続きを読む]
≫ 「続きを読む」ってやつ from 瑞了奇譚
ブログを読んでいるとよく「続きを読む」ってのが文章に出てきます。
私の親友はこれを文章内容の変化時に使って多用しています。
[続きを読む]
何度もすみません・・・。
こちらの方法は、FC２ブログで設定する事は不可能なのでしょうか？
もし可能でしたら、修正方法を教えていただけると嬉しいです。
図々しくも色々な箇所にコメントしてしまって申し訳ございません・・。
よろしくお願いします○┓
>yujiroさん
お久しぶりです。ご紹介いただいたカスタマイズを早速取り込みました。（TB参照）
いつも丁寧な説明ありがとうございます。
おかげで短時間にできました。
Thanks a lot!
＞ナチさん
こんばんは。
ご質問の件ですが、可能なようですので別途エントリーさせて頂きます。
申し訳ございませんが少々お時間ください。
＞n_shuheiさん
こんばんは。
ご無沙汰しております。
ご利用＆トラックバックありがとうございました。
うまくできたようでよかったです。
ではでは！
早速導入させていただいたのですが、IE6.0でステータスバーにエラーが表示されます。
「catchステートメントでは適用されますが、throwステートメントでは適用されません」
サンプルサイトでも、同様のエラーが表示されます。
サンプルサイトではそれでもきちんと動作しているようですが、私のサイトはIEでは動作しません。
（単なるエントリーアーカイブへのリンクとして動作します）
スクリプトを調べてみたのですが、throwが至る所にあってどれが問題なのかさっぱり分かりませんでした。
Firefoxではきちんと動作しています。
一応ご報告まで
>R34さん
こんにちは。
ご利用ありがとうございます。
ご指摘の件については、script タグの記述順序を修正することで解消されます（投稿後の翌朝に気がついてソースコードはすぐに修正しましたが入れ違いになってしまったようで申し訳ありません）。
サンプルの方は直せていなかったので先ほど修正いたしました。ご迷惑おかけして申し訳ございませんでした。
それではよろしくお願い致します。
scriptタグの記述順序を入れ替えて、IEでのエラーは表示されなくなりました。
ありがとうございました。
ついでに質問なんですが、このカスタマイズで使われているprototype.jsって汎用性があるものなんでしょうか。
最近導入したほかのカスタマイズ（Ajax系）でもprototype.jsを使用していて、同じファイルを指定しても（というよりも、一方のscriptタグを削除しても）問題なく動くものですから
つまらない質問でスミマセン
ほんとに何度もすみません・・。
今日、FC2のお知らせで、このようなお知らせがありました。
http://staff.blog1.fc2.com/blog-entry-210.html
で、こちらからお借りしてるテンプレートの場合、この表示がないようなのですが・・・。
どのエントリーにコメントしたらいいのかわからず、
最新記事のこちらにコメントさせていただきました。
対処方法がありましたら、よろしくお願いします。
上記のエントリー、楽しみにしています＾＾
すみません、↑の件、解決しました。
yujiro様
こんにちわ。
早速こちらのAjax版に変更してみました。ありがとうございました。
＞R34さん
こんにちは。
ご連絡ありがとうございました。
ご質問の件につきましては、prototype.js はどれも同一サイトから配布されているものがバンドルされているという認識なので、script タグでこのファイルを複数インクルードする必要はありません。
ですが、prototype.js を利用しているツール同士が、prototype.js のバージョンの違いによって動作に何か影響があるかもしれません。個人的には新しいバージョンの prototype.js をインクルードすれば大丈夫と思っていますが、まずはご利用のツールを個別に動作確認してみてください。
それではよろしくお願い致します。
＞ナチさん
こんにちは。
ご質問の件、自己解決されたようで良かったです。
ではでは！
＞yoichiさん
こんにちは。
ご利用＆ご連絡ありがとうございます。
うまく設置できたようで良かったです。
ではでは！
yujiro様
いつも便利なカスタマイズをありがとうございます。
こちらのカスタマイズを行ってみたのですがIE7のみ開いた直後表示が崩れるようです。
marginかpaddingが無視される？ような感じで左によります。
こちらのサンプルサイトもよく見てみると同じ動きをしておりました。
お手数ですが対策の方法などありましたら教えていただけませんでしょうか？
＞tetsuさん
こんばんは。
当サイトのテンプレートをご利用であれば下記のスタイルを追加してみてください。
.entry-content {
width: 100%;
}他のテンプレートをご利用であれば追記またはエントリー全体を括っているタグに同じ width プロパティを追加すれば解消されると思われます。
なお、この件につきましては別エントリーとして展開したいと思います。貴重な情報ありがとうございました。
yujiroさま
いつもお世話になってます。
早速こちらのAjax版にしました。
わかりやすい説明のおかげで すぐにできました。
ありがとうございました。
サイドメニューの折りたたみ（v4.0）のほうも 上手く出来ましたので、そちらのほうをTBさせて頂きます。（ちょっと不安だったので送信テスト記事にもテスト送信させていただきました。）
v5.0にもしたいのですが、なかなか上手くいかず、もうちょっと頑張ってみます。
今後とも よろしくおねがいします。
＞しおんさん
こんにちは。
ご利用＆ご連絡ありがとうございました。
うまくできたようで良かったです。
トラックバックもありがとうございました。
ではでは！
yujiro様 はじめまして。
いつもこちらのサイトで勉強させて頂いております。
とても役に立つ情報、本当にありがとうございます。
私も、折りたたみのスクリプトを使用させていただいています。
少しスクリプトでトラブルが発生したので、質問させて下さい。
先日、友人のブログにスクリプトを設置したときのことです。
IEでは正常動作を確認できたのですが、FireFoxでは、一度クリックするとリンク（a href）が
外れ、ただのテキスト（続きを読む等）になってしまうのです。
リロードするとまた使用できるのですが、開くのも閉じるのも一度きりという不便なものになってしまいました。同じものを使用した、自分のブログでは異常はありません。
java等の知識がなく解決できず、困っています。
なにか考えられる原因はあるでしょうか？
ちなみに問題のブログです。 こちら
アドバイス頂けたらうれしく思います。
＞craymoreさん
はじめまして。
ご利用ありがとうございます。
サイトを拝見させて頂いたところ、エントリーアーカイブではある程度正常に動作しているようですので、トップページの設定がエントリーアーカイブの設定と異なっているかもしれません。
もしかしたらマークアップが影響しているかもしれませんので、上記の修正で不具合が解消しない場合、Another HTML-lint gatewayで確認してみてください。
それではよろしくお願い致します。
初めまして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でこのエフェクトがかけられるなら教えてください)
＞saburokuさん
こんばんは。
ご質問の件ですが、「WordPress で「続きを読む」の折りたたみ Web2.0」をエントリーしましたので、参考になれば幸いです。
それではよろしくお願い致します。
本記事に基づいて記事の折りたたみを実行してみました。ほぼ望む形で動作しているのですが、1点問題が出ておりアドバイス等頂けますと幸いです。
月別アーカイブなどから追記のある記事の「続きを読む」を押すと追記分が出るようにはなったのですが、そのとき追記部分の一番上に本来は「続きを読む」と表示されるべきところが文字化けした状態になっています。ソースを直接確認したところちゃんと「続きを読む」となっていました。
適用したのはMT4.01、ヘッダ部の改変はモジュールテンプレート→ヘッダー、追記文章表示用の改変はモジュールテンプレート→ブログ記事の概要に対して行っています。また、テンプレートは貴サイトのMT4用のテンプレートを使用しています。
[参考]：http://diarlog.myftp.org/archives/2006/07/
＞Makotoさん
こんにちは。
ご質問の件ですが、option.js の文字コードをUTF-8で保存して頂けますでしょうか。
それではよろしくお願い致します。
: November 13, 2007 10:04 AM> yujiroさま
ご指摘の通りUTF-8で保存すると問題無く動作しました。
以上、ありがとうございました。
: November 13, 2007 7:14 PM＞Makotoさん
こんにちは。
ご連絡ありがとうございました。
ではでは！
: November 16, 2007 4:13 PMいつもお世話になります。
導入以来特に問題なく機能していたのですが、追記文が長文の場合、「続きを読む」をクリックすると、右サイドバーがページ下部へと移動し、レイアウトが崩れてしまいます。文章が短い場合は特に問題ないようです。アレコレ検証はしてみたのですが、どうも原因がわかりません。
御手数をお掛けするとは思いますが、アドバイスいただけると幸いです。
>toycozyさん
こんにちは。
ご質問の件ですが、該当の記事と事象が発生するブラウザをご連絡ください（FirefoxとIE6で1月27日の記事を確認しましたが同じ事象になりません）。
それではよろしくお願い致します。
: January 30, 2008 5:27 PMお忙しい中、早々に御返事いただきまして有り難うございます。
WindowsXPで、Firefoxでは問題ないのですが、Sleipnir2.6.1とIE6だと、右サイドだけが下へ行ってしまいます。１月２７日の記事のみです。他の記事で折り畳みを試してみたところ問題ありません。同じブラウザで確認していただいて同じ現象が起きないということは、どうも当方の環境が疑わしいですね～・・(汗)。原因がわからず今のところお手上げ状態ですが、特に他へ与える影響もなさそうなので、もう少し検証してみます。お手数をお掛けし申し訳ありませんでした。
: 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;
}それではよろしくお願い致します。
: February 3, 2008 11:13 PMお忙しい中、有り難うございます。
アドバイスいただいたスタイルを追加したところ、全く問題なく動作するようになりました。日別のページにて確認出来ました。感謝感激です。本当に有り難うございます。
早速overflowについて調べているところです。“スクロールバーを消す・・・”・・・？・・・う～ん・・・・何故折り畳みのところで・・・
まだそこに気付くまでに時間がかかりそうです(笑)。
有り難うございました。
: February 4, 2008 1:18 AM＞toycozyさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！
: February 6, 2008 2:26 AMいつも参考にさせていただいています。
先日、PCを購入しまして IE７にて自分のサイトを見てみましたら、
こちらが作動しなくなってしまいました。
以前、IE6のときは、なんら問題なく、作動していました。
再度、こちらを書き換えたりしてみたのですが、上手くいきません。
何か原因がお分かりになりますでしょうか？
よろしくお願いします。
とりあえず、自己解決しました。
原因は、以前より組み込んでありました、「jumptop.js」というもののようです。
それを削除しましたら できるようになりました。
失礼しました。
＞chi-さん
こんばんは。
ご連絡ありがとうございました。
ご質問の件、自己解決されたようで良かったです。
また原因もご連絡いただき、貴重な情報ありがとうございます。
ではでは！
: March 22, 2008 8:52 PMMovable Type4.1では若干修正方法が違うようですね
修正箇所がわかりません？
お手数ですがまた、サポート宜しくお願いします
＞conanさん
こんにちは。
ご返事遅くなってすいません。
ご質問の件ですが、公開テンプレートであれば、４項は「ヘッダー」テンプレート、５項の前半が「ブログ記事の概要」テンプレートモジュール、後半が「ブログ記事」アーカイブテンプレートになります。
その他不明な部分がありましたらお知らせください。
それではよろしくお願いいたします。
: July 2, 2008 5:37 PM
