エントリー本文
エントリー・アーカイブの追記文章の折りたたみ（改）
以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと 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 追記
１項の説明を修正しました。
≫ [ ???B]「続きを読む」改良 from `ohana
「小粋空間」さまのエントリーを参考に、エントリーの「続きを読む」を使い やすくし... [続きを読む]
≫ JavaScriptがOFFでもエントリアーカイブの追記部分が読めるように from やむやむ
やむやむ スタート直後から 導入させていただいてる エントリアーカイブ の 『続... [続きを読む]
≫ 追記文章の折りたたみ from Frumenty
追記文章の折りたたみ [続きを読む]
≫ モブログの写真画像をいじる from no title
携帯から投稿した写真画像を枠で囲んでみました。... [続きを読む]
≫ Footnote Plugin と「続きを読む」とJavaScript from まけないこと投げ
FootnotePlugin と 「続きを読む」JavaScriptのONOFF対応 とを共存させる工夫をしてみた。 [続きを読む]
≫ エントリの追記をページジャンプせず表示する from MovableType備忘録
通常、ブログは本文と追記に分けてエントリを書くことができますね。これはMovab... [続きを読む]
≫ カスタマイズ from mini
相変わらず、デザインはデフォのままですが（もう、これでもいいとか思ってる＜ｺﾗ!... [続きを読む]
≫ エントリーの続きの表示 from kotarito.banbi.net
数日前からなのですが、 小粋空間さんの技を参考にさせていただき、トップページの新... [続きを読む]
≫ Movable Type って… from Stray child's expert
MTと呼ばれるブログツール。自分でレンタルとかしてきたサーバーにあげて使う。 こ... [続きを読む]
≫ Movable Type って… from Stray child's expert
MTと呼ばれるブログツール。自分でレンタルとかしてきたサーバーにあげて使う。 こ... [続きを読む]
≫ ｢続きを読む>>｣スクリプト導入 from ginzi.com/blog
これもMovableType3.31を構築中なので、ついでに追加 以下、MT3... [続きを読む]
≫ 「続きを読む」 を折りたたみにする[1]♪ from ++Blog-MELL++
他のところと 少し違うので 今日は エントリー・アーカイブの 「続きを読む」 を... [続きを読む]
≫ test（あとで追記） from 蝶よ花よと育ってきたのよ
新しい日記にnewがつくかtest。 あとで追記する。... [続きを読む]
自分のところでJavaScriptがずっとONになってるものだから
ぜんぜん気が付きませんでした。直しておきました。
試しに OFFにしてみました。JavaScript ほかにも あちこちで使ってるから
ぜったい、ONにして見てもらわなくちゃ・・・と思いました。
トラックバック送ったつもりだったんですが、届いてませんねー。
迷惑トラックバックのフォルダのぞいてみてください。紛れ込んでませんか？
＞さえらさん
こんばんは。
早々のご利用ありがとうございます。
トラックバックはしっかり紛れ込んでました。
SpamFilterはデフォルトのままなので改めて見直してみたいと思います。
こんばんは、yujiroさん
たびたび、すいません。
改良版の方も、使わせて頂きました
ありがとうございます。
＞bizcazさん
こんはんは。
ご利用＆トラックバックありがとうございました。
また BlogPeople 登録ありがとうございました。
ではでは！
yujiroさん、こんばんは。
ネタバレ記事などがあるときに使えそうだと思い、導入させていただきました。
でも、ちょっとしたトラブルがあるので、ご相談にまいりました。
気づいたのが、このカスタマイズを導入してからというだけで、このカスタマイズを導入したせいかどうかは定かではないのですが…。
違っていたら、ちょっと場違いなコメントになるかもしれません。
すみません。
個別エントリの左サイドバーが表示されなくなってしまいました。
divのぬけなども確認したのですが、特に抜けている様子はありません。また、エントリ内の画像などが大きすぎて、レイアウトが崩れているということもないようです。（いくつかのエントリで確認しました。）
どのように対処したらよいか、アドバイスいただければ幸いです。
＞メリッサさん
こんばんは。
カスタマイズご利用ありがとうございます。
ご質問の件ですが、個別エントリーのHTMLを拝見させて頂いたところ、左カラム部分が
<!-- 左カラム開始 --> <div id="links-left-box"> <div id="links-left"> <!-- カレンダー開始 --> <!-- カレンダー終了 --> </div><!-- /links-left --> </div><!-- /links-left-box --> <!-- 左カラム終了 -->
となっており、テンプレートの段階で左カラムに何も設定されていないようです。すいませんがテンプレートを再度ご確認頂けますでしょうか。
以上です。
それではよろしくお願い致します。
yujiroさん、こんにちは。
ご回答ありがとうございました。
今一度確認してみたところ、左サイドバーに設定はしてあったのですが、現在使用していないモジュール化部分を設定してしまっていました。
完璧なチェックミスです。
現在は、存在するモジュールに設定をしなおしましたので、きちんと表示されるようになりました。
yujiroさんのアドバイスで気づくことができ、助かりました。
お手数をおかけしました。
ありがとうございました。
いつもお世話になっております(o*。_。)oペコッ
これも是非やってみたかったので
導入してみたのですが Ｆｉｒｅｆｏｘでは きちんと動いてるみたいなのですが
ＩＥで試したところ 動いていないんです；；
何か間違っているのでしょうか？
＞ＭＥＬＬさん
こんにちは。
お世話になります。
ご質問の件ですが、エントリー・アーカイブページを拝見させて頂いたところ、折りたたみの設定がされていないようですので、設定された状態で再度ご連絡頂けますでしょうか。
なお１項の説明は若干修正致しました。
それではよろしくお願い致します。
すみませんでした＾＾；
設定しておきました
折りたたみですが エントリー・アーカイブだけではなく
メインも他の所も IEでは動いていないみたいですｗ
＞ＭＥＬＬさん
こんにちは。
動作確認致しました。スタイルシートの下記の赤色部分を削除してください（修正される前に「続きを読む」のすぐ下にある「Tag:」の文字列をIEとFirefoxでそれぞれマウスコピーされれば原因がなんとなくお分かりになると思います）。
/* タグ */
.entry-tags-header,
.entry-tags-list,
.entry-tag {
display: inline;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 15px;
padding-bottom: 15px;
font-size: 10px;
}それではよろしくお願い致します。
うぁ＾＾；
ホントだ・・・変な事になってたんですねｗ
ありがとうございました
ちゃんと 動くようになりました
いつもお世話かけちゃってすみません(o*。_。)oペコッ
＞ＭＥＬＬさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！
yujiro様
こんにちわ。Highslide JSに引き続きこちらも設置させていただきました。どうもありがとうございました。
けれども、小生のブログでは「追記」がない記事についても、個別ページでは「続きを読む」が出現してしまっています。何か間違えてしまったのでしょうか？
また、話はまったく違いますし、ここでお尋ねすることではないかもしれないのですが、よくトップページの一番下に「Previous page 1 2 3 ....」のようなトップページで見れる記事数と同じだけの記事数のかたまりで「戻る」ことのできる機能がありますが(WordPressでよくやっていますね)、ＭＴ用（小生はTypepadですが）にハックしていたりしますか？
長々と恐縮ですが、どうぞ宜しくお願いします。
＞yoichiさん
こんにちは。
ご質問の件ですが、個別ページにスクリプトは設定されてますでしょうか。該当のページをご連絡いただければもう少し適切な回答ができると思います。
「Previous page 1 2 3 ....」の表示は「MTPaginate」というプラグインを利用しています。詳細は「ページ分割のカテゴリー」をご覧ください（TypePad では利用不可かも知れません）。
それではよろしくお願い致します。
yujiro様
レス、ありがとうございます。個別ページにもスクリプトは設定しているのですが、例えば
http://yoichi.typepad.jp/blog/2007/01/post_4e93.html
のように、追記文章が無くても「続きを読む」がでてしまうんです。
また、「MTPaginate」の方なのですが、例えば
http://www.freshcreation.nl/index.php?id=7
の一番下にあるような「previous page」「next page」にも適応できますか？
度々すみませんが、どうぞ宜しくお願いします。
＞yoichiさん
こんばんは。
ご質問の件ですが、下記の2点をご確認ください。
- 追記部分のタグが<MTEntryIfExtended> タグで括られていること
- 追記のテキストエリアに空白・改行等が含まれていないこと
MTPaginate は MTPaginateIfPreviousPage_ タグと MTPaginateIfPreviousPage_ タグの中に表示するテキストを変更すれば、ご要望の表示に対応できると思います。
それではよろしくお願い致します。
yujiro様
こんにちわ。お世話になっております。
ひとつご相談がございます。この機能、小生のトップページを軽くするために大変重宝しております。ありがとうございます。
けれども、小生のサイトの特性上、追記の部分に大きな画像を何枚も張っていたりして、結果的に追記がダラ?ッと長いものになりがちなんですね。ということは、読者が「続きを隠す」をクリックすると次の記事を読むには読者に上へスクロールを強いることになります。
なので、「続きを隠す」をクリックすると「続きを読む」の元の位置に画面が戻るようにしたいのですが、その設定の方法、改変の仕方を教えていただけませんでしょうか。
自力で何とか解決したいのですが、いかんせん何も分からず。。。情けない限りです。
長文になってしまいましたが、どうかよろしくお願いします。
＞yoichiさん
こんばんは。
ご質問の件につきましては別途エントリー致します。
申し訳ありませんがしばらくお時間ください。
yujiro様
早速のご返答、ありがとうございます。
なんだか余計なお願いで恐縮です。お時間のあるときで構いませんので宜しくお願いします。
いつも参考にさせていただいています。
ところで「続きを読む」、「続きを隠す」の文字を８０％に小さくしたいのですが、どうすればよろしいのでしょうか。
スタイルシートで指定しようとしたのですが、div.Link<$MTEntryID$>などと書こうものなら、エラーが出てしまいます。
エントリーアーカイブのテンプレートの方で、続きを読むの文字前後に<font>タグで指定しようとしても変えられません。
文字のカスタマイズは無理なのでしょうか？
＞pineさん
こんにちは。
ご返事遅くなりすいません。
こちらで「続きを読む」の実験サイトを作る時間がないので、すいませんが変更したいページのURLをご連絡頂けないでしょうか。
それではよろしくお願い致します。
いつもお世話になっております。
エントリーアーカイブの折りたたみですが、MT3のころからカスタマイズしてきて
現在MT4.1でも同じように記述しているのですが、
最近になってエントリーアーカイブのみ、「続きを読む－続きを隠す」にならず、
そのまますべて表示されていることに気づきました。
これは仕様なのでしょうか？それとも修正可能なのでしょうか？
ほかのアーカイブページやメインページでは今までどおり
折りたたみできているようなのですが…。
お忙しいとは思いますが、お時間のあるときにでも
どうぞよろしくお願いいたします。
＞chiffonさん
こんにちは。
ご返事遅くなってすいません。
ご質問の件ですが、さきほどエントリーアーカイブ（Movable Type４セキュリティアップデートのページ）確認したところ、「２．テンプレートの修正」が行われていないようです。再度設定をご確認ください。
それではよろしくお願いいたします。
yujiroさん、お忙しいところありがとうございます。
MT4にしてから結構経つのですが未だ「ブログ記事の概要」と「ブログ記事の詳細」の違いがよくわかっておらず、「ブログ記事の概要」のほうは「２．テンプレートの修正」を行っている状態、「ブログ記事の詳細」はそのままの状態でした。
それでアーカイブテンプレート（ブログ記事のテンプレート）を見たら、修正が必要なのは「ブログ記事の詳細」のほうらしいので、そちらのテンプレートの
<MTIfNonEmpty tag="EntryMore">から
</MTIfNonEmpty>の間を削除して、かわりに「２．テンプレートの修正」の
<noscript>から後の部分をすべてコピペしてみたらうまく表示できたのですがこれでいいのでしょうか？
＞chiffonさん
こんにちは。
それでOKです。
「ブログ記事の概要」は、メインページやカテゴリーアーカイブ、月別アーカイブで利用するもので、1ページにエントリーを複数表示するためのテンプレートです。「ブログ記事の詳細」はエントリーアーカイブ（ブログ記事アーカイブ）用のテンプレートで、1ページにブログ記事をひとつだけ表示するためのものです。
それで、テンプレート名を「概要」と「詳細」にしているものと思います。
それではよろしくお願い致します。
yujiroさん、お世話になるばかりで申し訳ないです。
「ブログ記事の概要」と「ブログ記事の詳細」の違いもよくわかりました。
本当にありがとうございました。
こんばんは。
ご質問の件、自己解決されたようで良かったです。
また、暇をみてご質問のカスタマイズにチャレンジしてみたいと思います。
ではでは！
: June 18, 2009 12:10 AM
