Top > CMS・ブログ > Serene Bach > カスタマイズ > 折りたたみ > 2006年4月
2006年4月 1日

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

April 1,2006 2:02 AM
Tag:[, , ]
Permalink

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

Comments [16] | Trackbacks [3]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3