2004年08月20日

●追記文章の折りたたみ用スクリプト(改)

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


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


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

  1. Main Index テンプレートを開く

  2. 下記のソースを<head>~</head>の間にコピー(他のJavaScriptが存在する場合は最初と最後のタグを除いてコピー)
    <script language="javascript" 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. 下記の赤字部分を青字に入れ替え(緑色部分は隠した時に表示がずれないための改造箇所)
    <MTEntryIfExtended>
    <span class="extended">
    <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
    </span><br />

    </MTEntryIfExtended>

    <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>

  4. Category Archive/Date-Based Archiveも同様です。<MTEntryIfExtended>~</MTEntryIfExtended>で括られた部分を適宜入れ替えてください。個別エントリーアーカイブについては「個別アーカイブに続きを読むを導入」をごらんください。
以上です。↓「続きを読む」をクリックするとこんな感じで追記が表示されます。

Posted by yujiro at 01:31 | Popup Comments
トラックバックURL

このエントリーのトラックバックURL:
http://yujiro.dyndns.org/blog/koikikukan/mt-tb.cgi/204

トラックバック実行後、タイムアウトした旨のメッセージが表示されることがありますが、トラックバック先の処理は(これまでの経験上)正常に終了しています。正常に送信されたかどうかはトラックバック先の個別アーカイブページ等をご確認ください(タイムアウトについてはこちらの記事を参照ください)。
また同一のトラックバックが重複してしまった場合、こちらで気がついた時に適宜削除しておりますので削除のご連絡は不要です。ただし期間が空いている場合(数日とか)は気がつかない場合がありますのでご連絡ください。

トラックバック

?܂肽???ݗp?X?N???v?g?ύX???Ă݂܂????B from Magic White
???܂葱???𓇂ނɂ??Ȃ??̂ł????A?A???J?[?w?肌?ʒu?ɂ??ꂈ???悤?ɏC????????... [続きを読む]

トラックバック時刻: 2004年08月20日 03:21

?܂肽???ݗp?X?N???v?g?ύX from Magic White
???܂葱???𓇂ނɂ??Ȃ??̂ł????A?A???J?[?w?肌?ʒu?ɂ??ꂈ???悤?ɏC????????... [続きを読む]

トラックバック時刻: 2004年08月20日 04:23

ショウハイド。 from るのーぶろぐ 志摩子の空、ロザリオの夏
秀丞写文庫さんがテンプレートを変えたので、その配布先である小粋空間さんに、自分が使ってるテンプレートとどう違うのか見に行ったですよ。すごく閲覧しやすい3カラムテンプレー... [続きを読む]

トラックバック時刻: 2004年08月21日 10:41

追記折りたたみスクリプト。 from 深い雪
追記という形で、文が長い時などに クリックすると見れるように出来るけど 軽く重い... [続きを読む]

トラックバック時刻: 2004年08月22日 21:46

とりあえずリビルド完了。 from 秀丞写文庫
テンプレート関連で先日からお世話になりっ... [続きを読む]

トラックバック時刻: 2004年08月22日 23:51

リフォームでお世話になったブログサイト from * b i b o - l o g *
今回のリフォームで、参考にさせていただいたブログサイトさまをご紹介します。 一つだけ、ものすごく後悔していることがあります。 それは・・・MAIN... [続きを読む]

トラックバック時刻: 2004年09月14日 14:04

続きがペロッと from /PEN/
重ね重ねお世話になっている小粋空間のyujiro様が「続きを読む」をとっても見や... [続きを読む]

トラックバック時刻: 2004年09月30日 19:14

追記文章の折りたたみスクリプト from ねこんち : BLOG
前から付けたかった、追記文章の折りたたみスクリプトを付けてみました。 小粋空間さんの所にあったものです。 当該記事 いいっす。(自己満モード MovableT... [続きを読む]

トラックバック時刻: 2004年10月08日 20:21

続きを読みやすくする! from チョコチッブログ
毎度ブログ改造のときにお世話になっております、小粋空間さんの「追記文章の折りたた... [続きを読む]

トラックバック時刻: 2004年10月18日 20:16

『続きを読む』を折りたたむスクリプト from うねり。
毎度お世話になっている小粋空間さんより、今回は『続きを読む』を折りたたむスクリプ... [続きを読む]

トラックバック時刻: 2004年10月20日 18:58

Movable Type&エデンの戦士 from DIARY
この日記プログラム(Movable Type)の新しいバージョンが出ていたんで早... [続きを読む]

トラックバック時刻: 2004年10月23日 16:56

Blogいじり from doll*hysteria
 テンプレートが納得いかずにあちこちのブログを回って勉強していたら、また時間を忘... [続きを読む]

トラックバック時刻: 2004年10月30日 17:23

追記の折りたたみ化 from ウラピチ
追記文章折りたたみスクリプトをヤプログ用にカスタマイズし、導入しました [続きを読む]

トラックバック時刻: 2004年11月15日 02:51

CSS弄り from Nine Visions
ちょこっとだけスタイルシートを弄ってみました。 目に優しいカラーに変更して、密か... [続きを読む]

トラックバック時刻: 2004年11月28日 16:26

「続きを読む」折りたたみスクリプト from Macchan Yap!!
通常、「続きを読む」ってのをクリックすると、その記事のページの全表示がされるペー... [続きを読む]

トラックバック時刻: 2004年12月03日 23:09

『続きを読む』を折りたたむスクリプト from うねり。
毎度お世話になっている小粋空間さんより、今回は『続きを読む』を折りたたむスクリプ... [続きを読む]

トラックバック時刻: 2004年12月04日 05:45

個別アーカイブに「続きを読む」を導入 from 14.000Rev-Limit
またもやお世話になってます小粋空間様 デフォルトだとメインページで追記部分に書い... [続きを読む]

トラックバック時刻: 2004年12月14日 01:51

続きを読む…を折りたたみにしました from Internet Zone::Movable TypeでBlog生活
いつもお世話になっている小粋空間: 追記文章の折りたたみ用スクリプト(改)を参考に(というか、まるまるコピペで)、「続きを読む」を折りたたみ式に改造しました。 ... [続きを読む]

トラックバック時刻: 2004年12月24日 16:42

続きを読む(追記部分)を折りたたみ from ゆるゆる学習帳
導入するまで「続きを読む」は個別エントリーにリンクしてたわけですが、そろそろ私も... [続きを読む]

トラックバック時刻: 2005年01月15日 17:45

追記文章の折りたたみ from 都会の片隅で
これ、小粋空間さんで使いやすくていいなと思っていました。 ここ数日カスタマイズに... [続きを読む]

トラックバック時刻: 2005年01月16日 08:35

追記文章の折りたたみ用スクリプト from moments@life
[小粋空間] 追記文章の折りたたみ用スクリプト(改) 「追記折りたたみスクリプト」で再び隠した時に表示がずれるのが気になる方へ。 Movable Type のエ... [続きを読む]

トラックバック時刻: 2005年01月19日 16:55

いじってみた。 from B*note
Movable Typeを設置して3日目か?うん?4日目だか? いろいろ変えてみ... [続きを読む]

トラックバック時刻: 2005年01月31日 15:37

追記の折りたたみスクリプト from Soul Station
「小粋空間: 追記文章の折りたたみ用スクリプト(改)」 を参考に、あとはちょこっ... [続きを読む]

トラックバック時刻: 2005年01月31日 23:39

いじってみた。 from B*note
Movable Typeを設置して3日目か?うん?4日目だか? いろいろ変えてみ... [続きを読む]

トラックバック時刻: 2005年02月02日 23:13

追記文章の折りたたみ用スクリプト from it becomes me far out
追記テキストを折りたためるようにしました。... [続きを読む]

トラックバック時刻: 2005年02月09日 09:16

追記文章の折りたたみ用スクリプト from it becomes me far out
追記テキストを折りたためるようにしました。... [続きを読む]

トラックバック時刻: 2005年02月10日 06:11

ページを移動せずに続きを読む&たたむ from Ui-ed
追記文章の折りたたみ用スクリプト(改)(... [続きを読む]

トラックバック時刻: 2005年02月10日 10:36

またテンプレートいじってます from Blog * Love Your Smile
だいぶエントリーが貯まってきたので、以前は付けてなかった カテゴリー別のリストも... [続きを読む]

トラックバック時刻: 2005年02月16日 19:51

折りたたみ♪ from Moony*Moony
小粋空間様で 3カラムテンプレートをお借りした時に サイドメニューの折りたたみス... [続きを読む]

トラックバック時刻: 2005年02月17日 22:24

続きを読むを折りたたむ from FFF HP
小粋空間さんの追記文章の折りたたみ用スクリプト(改)を見て、 続きを読むを折りた... [続きを読む]

トラックバック時刻: 2005年02月20日 21:21

追記折り畳みスクリプト・ヤプログ用(あき改) from *Several men, several minds.*
記事の「続きを読む」を押すと移動して 読んでいた場所ではない所に移動してしまうのを これを使うと読んでいた場所のまま続きを読めるようになる。 ヤプログ... [続きを読む]

トラックバック時刻: 2005年02月22日 13:08

hold em from hold em
In your free time, check out the sites dedicated to [続きを読む]

トラックバック時刻: 2005年03月03日 06:50

続きを読む from ys blog!
デフォルトでは、続きを読む の部分が、クリックするとブラウザの一番上に表示されて... [続きを読む]

トラックバック時刻: 2005年03月07日 10:28

というわけで。 from swimmer's blog ver. 2.0
追記をJavascriptを使って、折りたたみ形式にしました。 まあ、こんな感じ... [続きを読む]

トラックバック時刻: 2005年03月22日 23:22

色々改造 from FreeStyle
MovableTypeの改造を色々進めております。 参考にしてるサイトは 小粋空... [続きを読む]

トラックバック時刻: 2005年03月24日 11:40

エデンの戦士&Movable Type from KillerPierce
カムイ先生の「エデンの戦士」11巻買いました!修行編、理解力のない私には少々難解なんですけどね^^;ロト編から7の世界への繋がりとか考えもしませんでしたがこうい... [続きを読む]

トラックバック時刻: 2005年03月26日 14:07

サイドバーの折りたたみ from dreaming purple blog
今回ブログを再設定するにあたり、HINAGATAさんの3カラムテンプレートを使い... [続きを読む]

トラックバック時刻: 2005年04月02日 22:30

エデンの戦士&Movable Type from KillerPierce
カムイ先生の「エデンの戦士」11巻買いました!修行編、理解力のない私には少々難解... [続きを読む]

トラックバック時刻: 2005年04月03日 21:26

いろいろカスタマイズ from 日々だらだら
見栄えを整えるために、いろいろカスタマイズしてみました。 以下はそのメモ。 なん... [続きを読む]

トラックバック時刻: 2005年04月07日 16:49

インデックスページ内で続きを読む表示 from 犬といっしょ。
エントリーの追記に書いた内容は続きを読む以下に表示されるんですが、デフォルトのま... [続きを読む]

トラックバック時刻: 2005年04月09日 01:14
コメント

おお!
早速利用させていただきまーす。
いつもお世話になり、ありがとうございます。

投稿者 Border. : 2004年08月20日 09:57

いえいえこちらこそ。ご利用くださりありがとうございます。
ちなみに修正したスクリプトはアンカータグの属性を「続きを読む」場合と同じにしただけというものです。

投稿者 yujiro : 2004年08月21日 01:44

こんにちわ!
えっとすでに導入済みだったんですが、こちらに変えてみました。
4は<MTEntryIfExtended>~</MTEntryIfExtended>の変更以外に
JavaScriptも挿入するのでしょうか?
アーカイブも隠したり閉じたりできるようになるのでしょうか??

投稿者 hate : 2004年09月11日 18:03

>hateさん
こんばんは。ご利用ありがとうございます(結構自分では気に入ってます(笑))。
JavaScriptも各テンプレート毎に必要ですので、トップページと同じように挿入してやってください。説明不足ですいませんでした。
ちなみにHTMLタグ等を文中にいれる場合は「実体参照」というものをお使いになれば大丈夫です。例えば"<"は"&lt;"と書きます。詳しくはこちら

投稿者 yujiro [TypeKey Profile Page] : 2004年09月12日 00:32

お返事ありがとうございます。早速やってみました!
これ、カテゴリアーカイブと月別アーカイブも閉じるんですね~すごい!!
こうしてみると長文ダーーッより、追記利用する方がスッキリしますね!
メインだけと思ってたから、かなり感激です!

あと実体参照?見てみますね。ご親切にありがとうございます(^^

投稿者 hate : 2004年09月12日 02:13

いえいえ、どうしたしまして。
こちらはうまくいってホッとしてます。

投稿者 yujiro : 2004年09月13日 00:09

こんばんは。
折りたたみスクリプト使わせていただきました。やはり便利ですねーコレ(^^)
ちなみにidを設定すればサイドバー以外にも使えるのでしょうか。。("続きを読む"のように)

投稿者 cova : 2005年01月29日 04:00

>折りたたみスクリプト使わせていただきました。やはり便利ですねーコレ(^^)

すみません。間違えました。。
使わせていただいたのは、サイドバーの折りたたみの方でした(^^;)

投稿者 cova : 2005年01月29日 04:17

>covaさん
こんばんはー。
ご利用ありがとうございます!

試してはいませんがタイトル部分と本体部分があるというパターンであれば、idを設定すればどの場所でも使えるのではないかと思います。
それではよろしくお願い致します。

投稿者 yujiro : 2005年01月30日 00:48

こんばんわ。コメントありがとうございました。
トラックバックの件も教えていただきありがとうございました。まだ始めたばかりなので、エラーと出てご迷惑おかけしてるのではないかとビクビクしてたんです。本当にありがとうございました。まだまだ解らないことだらけですので
時々お邪魔します。宜しくお願いします。

投稿者 かほ* : 2005年02月03日 02:51

>かほ*さん
こんにちは。
こちらへのコメントありがとうございます。
実はトラックバック、私もいまだに結構ドキドキするんです(笑)。

ご質問は随時お受けしております(エントリーの内容と異なっても結構です)。
こちらこそ今後ともよろしくお願い致します。

投稿者 yujiro : 2005年02月03日 09:12

こんにちは。
追記文章の折りたたみ用スクリプト(改)を参考に、リンクとかブックマークとか呼ばれるページに、利用させてもらいました。
さくさく展開、縮小出来るのが小気味いいですね。
はじめ、entryIDに000を使っていて、動かなかったのですが、気付くのに2時間ほどかかってしまい、アタマが四角くなっているなぁとぼやいてしまいました。
ありがとうございました。

投稿者 lmt : 2005年02月06日 09:43

>lmtさん
こんにちは。
折りたたみ、ご利用くださりありがとうございます。
entryIDの件、大変お疲れ様でした!
無事に動いたようでなによりです。
それでは今後ともどうぞよろしくお願い致します。

投稿者 yujiro : 2005年02月06日 14:18

いつもお世話様です。
この折りたたみをエントリー以外の場所で使うには何か方法がありますでしょうか?
今日ずっとチャレンジしていたのですが、のからみでどうしても出来ません。
中央コンテンツの一番上に常時表示したい記事があります。
ダミーで一度エントリーを保存し、そのエントリーのタグを貼り付け、エントリーを削除してと考えましたが、うまくいきません。
よろしくお願いします。

投稿者 Ichiro : 2005年02月28日 16:20

解決しました。リビルドかけたらちゃんと動くようになりました。
お騒がせしました。

投稿者 Ichiro : 2005年03月01日 02:23

>Ichiroさん
こんばんはー。
ご連絡ありがとうございます。
無事に動作できるようになってなによりです。

投稿者 yujiro : 2005年03月02日 00:58
コメントする




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)

コメントありがとうございます。投稿が反映されるまでに時間がかかる場合がありますが「投稿」ボタンを続けてクリックされないようお願い致します。またコメント投稿処理が終了しない場合、トップページに反映されない場合がありますがコメントは正常に投稿されています(サーバ側の不具合のようです。こちらで操作してページに反映させています)。また1回のクリックでも重複してしまう場合がありますが適宜削除しておりますのでご連絡は不要です。