小粋空間: 折りたたみアーカイブ

Top ＞ FC2ブログ＞カスタマイズ＞折りたたみ [全て開く]

2011年4月 9日

FC2ブログのサブカテゴリリストの折りたたみ

April 9,2011 12:55 AM
Tag：[Category, FC2, Folding]
Permalink

FC2ブログでサブカテゴリリストを折りたためるようにするカスタマイズを紹介します。

変更後

１．概要

FC2ブログのカテゴリにはサブカテゴリがサポートされており、カテゴリを親子関係で管理できます（2階層まで）。これに伴い、サイドバーのサブカテゴリリストも次のようにツリー化による表示が可能です。下のサブカテゴリリストは「FC2ブログでサブカテゴリリストをツリー化する」のカスタマイズを行ったものです。

変更前

さらに本エントリーのカスタマイズを行うことで、下の画面のように、サブカテゴリリストを親カテゴリ別に折りたためるようになります。

変更後（開いた状態）

変更後（閉じた状態）

以下、カスタマイズ方法です。

２．jQuery listfolderプラグインのダウンロード・アップロード

「jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン」の記事を参考に、最新版のjQuery listfolderプラグインをダウンロードし、「listfolder.js」というファイル名でアップロードしてください。元記事では「jquery.listfolder.js」にリネームする説明になっていますが、FC2ブログでは拡張子を除いたファイル名にピリオドが含まれているとアップロードできないため「listfolder.js」にリネームしてください。

注意：このプラグインファイルの文字コードはUTF-8です。ダウンロードする際には上記の記事に記載されている方法でダウンロードしてください。

３．HTMLの設定1

「HTML」のhead要素の終了タグの直前に次の内容を設定します。赤色部分は２項でアップロードしたjQuery listfolderプラグインのURLを設定してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://.../listfolder.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
    $('#box').listfolder({
        sidebarClass: 'fold',
    });
});
</script>

４．HTMLの設定2

冒頭の画面のようなサブカテゴリリストにするには、「HTML」に次の内容を設定します。このコードにはツリー化するカスタマイズも含まれています。

<div class="side" id="category">
<ul>
<!--category-->
<!--category_parent-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a> <a href="javascript:void(0)" id="cat<%category_no>" class="fold mark"></a><ul class="tree">
<!--/category_parent-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category_sub_hasnext--> 
<!--category_sub_end-->
<li class="end"><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li></ul></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
</div>

５．他のサイドバーメニューも折りたたむには

４項までの作業でサブカテゴリリストの折りたたみは完了ですが、jQuery listfolderプラグインを使って、サイドバーの各メニューリストを折りたたむこともできます。

変更前

変更後

折りたたむには、折りたたみたい各メニューリストタイトルに「fold」というclass属性値を付け加えるだけです。

<div class="sidetitle fold">
Recent Entries
</div>
 
<div class="side">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>

Comments [10] | Trackbacks [0]

2011年1月23日

FC2ブログ・プラグイン「最新の記事＋コメント」の使い方

January 23,2011 1:23 AM
Tag：[Customize, FC2, TroubleShooting]
Permalink

FC2ブログで人気の共有プラグイン「最新の記事＋コメント」は、最近の記事表示と最近のコメントを同時に表示するものです。コメントは記事毎にまとめて表示し、折りたたみも可能です。

最新の記事＋コメント

コメントを折りたたんだ状態
最新の記事＋コメント

本エントリーでは「最新の記事＋コメント」の設定・カスタマイズと、当ブログで公開している「追記文章の折りたたみ 2.0 for FC2 ブログ」を併用したときに発生する不具合の解消方法を説明します。

１．「最新の記事＋コメント」の設定

FC2ブログ管理画面の「環境設定」の「プラグインの設定」をクリック。

FC2ブログ管理画面

「プラグインの設定」の「共有プラグイン追加」をクリック。

「最近の記事＋コメント」で検索。

共有プラグイン追加画面

これでプラグインが表示されるので、「名前」のリンクまたは画像リンクをクリック。

プラグイン検索結果

ダウンロード設定を行って、ダウンロードをクリックすれば完了です。

２．「最新の記事＋コメント」のツリーをきれいに表示する

冒頭のサンプルのようにツリーをきれいに表示するには、「FC2ブログの「最近の記事＋コメント」プラグインをきれいなツリーにする」のカスタマイズを行ってください。

カスタマイズ前
最新の記事＋コメント（カスタマイズ前）

カスタマイズ後
最新の記事＋コメント（カスタマイズ後）

３．追記文章の折りたたみとの併用

また、当サイトで公開している「追記文章の折りたたみ 2.0 for FC2 ブログ」は、追記文章の折りたたみをスクロール表示するものです。

追記文章の折りたたみ

この「追記文章の折りたたみ」を利用した場合、「最新の記事＋コメント」の部分に「原因不明のエラーが発生しました。作者に連絡すれば、もしかすると対応できるかもしれません。」というメッセージが表示され、元のリストが正常に表示されなくなる不具合があります。

「最新の記事＋コメント」のエラー

「最新の記事＋コメント」が正常に表示されない原因は、「追記文章の折りたたみ 2.0 for FC2 ブログ」で使っているprototype.js と「最新の記事＋コメント」のJavaScriptのコードが干渉しているためです。

これを解消するためには、以下の手順で「最新の記事＋コメント」のソースコードを修正してください。

プラグイン設定画面の「プラグインの管理」をクリック。

プラグイン設定画面

「最新の記事＋コメント」の「詳細」をクリック。

「HTMLの編集」をクリック。

プラグイン詳細設定画面

これでプラグインのソースコードがテキストエリアに表示されます。次に示すソースコードの編集後、「設定」をクリックしてください。

HTML編集画面

修正部分は以下です。青色のコード（計6行）を追加してください。

…前略…
for(i in cLst) {
    if(i.indexOf('http') != 0){
        continue;
    }
　　…中略…
    for(j in cLst[i].lst) {
        if (isNaN(parseInt(j))) {
            continue;
        }
        tCmt = cLst[i].lst[j];
        var cmtIsInLimit = (curTime - tCmt.getTime() < cmtDateLimit);
        　　…後略…

実際の追加イメージを以下に示します。

追加イメージ1

追加イメージ2

これで元通り表示されるようになります。

最新の記事＋コメント（修正後）

Comments [2] | Trackbacks [0]

2009年4月14日

FC2ブログでプラグインに表示しているブログパーツを折りたたむ

April 14,2009 1:55 AM
Tag：[Customize, FC2, Folding]
Permalink

当サイトで公開している、FC2ブログのカスタマイズ「サイドメニューの折りたたみ for FC2 ブログ」で、プラグインに対して折りたたみを設定するカスタマイズを紹介します。

おりたたんだ状態
　　　　　　　　　　↓
開いた状態

2009.04.22 「hatena chips - サイドメニュー折りたたみスクリプトを導入」を参考に、記事の２項を修正しました。

１．元記事のカスタマイズで正常に折りたためない問題

FC2ブログのプラグインとは、サイドバーにブログパーツを表示するための機能です。プラグインを利用するためには、テンプレートに下記のようなブロック変数を設定しておきます。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

このプラグイン用ブロック変数は、テンプレート内に合計3つ（plugin_first/plugin_second/plugin_third）まで設定することができ、これを「プラグインカテゴリ1～3」と呼びます。

また、プラグインの中に表示するブログパーツは、次のように管理画面から設定します。ひとつのプラグインカテゴリには複数のブログパーツを表示することができます。

プラグイン設定画面

さて、プラグインに表示するブログパーツに対して折りたたみを行いたい場合、下記のように、プラグイン用ブロック変数に折りたたみの設定を行なっても正常に動作しません。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="hogename">
<%plugin_first_title>
</div>
 
<div class="fold" id="hogelist">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('hoge','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

理由は、ブロック変数内の内容は、設定したブログパーツ数だけ繰り返し表示されます。つまり、追加設定した、折りたたみ用の id 属性値（hogename/hogelist）は、追加したプラグイン数だけ繰り返し表示されてしまいます。

言い換えると、異なるプラグインパーツに同じ id 属性値が設定されるので、仮にプラグインカテゴリ1に3つのブログパーツを表示している場合、JavaScript で最初にみつけた id 属性のブログパーツ、つまり一番最初のブログパーツしか折りたたみができません。

ということで、以下、プラグインを使って表示するブログパーツで折りたたみを行う場合のカスタマイズを紹介します。

１．前処理

まず、「サイドメニューの折りたたみ for FC2 ブログ」の１～３項の設定を行います。

２．HTMLの修正

テンプレート編集画面（HTML編集）のプラグイン用ブロック変数をさがし、次の青色部分の class 属性を追加してください。

プラグインカテゴリ1の場合

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="fold<%plugin_first_no>name">
<%plugin_first_title>
</div>
 
<div class="fold" id="fold<%plugin_first_no>list">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_first_no>','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

プラグインカテゴリ2の場合

<!--plugin-->
<!--plugin_second-->
<div class="foldtitle" id="fold<%plugin_second_no>name">
<%plugin_second_title>
</div>
 
<div class="fold" id="fold<%plugin_second_no>list">
<%plugin_second_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_second_no>','on',false);
</script>
<!--/plugin_second-->
<!--/plugin-->

プラグインカテゴリ3の場合

<!--plugin-->
<!--plugin_third-->
<div class="foldtitle" id="fold<%plugin_third_no>name">
<%plugin_third_title>
</div>
 
<div class="fold" id="fold<%plugin_third_no>list">
<%plugin_third_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_third_no>','on',false);
</script>
<!--/plugin_third-->
<!--/plugin-->

class 属性を設定するポイントは次の2つです。

<%plugin_first_title> を括っている (X)HTML 要素に、class="foldtitle" を設定する。
<%plugin_first_content> を括っている (X)HTML 要素に、class="fold" を設定する。

設定が終わったら「更新」をクリックします。

３．スタイルシートの修正

テンプレート編集画面（スタイルシート編集）の任意の場所に、下記の CSS を追加してください。

.foldtitle a {
    width: auto;
}
 
/* 通常 */
.foldtitle a:link,
.foldtitle a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color:#666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    text-decoration: none;
}
 
/* マウスポイント時 */
.foldtitle a:hover {
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color: #fff; /* 文字色 */
    background-color: #999; /* 背景色 */
    text-decoration: none;
}

配色等のデザインは、CSS に記載しているコメントを参考に適宜変更してください。

設定が終わったら「更新」をクリックします。これでページを開いて、ブログパーツで折りたたみができれば完成です。

2009.05.19
スタイルシートのセレクタ名が誤っていたので修正しました。

続きを読む ≫

以下は修正前の２項の内容です。備忘録として残しているだけなので、読み飛ばしてください。

２．HTMLの修正

テンプレート編集画面（HTML編集）のプラグイン用ブロック変数をさがし、次の青色部分の class 属性を追加してください。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

class 属性を設定するポイントは次の2つです。

<%plugin_first_title> を括っている div 要素に、class="foldtitle" を設定する。
<%plugin_first_content> を括っている div 要素に、class="fold" を設定する。

なお、ブログパーツタイトルとブログパーツ本体を括っている(X)HTML要素（このカスタマイズでは div 要素を想定）を同じものにしてください。例えば、ブログパーツのタイトルに h3 要素、ブログパーツの本体に div 要素を用いている場合は、本エントリーのカスタマイズでは動作しません。

上記の設定のあと、</body> の直前に、下記のスクリプトを設定してください。

<script type="text/javascript">
//<![CDATA[
var elements = document.getElementsByTagName('div');
var counter = 1;
var buffer = new Array();
 
for (i = 0; i < elements.length; i++) {
    if (elements[i].className == "foldtitle" &&
        elements[i+1].className == "fold") {
        var name = 'fold' + counter;
        elements[i].setAttribute('id', name + 'name');
        elements[i+1].setAttribute('id', name + 'list');
        buffer[buffer.length] = "FoldNavigation('" + name + "','on',false);";
        counter++;
    }
}
var element = document.createElement("script");
element.type = "text/javascript";
element.text = buffer.join('\n');
document.body.appendChild(element);
//]]>
</script>

設定が終わったら「更新」をクリックします。

≪ 続きを隠す

Comments [10] | Trackbacks [0]

2007年6月 1日

サイドメニューの折りたたみ for FC2 ブログ

June 1,2007 2:05 AM
Tag：[Customize, FC2, Folding]
Permalink

FC2ブログでのサイドメニューの折りたたみカスタマイズを紹介致します。

いつもであれば、当サイト配布のテンプレートをサンプルに説明するのですが、「他のテンプレートで折りたたみカスタマイズは利用できないでしょうか？」というご質問を頂きましたので、ここでは共有テンプレートの「do_qp_dot_3c」を例に説明します。

このカスタマイズを行うことで下記のような折りたたみを行うことができます。

サイドメニューの折りたたみ for FC2 ブログ

なお、当サイトで配布している FC2 ブログテンプレートの折りたたみについては下記のサイトで公開されています。

showry's Blog：FC2ブログでサイドメニュー折りたたみスクリプト導入

注：ここではプラグインを例に説明してますが、プラグイン以外のものも、「タイトル（を括るタグ）」＋「メニューリスト（を括るタグ）」というHTMLマークアップになっていれば、何でも折りたためます。

１．折りたたみスクリプトのダウンロード

下記のリンクよりスクリプトのページにジャンプし、menufolder.js のリンクをクリックして、スクリプトファイルをダウンロードしてください。

download

２．折りたたみスクリプトのアップロード

[ツール]→[ファイルのアップロード]よりダウンロードしたファイルをアップロードします。

ファイルのアップロード

アップロード先のURLを次項で利用するので、アップロードした後、IEであれば「表示」のリンクを右クリックして「ショートカットのコピー」を選択します。

URLのコピー

これでクリップボードにURLがコピーされました。注：左クリックはしないでください。

３．`script` 要素追加

下記の script 要素を、HTMLテンプレートの </head> の直前に追加してください。

<script type="text/javascript" src="[menufolder.js の URL]" charset="utf-8"></script>

[menufolder.js の URL] には、先程コピーしたURLを貼り付けてください。

４．プラグイン表示用タグの修正

サイドメニューを表示するプラグインに対して修正を行ないます。下記のように青色部分（3ヶ所）を追加してください。

<!--plugin-->
<!--plugin_first-->
 
<div class="left_body">
 
<h3 style="text-align:<%plugin_first_talign>" id="plugin1name"><%plugin_first_title></h3>
 
<div class="menu_text" id="plugin1list">
 
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description></p>
 
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2></p>
 
</div>
 
<script type="text/javascript">
FoldNavigation('plugin1','on',false);
</script>
</div>
<!--/plugin_first-->
<!--/plugin-->

ご利用になるテンプレートによってマークアップが若干異なるかもしれませんが、基本は

メニュータイトルを表示する要素（例では h3 要素）に id="pluginnname" を追加（x は数字）
メニューリスト全体を括る要素（例では div 要素）に id="pluginnlist" を追加（x は数字）
プラグインの最後の方に script 要素を追加

となっています。

n の意味ですが、2つめのプラグインに設定する場合は id="plugin2name" と id="plugin2list"、3番目のプラグインには id="plugin3name" と id="plugin3list" という風にしてください。

また、script 要素の中にある

FoldNavigation('plugin1','on',false);

も、2つめのプラグインは

FoldNavigation('plugin2','on',false);

となります。3つめの場合は 'plugin3' と設定してください。

５．スタイルシートの修正

下記をスタイルシートに追加してください。

h3 a {
    width: auto;
}
h3 a:link,
h3 a:visited {
    display: block;
    text-decoration: none;
}
h3 a:hover {
    text-decoration: none;
}

この設定はメニュータイトルのリンクを文字以外の部分でも選択できるようにするためのものです。

他のテンプレートで、タイトル部分のタグが h3 ではなく、div であれば

div a {
    width: auto;
}
div a:link,
div a:visited {
    display: block;
    text-decoration: none;
}
div a:hover {
    text-decoration: none;
}

としてみてください（div では他の表示に影響があるかもしれませんので、クラス属性等の設定が必要かもしれません）。

Comments [22] | Trackbacks [0]

2007年4月19日

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

April 19,2007 1:33 AM
Tag：[CSS, JavaScript, scriptaculous]
Permalink

「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect.BlindUp を利用していますが、「IE7.0では追記部分がずれて表示される」という情報を頂きました。また、折りたたみリンクにある実体参照していない文字「«」「»」の文字化けも同時に確認されていますので、このエントリーで解消方法を示します。

とりあえず IE7 をお持ちの方はサンプルの修正前後の折りたたみ動作をご確認ください。

追記文章の折りたたみ 2.0 サンプル（修正前）

追記文章の折りたたみ 2.0 サンプル（修正後）

ここでは Movable Type をサンプルにしていますが、FC2 ブログ版の「追記文章の折りたたみ 2.0 for FC2 ブログ」も同様の対処が必要と思われます。

１．表示がずれる不具合の解消

確認したところ、Effect する対象のオブジェクト（この場合は追記部分全体）を括る要素や親要素に margin が指定されている場合、IE7では margin 指定が無効になるケースがあるようです。

Movable Type のデフォルトテンプレートではこの事象が発生しなかったので、CSS の差分を確認したところ、公開テンプレートについては下記のように青色の width プロパティを設定することで回避できました（WindowsXP + IE7/Firefox2/Opera9 で確認しています）。XML宣言の有無は関係ありません。

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.entry-content {
    width: 100%;
}

注：.entry の width プロパティに 100% を与えると他の不具合が生じます。

２．文字化けの解消

折りたたみリンクにある「«」や「»」は実体参照しないと IE7 では文字化けが発生します。それぞれ「«」および「»」に修正してください。

以上です。
なおすべてのケースを調査している訳ではないので、適用しているテンプレートの CSS によって事象や対処が異なるかもしれません。

Comments [2] | Trackbacks [0]

2007年3月15日

追記文章の折りたたみ 2.0 for FC2 ブログ

March 15,2007 12:50 AM
Tag：[Customize, FC2]
Permalink

先日公開した「追記文章の折りたたみ 2.0」の FC2 ブログ版カスタマイズをご紹介します。

１．特徴

JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。

２．サンプル

追記文章の折りたたみ 2.0 サンプル（Movable Type のサンプルです）

３．script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

script.aculo.us のページ

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

script.aculo.us のページ

ダウンロードアーカイブを解凍して下記の4ファイルを、[ツール] - [ファイルアップロード] を利用してアップロードします。

/lib/prototype.js
/src/controls.js
/src/effects.js
/srcscriptaculous.js

４．テンプレートの修正1（HTMLヘッダ修正）

HTMLの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="[ファイルをアップロードしたURL]/prototype.js"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/effects.js"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/controls.js"></script>
 
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

[ファイルをアップロードしたURL] はファイルのアップロード先のURLを設定してください。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { … } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．テンプレートの修正2（追記文章表示用タグ修正）

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。ご利用中のテンプレートによって変更前の内容が若干異なるかもしれませんが、 ?  だけを残しておけば大丈夫ですので、あとは変更後の内容に入れ替えてください。

変更前

<!--more_link-->
<div class="entry-more">
   <a href="<%topentry_link>#more">続きを読む "<%topentry_title>"</a>
</div>
<!--/more_link-->

変更後

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

下のリストは、下側に表示された「続きを隠す」をクリックして追記を閉じた時に、折りたたみマーク位置、または記事タイトルに戻したい時のバージョンです。追記が長文の場合に有効です。

変更後（閉じた時に折りたたみマーク位置に戻る）

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#Link<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

変更後（閉じた時に記事タイトル位置に戻る）

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

個別記事でも折りたたみを利用したい場合は下記の部分を変更してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更前

<!--more-->
<%topentry_more>
<!--/more-->

変更後

<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->

下のリストは、個別記事で下側に表示された「続きを隠す」をクリックして追記を閉じた時に、折りたたみマーク位置、または記事タイトルに戻したい時のバージョンです。追記が長文の場合に有効です。

変更後（閉じた時に折りたたみマーク位置に戻る）

<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#Link<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->

変更後（閉じた時に記事タイトル位置に戻る）

<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください（Firefox で正常に動作しなくなります）。

６．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

７．その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.03.19 追記
追記を閉じた時に記事タイトルまたは折りたたみマーク位置に戻るリストを追加しました。

Comments [32] | Trackbacks [3]

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

FC2ブログのサブカテゴリリストの折りたたみ

１．概要

２．jQuery listfolderプラグインのダウンロード・アップロード

３．HTMLの設定1

４．HTMLの設定2

５．他のサイドバーメニューも折りたたむには

FC2ブログ・プラグイン「最新の記事＋コメント」の使い方

１．「最新の記事＋コメント」の設定

２．「最新の記事＋コメント」のツリーをきれいに表示する

３．追記文章の折りたたみとの併用

FC2ブログでプラグインに表示しているブログパーツを折りたたむ

１．元記事のカスタマイズで正常に折りたためない問題

１．前処理

２．HTMLの修正

３．スタイルシートの修正

２．HTMLの修正

サイドメニューの折りたたみ for FC2 ブログ

１．折りたたみスクリプトのダウンロード

２．折りたたみスクリプトのアップロード

３．script 要素追加

４．プラグイン表示用タグの修正

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

１．表示がずれる不具合の解消

２．文字化けの解消

追記文章の折りたたみ 2.0 for FC2 ブログ

１．特徴

２．サンプル

３．script.aculo.us のインストール

４．テンプレートの修正1（HTMLヘッダ修正）

５．テンプレートの修正2（追記文章表示用タグ修正）

６．CSS

７．その他

３．`script` 要素追加