個別エントリーの追記の折りたたみ for Serene Bach

個別エントリーの追記の折りたたみ for Serene Bach

Posted at April 1,2006 2:02 AM
Tag:[Customize, Folding, SereneBach]

2006.04.01 15:00 スクリプトに不具合がありましたので修正しました。

追記を折りたたむカスタマイズとしては[あ] UnderDoneさんのうにゅうにゅプラグインが有名かつ唯一と思われますが、Serene Bach の動作の関係上、個別エントリーでの折りたたみに適用することができません。

で、先日「Serene Bach の個別エントリーで追記を折りたためないでしょうか?」というご質問を頂きました。Movable Type では Scriptygoddess でカスタマイズ方法が公開されており、それを若干修正して個別アーカイブに適用したエントリー・アーカイブの追記文章の折りたたみ(改)を以前公開していたのですが、Serene Bach での適用は思いつきませんでした、

ということで、本エントリーで個別エントリーの追記を折りたたむカスタマイズをご紹介したいと思います。

概要

本カスタマイズを行うことで個別エントリーでの「続きを読む」の折りたたみが可能になります。また JavaScript が OFF の場合は追記部分を表示するようにし、「続きを読む」のリンクは非表示にすることができないため注意書きを表示するようにしています。動作は Windows2000/XP:IE6/Firefox1.5/Opera8 で確認しています。
実際の動作については下記のサンプルでお試しください。

サンプル

注意事項

このプラグインはトップページ等から「続きを読む」のリンクで個別エントリーにジャンプした時の振る舞いは考慮していません。つまり、うにゅうにゅプラグインを導入されていない状態で、トップページで「続きを読む」をクリックすると個別ページにジャンプし、追記部分へのスクロールが発生します。

以下、カスタマイズ手順です。

1.個別エントリー用HTMLテンプレートを利用する

現在ご利用のテンプレートが「個別エントリー用HTMLテンプレート」が空欄になっている場合、「ベースHTMLテンプレート」の内容をそのまま「個別エントリー用HTMLテンプレート」に貼り付けてください。すでにご利用の方は2項に進んでください。
なおうにゅうにゅプラグインの設定を行っている場合、貼り付けた個別エントリー用HTMLテンプレートから、独自タグ {unyu_js} を削除してください。

2.個別エントリー用HTMLテンプレートの修正

個別エントリー用HTMLテンプレートの追記部分にスクリプトを組み込みます。便宜上、公開テンプレートを例に説明しておりますが、基本的にどのテンプレートでも利用可能です。その場合、修正する前後のタグは適宜読み替えてください。

下記に示す、個別エントリー用HTMLテンプレートの追記部分の独自タグ(赤色)を削除します。

       :
<!-- BEGIN entry -->
<h2 id="entry{entry_id}" class="date">{entry_date}</h2>
<div class="entry">
<h3 class="entry-header">&#9679;<a href="{entry_permalink}">{entry_title}</a></h3>
<div class="entry-content">
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
</div>
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} | {trackback_num}
</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->
       :

そして、削除した部分に青色の内容にごっそり挿入してください。

       :
<!-- BEGIN entry -->
<h2 id="entry{entry_id}" class="date">{entry_date}</h2>
<div class="entry">
<h3 class="entry-header">&#9679;<a href="{entry_permalink}">{entry_title}</a></h3>
<div class="entry-content">
<div class="entry_body">{entry_description}</div>
<noscript>
<div class="entry_more">{entry_sequel}</div>
<p>下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。</p>
</noscript>
<div id="Link{entry_date}{entry_disp_time}">
<a href="{entry_permalink}" name="{entry_date}{entry_disp_time}" onclick="showHide('{entry_date}{entry_disp_time}','{entry_permalink}',this);return false;">続きを読む&#65310;&#65310;</a>
</div>
<div id="Text{entry_date}{entry_disp_time}" style="display: none"><div class="entry_more">{entry_sequel}</div>
<a href="{entry_permalink}" name="{entry_date}{entry_disp_time}" onclick="showHide('{entry_date}{entry_disp_time}',0,this);return false;">&#65308;&#65308;続きを隠す</a>
</div>
<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;
    }
}
elements = document.getElementById('Text{entry_date}{entry_disp_time}').childNodes;
if(elements[0].innerHTML == ''){
    document.getElementById('Link{entry_date}{entry_disp_time}').style.display = 'none'
}
//-->
</script>
</div>
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} | {trackback_num}
</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->
       :

注意事項としては、上記リストの

<div id="Text{entry_date}{entry_disp_time}" style="display: none"><div class="entry_more">{entry_sequel}</div>

の部分を

<div id="Text{entry_date}{entry_disp_time}" style="display: none">
<div class="entry_more">{entry_sequel}</div>

という風に、途中に改行を含めないようにしてください。改行をいれると Firefox/Opera で追記がない場合に「続きを読む」のリンクが表示されてしまうという不具合が発生します。

以上です。
ベースHTMLテンプレートにうまく仕込めないかと試してみましたが、今のところ良い方法がみつかっておりませんので予めご了承ください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

個別エントリでも「続きを読む」 from てぃあら
追記部分の折りたたみは ReadMoreプラグイン を使わせていただくことで「続きを読む」 をクリックしたときに 個別エントリページにジャンプしな... [続きを読む]

Tracked on April 1, 2006 11:58 AM

個別エントリーの追記の折りたたみ for Serene Bach<小粋空間 from smile:::blog**
先ほど,うにゅうにゅread moreプラグインを入れたという話しをしましたが,個別エントリーの追記も折りたたむことができるということなので,... [続きを読む]

Tracked on March 16, 2007 3:53 PM

個別エントリーで折りたたみ from VanillaCream**BLOG
前から個別エントリーで見ると「続きを読む.....」が表示されなくてなんでだろぉ?と思っていたんだけど、気になって調べてみたらSerene Bachでは個... [続きを読む]

Tracked on September 28, 2007 10:07 PM
コメント

こんにちは?。
個別エントリのページでは はじめから 追記部分が開いた状態だったんですよね。
のん気というかなんというか、気にとめてませんでした。
気づかせていただいてありがとうございます、って感じです。

[1] Posted by さえら : April 1, 2006 11:57 AM

>さえらさん
こんにちは。
早々のご利用&トラックバックありがとうございます。
追記がないページでもリンクが表示されるという不具合がありましたので、スクリプトを差し替えて頂けると幸いです。
ではでは。

[2] Posted by yujiro : April 1, 2006 2:54 PM

こんばんは。らっこです。
楽しみに待っていました。
これからさっそく、組み込んでみたいと思います!
と、その前に…作っていただくきっかけの発言をした者なので、ひとまずお礼を申し上げに参りました。
本当に嬉しいです。ありがとうございました。

[3] Posted by らっこ : April 2, 2006 1:36 AM

>らっこさん
こんばんは。
ご連絡ありがとうございます。
公開が遅くなってすいませんでした。
不具合等ございましたらご連絡ください。
ではでは!

[4] Posted by yujiro : April 2, 2006 11:52 PM

こんにちは。
うにゅうにゅプラグイン導入後、個別エントリーで、追記が開いたままなのが気になっていた1人です。
こちらのスクリプトを導入させて頂き、個別エントリーでも追記を隠す事が出来るようになりました。
これで、SBでも心置きなく追記が書けます(笑)

[5] Posted by ねーさん : April 8, 2006 10:16 AM

>ねーさん
こんばんは。
ご利用&ご連絡ありがとうございます。
不具合等ございましたらご連絡ください。
ではでは!

[6] Posted by yujiro : April 8, 2006 11:24 PM

こんにちは。質問があります。
手順2番の青色の内容のところで,続きを読むと続きを隠すとありますが,そこは自由に変更しても大丈夫でしょうか。(うにゅうにゅプラグインは変更済みです。両方やったほうが見栄えが良いと思われます。)あと,個別エントリーのページを開いた時の続きを読む(わたしは,read more)ですが,どうしても文字が大きくなってしまいます。文字の大きさをそろえたいのですが,どうすればいいんでしょうか。長くなってしまいましたが,よろしくおねがいします。

[7] Posted by kana : March 22, 2007 1:47 PM

>kanaさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、「続きを読む」と「続きを隠す」のテキストはご自由に変更してくださって結構です。

また、フォントサイズを設定する場合は折りたたみリンクの a タグに青色の class 属性を追加します。

      :
<a href="{entry_permalink}" class="more" name="{entry_date}{entry_disp_time}" onclick="showHide('{entry_date}{entry_disp_time}','{entry_permalink}',this);return false;">続きを読む>></a>
      :
<a href="{entry_permalink}" class="more" name="{entry_date}{entry_disp_time}" onclick="showHide('{entry_date}{entry_disp_time}',0,this);return false;"><<続きを隠す</a>
      :

そしてスタイルシートに

.more {
    font-size: 11px;
}

を追加してください。
それではよろしくお願い致します。

[8] Posted by yujiro : March 23, 2007 12:53 AM

こんにちは。
無事にできました。また何かありましたら,よろしくお願いします。

[9] Posted by kana : March 23, 2007 10:59 AM

>kanaさん
こんにちは。
ご連絡ありがとうございました。
無事にできたようで良かったです。
ではでは!

[10] Posted by yujiro : March 26, 2007 10:53 AM

こんにちは。
お忙しいようなのでコメントするか悩みましたが忘れないうちに書き込んでおきます。

指定通りに書き換えてみたのですがなぜか続きを読むのリンクをクリックしてみてもサンプルページのように開きません。
めったに使わないから要らないか??とも思ったのですが、なんだか悔しい^^;)

比較的まともなページ(でもなさそうだけど…)のURLを記入しておきます

http://kotonone.info/log/eid434.html

うにゅうにゅプラグインも併用していますが以前から個別ページは別に使っていたので、個別のテンプレにはうにゅうにゅの独自タグは入ってません。

何か判りましたら教えてください。
よろしくお願いします

[11] Posted by Jura : April 7, 2007 10:15 PM

>Juraさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、サイトを拝見させて頂いたところ、2項の修正後のリストにある、

return false;

という部分が途中で改行されて、

retu
rn false;

となっている部分がありました。これが正常に動作しない原因のようですので、「return」の途中に含まれる改行を除去願います。

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

[12] Posted by yujiro : April 9, 2007 6:45 PM

こんばんは、お返事ありがとうございます。

>retu
rn false;

おおっ!そんなところに落とし穴が……。
注意事項で書いてある部分しか確認していませんでした!
ご指摘の箇所を修正してみたところ上手く動くようになりました。
ありがとうございました?。

[13] Posted by Jura : April 11, 2007 7:09 PM

>Juraさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!

[14] Posted by yujiro : April 13, 2007 6:40 PM

折りたたみ方法、この間から気になっていたので
こちらにあってさっそく利用させていただきました^^
いつもためになるものばかりでありがとうございます♪
TBもさせていただきました(*^-^)

[15] Posted by ばにら : September 28, 2007 11:14 PM

>ばにらさん
こんばんは。
ご利用&コメント&トラックバックありがとうございます。
うまく動作したようでよかったです。
ではでは!

[16] Posted by yujiro : October 1, 2007 1:35 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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