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

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞追記＞エントリー・アーカイブの追記文章の折りたたみ（改）

2006年1月17日

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

Posted at January 17,2006 11:53 PM
Category：[追記]
Tag：[Customize, MovableType, MTEntryMore]

以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと 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 追記
１項の説明を修正しました。

Posted by yujiro

« 車検と検査標章 | Main | 404 エラーページを作る »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ [ ???B]「続きを読む」改良 from `ohana
「小粋空間」さまのエントリーを参考に、エントリーの「続きを読む」を使いやすくし... [続きを読む]

Tracked on January 18, 2006 7:26 AM

≫ JavaScriptがOFFでもエントリアーカイブの追記部分が読めるように from やむやむ
やむやむスタート直後から導入させていただいてるエントリアーカイブの『続... [続きを読む]

Tracked on January 18, 2006 2:10 PM

≫ 追記文章の折りたたみ from Frumenty
追記文章の折りたたみ [続きを読む]

Tracked on January 19, 2006 11:55 PM

≫ モブログの写真画像をいじる from no title
携帯から投稿した写真画像を枠で囲んでみました。... [続きを読む]

Tracked on February 25, 2006 3:45 AM

≫ Footnote Plugin と「続きを読む」とJavaScript from まけないこと投げ
FootnotePlugin と「続きを読む」JavaScriptのONOFF対応とを共存させる工夫をしてみた。 [続きを読む]

Tracked on March 19, 2006 12:09 PM

≫ エントリの追記をページジャンプせず表示する from MovableType備忘録
通常、ブログは本文と追記に分けてエントリを書くことができますね。これはMovab... [続きを読む]

Tracked on March 19, 2006 8:10 PM

≫ カスタマイズ from mini
相変わらず、デザインはデフォのままですが（もう、これでもいいとか思ってる＜ｺﾗ!... [続きを読む]

Tracked on March 25, 2006 4:48 PM

≫ エントリーの続きの表示 from kotarito.banbi.net
数日前からなのですが、小粋空間さんの技を参考にさせていただき、トップページの新... [続きを読む]

Tracked on May 7, 2006 6:32 PM

≫ Movable Type って… from Stray child's expert
MTと呼ばれるブログツール。自分でレンタルとかしてきたサーバーにあげて使う。こ... [続きを読む]

Tracked on May 15, 2006 12:44 AM

≫ Movable Type って… from Stray child's expert
MTと呼ばれるブログツール。自分でレンタルとかしてきたサーバーにあげて使う。こ... [続きを読む]

Tracked on May 15, 2006 12:48 AM

≫ ｢続きを読む>>｣スクリプト導入 from ginzi.com/blog
これもMovableType3.31を構築中なので、ついでに追加以下、MT3... [続きを読む]

Tracked on August 12, 2006 8:42 AM

≫ 「続きを読む」を折りたたみにする[1]♪ from ++Blog-MELL++
他のところと少し違うので今日はエントリー・アーカイブの「続きを読む」を... [続きを読む]

Tracked on August 24, 2006 3:39 PM

≫ test（あとで追記） from 蝶よ花よと育ってきたのよ
新しい日記にnewがつくかtest。あとで追記する。... [続きを読む]

Tracked on July 4, 2007 3:38 PM

自分のところでJavaScriptがずっとONになってるものだから
ぜんぜん気が付きませんでした。直しておきました。
試しに　OFFにしてみました。JavaScript ほかにもあちこちで使ってるから
ぜったい、ONにして見てもらわなくちゃ・・・と思いました。

[1] Posted by さえら : January 18, 2006 1:14 PM

トラックバック送ったつもりだったんですが、届いてませんねー。
迷惑トラックバックのフォルダのぞいてみてください。紛れ込んでませんか？

[2] Posted by さえら : January 18, 2006 2:39 PM

＞さえらさん
こんばんは。
早々のご利用ありがとうございます。

トラックバックはしっかり紛れ込んでました。
SpamFilterはデフォルトのままなので改めて見直してみたいと思います。

[3] Posted by yujiro : January 19, 2006 2:05 AM

こんばんは、yujiroさん
たびたび、すいません。

改良版の方も、使わせて頂きました
ありがとうございます。

[4] Posted by mituru : February 16, 2006 11:19 PM

＞mituruさん
こんばんは。
ご利用＆コメントありがとうございました。
ではでは！

[5] Posted by yujiro : February 17, 2006 1:18 AM

こんばんわ^^

いつも拝見させていただいています。

改良版使わせていただきました。
ありがとうございます。

[6] Posted by bizcaz : March 19, 2006 8:13 PM

＞bizcazさん
こんはんは。
ご利用＆トラックバックありがとうございました。
また BlogPeople 登録ありがとうございました。
ではでは！

[7] Posted by yujiro : March 21, 2006 2:26 AM

yujiroさん、こんばんは。

ネタバレ記事などがあるときに使えそうだと思い、導入させていただきました。

でも、ちょっとしたトラブルがあるので、ご相談にまいりました。

気づいたのが、このカスタマイズを導入してからというだけで、このカスタマイズを導入したせいかどうかは定かではないのですが…。
違っていたら、ちょっと場違いなコメントになるかもしれません。
すみません。

個別エントリの左サイドバーが表示されなくなってしまいました。

divのぬけなども確認したのですが、特に抜けている様子はありません。また、エントリ内の画像などが大きすぎて、レイアウトが崩れているということもないようです。（いくつかのエントリで確認しました。）

どのように対処したらよいか、アドバイスいただければ幸いです。

[8] Posted by メリッサ : May 5, 2006 3:26 AM

＞メリッサさん
こんばんは。
カスタマイズご利用ありがとうございます。

ご質問の件ですが、個別エントリーのHTMLを拝見させて頂いたところ、左カラム部分が

<div id="links-left-box"> <div id="links-left">   </div> </div>

となっており、テンプレートの段階で左カラムに何も設定されていないようです。すいませんがテンプレートを再度ご確認頂けますでしょうか。

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

[9] Posted by yujiro : May 8, 2006 10:07 PM

yujiroさん、こんにちは。

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

今一度確認してみたところ、左サイドバーに設定はしてあったのですが、現在使用していないモジュール化部分を設定してしまっていました。

完璧なチェックミスです。

現在は、存在するモジュールに設定をしなおしましたので、きちんと表示されるようになりました。

yujiroさんのアドバイスで気づくことができ、助かりました。

お手数をおかけしました。

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

[10] Posted by メリッサ : May 11, 2006 3:40 PM

＞メリッサさん
こんばんは。
ご連絡ありがとうございました。
無事になおってなによりです。
ではでは！

[11] Posted by yujiro : May 12, 2006 1:35 AM

いつもお世話になっております(o*。_。)oペコッ

これも是非やってみたかったので

導入してみたのですがＦｉｒｅｆｏｘではきちんと動いてるみたいなのですが

ＩＥで試したところ動いていないんです；；

何か間違っているのでしょうか？

[12] Posted by ＭＥＬＬ : August 23, 2006 5:13 AM

＞ＭＥＬＬさん
こんにちは。
お世話になります。
ご質問の件ですが、エントリー・アーカイブページを拝見させて頂いたところ、折りたたみの設定がされていないようですので、設定された状態で再度ご連絡頂けますでしょうか。
なお１項の説明は若干修正致しました。
それではよろしくお願い致します。

[13] Posted by yujiro : August 23, 2006 1:32 PM

すみませんでした＾＾；

設定しておきました

折りたたみですがエントリー・アーカイブだけではなく

メインも他の所も IEでは動いていないみたいですｗ

[14] Posted by ＭＥＬＬ : August 23, 2006 5:00 PM

＞ＭＥＬＬさん
こんにちは。
動作確認致しました。スタイルシートの下記の赤色部分を削除してください（修正される前に「続きを読む」のすぐ下にある「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;
}

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

[15] Posted by yujiro : August 24, 2006 1:12 PM

うぁ＾＾；

ホントだ・・・変な事になってたんですねｗ

ありがとうございました

ちゃんと動くようになりました

いつもお世話かけちゃってすみません(o*。_。)oペコッ

[16] Posted by ＭＥＬＬ : August 24, 2006 1:37 PM

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

[17] Posted by yujiro : August 24, 2006 4:03 PM

yujiro様
こんにちわ。Highslide JSに引き続きこちらも設置させていただきました。どうもありがとうございました。
けれども、小生のブログでは「追記」がない記事についても、個別ページでは「続きを読む」が出現してしまっています。何か間違えてしまったのでしょうか？
また、話はまったく違いますし、ここでお尋ねすることではないかもしれないのですが、よくトップページの一番下に「Previous page 1 2 3 ....」のようなトップページで見れる記事数と同じだけの記事数のかたまりで「戻る」ことのできる機能がありますが(WordPressでよくやっていますね)、ＭＴ用（小生はTypepadですが）にハックしていたりしますか？
長々と恐縮ですが、どうぞ宜しくお願いします。

[18] Posted by yoichi : January 21, 2007 1:38 PM

＞yoichiさん
こんにちは。
ご質問の件ですが、個別ページにスクリプトは設定されてますでしょうか。該当のページをご連絡いただければもう少し適切な回答ができると思います。
「Previous page 1 2 3 ....」の表示は「MTPaginate」というプラグインを利用しています。詳細は「ページ分割のカテゴリー」をご覧ください（TypePad では利用不可かも知れません）。
それではよろしくお願い致します。

[19] Posted by yujiro : January 24, 2007 10:06 AM

yujiro様
レス、ありがとうございます。個別ページにもスクリプトは設定しているのですが、例えば
http://yoichi.typepad.jp/blog/2007/01/post_4e93.html
のように、追記文章が無くても「続きを読む」がでてしまうんです。
また、「MTPaginate」の方なのですが、例えば
http://www.freshcreation.nl/index.php?id=7
の一番下にあるような「previous page」「next page」にも適応できますか？
度々すみませんが、どうぞ宜しくお願いします。

[20] Posted by yoichi : January 27, 2007 11:04 AM

＞yoichiさん
こんばんは。
ご質問の件ですが、下記の2点をご確認ください。

追記部分のタグが<MTEntryIfExtended> タグで括られていること
追記のテキストエリアに空白・改行等が含まれていないこと

MTPaginate は MTPaginateIfPreviousPage_ タグと MTPaginateIfPreviousPage_ タグの中に表示するテキストを変更すれば、ご要望の表示に対応できると思います。

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

[21] Posted by yujiro : January 29, 2007 6:40 PM

yujiro様
どうもありがとうございます。
取り急ぎ、御礼まで。

[22] Posted by yoichi : January 30, 2007 1:31 PM

yujiro様
こんにちわ。お世話になっております。
ひとつご相談がございます。この機能、小生のトップページを軽くするために大変重宝しております。ありがとうございます。
けれども、小生のサイトの特性上、追記の部分に大きな画像を何枚も張っていたりして、結果的に追記がダラ?ッと長いものになりがちなんですね。ということは、読者が「続きを隠す」をクリックすると次の記事を読むには読者に上へスクロールを強いることになります。
なので、「続きを隠す」をクリックすると「続きを読む」の元の位置に画面が戻るようにしたいのですが、その設定の方法、改変の仕方を教えていただけませんでしょうか。
自力で何とか解決したいのですが、いかんせん何も分からず。。。情けない限りです。
長文になってしまいましたが、どうかよろしくお願いします。

[23] Posted by yoichi : February 6, 2007 9:51 AM

＞yoichiさん
こんばんは。
ご質問の件につきましては別途エントリー致します。
申し訳ありませんがしばらくお時間ください。

[24] Posted by yujiro : February 6, 2007 7:13 PM

yujiro様
早速のご返答、ありがとうございます。
なんだか余計なお願いで恐縮です。お時間のあるときで構いませんので宜しくお願いします。

[25] Posted by yoichi : February 6, 2007 9:14 PM

いつも参考にさせていただいています。
ところで「続きを読む」、「続きを隠す」の文字を８０％に小さくしたいのですが、どうすればよろしいのでしょうか。
スタイルシートで指定しようとしたのですが、div.Link<$MTEntryID$>などと書こうものなら、エラーが出てしまいます。
エントリーアーカイブのテンプレートの方で、続きを読むの文字前後に<font>タグで指定しようとしても変えられません。
文字のカスタマイズは無理なのでしょうか？

[26] Posted by pine : July 4, 2007 6:35 AM

＞pineさん
こんにちは。
ご返事遅くなりすいません。
こちらで「続きを読む」の実験サイトを作る時間がないので、すいませんが変更したいページのURLをご連絡頂けないでしょうか。
それではよろしくお願い致します。

[27] Posted by yujiro : July 11, 2007 3:59 PM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

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

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