小粋空間  -  a cheap joke and a play on words site

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

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

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

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

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

概要

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

サンプル

注意事項

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

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

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

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

２．個別エントリー用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テンプレートにうまく仕込めないかと試してみましたが、今のところ良い方法がみつかっておりませんので予めご了承ください。

　　　　　　：
<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;
}

return false;

retu
rn false;