--------

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006-06-22

■ [custom] ポップアップメニュー

ポップアップメニューを設置する方法です。HTMLやCSSの知識がなくても手探りで設置することはできますが、思い通りに完成させるためには多少の知識が必要です。また、失敗に備えて予備のテンプレートを用意しておいてください。

jsを写す

HTMLの<head>から</head>の間に以下を挿入します（折りたたみメニューと同じなので既にあれば無視）。

ポップアップのHTMLを挿入

まず、ポップアップリンクを設置します。プラグインのフリーエリア、またはHTML内の任意の位置（初心者にはお奨めできません）に以下のようなリストのソースを挿入します。もしリンクテキストを横に並べたい場合は、<ul>を<ul id="poplink">としてください。リンクを増やす場合は太字部分の数字を増やしていくとわかりやすいと思います。

<ul>
<li><a href="javascript:void(0)"
 onclick="dd('pop1')" onkeypress="dd('pop1')">
ポップアップ1</a></li>
<li><a href="javascript:void(0)"
 onclick="dd('pop2')" onkeypress="dd('pop2')">
ポップアップ2</a></li>
<li><a href="javascript:void(0)"
 onclick="dd('pop3')" onkeypress="dd('pop3')">
ポップアップ3</a></li>
<li><a href="javascript:void(0)"
 onclick="dd('pop4')" onkeypress="dd('pop4')">
ポップアップ4</a></li>
</ul>

次に、ポップアップするもの（ポップアップボックス）のHTMLを挿入します。太字は上記のポップアップリンクの番号と連動しています。

<div id="pop1" class="popbox"
 style="display:none">ポップアップ1</div>
<div id="pop2" class="popbox"
 style="display:none">ポップアップ2</div>
<div id="pop3" class="popbox"
 style="display:none">ポップアップ3</div>
<div id="pop4" class="popbox"
 style="display:none">ポップアップ4</div>

挿入する位置は、プラグインにリストを挿入した場合にはその直下がわかりやすいかと思います。HTML内にリストを挿入した場合には、ポップアップさせる大体の位置にあるdivやtable等のボックス（親ボックス）内に挿入することをお奨めします（親ボックスの左上が基準となる）。テンプレートが左右どちらかに寄っている場合は</body>の直前でも構いません。

CSSを編集

CSSの任意の位置に以下を挿入します。

/* ポップアップ */
#親ボックス { position:relative; } /* id="○○"の場合 */
.親ボックス { position:relative; } /* class="○○"の場合 */
ul#poplink li { display:inline; }
.popbox {
 position:absolute;
 background:#FFF;
 border:2px solid #999;
}
#pop1 { top:-20px; left:-100px;
 width:80px; z-index:100; }
#pop2 { top:40px; left:0px;
 width:80px; z-index:200; }
#pop3 { top:20px; left:100px;
 width:90px; z-index:300; }
#pop4 { top:40px; left:200px;
 width:120px; z-index:400; }

ポップアップボックスのソースを挿入したdivやtable等のボックス（親ボックス）のidもしくはclassを調べ、上記の親ボックスの部分と書き換えます。プラグインの場合は、ポップアップボックスを挿入したプラグインカテゴリー（plugin_first,second,third）のプラグインコンテンツ（<%plugin_○○_content>）を囲む親ボックスのidやclassが該当します（以下に例）。

.popboxの部分でポップアップウィンドウのスタイルを指定しています。背景や枠線などはここで一括指定ができます。個別に変更したい場合は、その下の#pop1(2,3,4…)にて指定してください。

topは親ボックスの上辺を基準とした下への位置修正です。値を負数の-20pxにすると上に20px移動します。leftは同じく左辺から右への位置修正です。同じく負数の-100pxにすると左に100px移動します。z-indexはボックスの重なり表示の上下を指定します。数字が多いものほど重なったとき上に表示されます。これらはご自分で調節しつつプレビューで確かめて値を決めてください。

プラグインカテゴリー1のフリーエリアに挿入した場合の例

<!––plugin_first––>
<h3 class="side_title">
<%plugin_first_title></h3>
<div class="side_body">
<%plugin_first_content></div>
<!––/plugin_first––>

HTML内のプラグインが以上のようなソースであった場合、<%plugin_first_content>の部分にポップアップリンクとポップアップボックスのHTMLが挿入されています。この場合には、親ボックスは<div class="side_body">〜</div>となり、CSSの親ボックスをside_bodyに変更します。

備考

  • うまく動作しない理由の多くは、CSSによる表示に問題があるためです。topやleftなどの表示位置や親ボックスのid・classに問題がないか確認してください。
  • テンプレートによっては他のJavascriptやCSS内の記述によって、動作に支障をきたす場合があります。
  • ポップアップボックス内に閉じるボタンを設置する場合は、そのボックスを開くポップアップリンクと同じHTML（<a href>〜</a>まで）を挿入します。
  • ポップアップボックスのソース挿入位置、親ボックスのid・classについては、使用テンプレート名を明記した上で質問してくだされば対応することもできなくはありません。
  • リンクやボックスのスタイル指定についての質問には対応しかねます。
  • このカスタマイズを施したテンプレートを共有として公開することは禁止はしませんが、推奨はしていません。

2006-05-16

■ [sport] ぼくくぼ

久保の眉毛がその悲しみを表わす。仕方ないことよね。久保でもジーコでもないからコンディションにどれほどの不安があったのかってのはわかんないけどさ。

高原と柳沢の相性よし。巻の泥臭いプレイが実を結ぶのを期待しとります。玉田は果敢に走ってもらいたい。二人ともワンプレイで存在感をアピールできる選手なんで、高原の負担を軽くした上で自分もチャンスをモノにできるはずです。大黒は点を取ると言ったらホントに取る。

中盤は黄金。GE。相手がどんな守りをしようと無駄無駄無駄無駄。DFも3バックでも4バックでもいける、個々のタレントも充分、GKとの連携もOK、とこれだけ揃ってれば平気でしょ。セットプレイとカウンターに気を付ければ。

各メディアではオーストラリアとクロアチアの、ランクからはわからない実力を明らかにして不安をあおってるけど、そう悲観的になるもんじゃないと思う。最良のプレイをしてくれれば観てる方はそれだけで楽しいし、最良のプレイをするってことは勝利に繋がってると思う。

■ [custom] 再利用

カテゴリの通し番号<%cno>を使ってタイトル画像を差し替える。

<h1>や<div id="header">などに、
class="c_<%cno>"を入れて、head内に
.c_<%cno> { background:url(<%url>file/category<%cno>.gif) }
というCSSを入れるか（ファイル名は上のように番号と連動）、
CSSにカテゴリ毎の背景を
.c_カテゴリの番号 { background:url(ファイルURI) }
と表記する。

変数を本来とは別の使い方をするなら、<%topentry_category>や<%topentry_youbi>とかが使いやすいと思う。その気になれば、<%topentry_comment_num>（コメントの数）が0なら「なし」、1〜5のときは「ちょっと」、10以上なら「たくさん」とか、数字を言葉にもできる。<%sub_title>もどこでも使えるので便利。半角スペースが入るのでclassやidには使えず。

■ やっぱり

思いつきの殴り書きはよくない。

2005-10-23

■ [custom] カテゴリイメージ

エントリのカテゴリをイメージにできますよという話。アイコン風のイメージでちょこんと置いておくとアクセントにもなります。bookカテゴリは本のアイコン、tvカテゴリならテレビのアイコンとか。

HTMLの任意の位置に以下のようなものを挿入します。よくある形としては<%topentry_title>の周辺、というかこれを囲む<h3>とか<div class="entry_title">とかの中に置くのがよさげです。

<img src="
<%url>file/cno<%topentry_category_no>.gif"
width="15" height="15" alt="<%topentry_category>"
title="<%topentry_category>">

太字の部分は自由に変えてください。ファイル名はそれぞれのカテゴリの固有番号（<%topentry_category_no>の部分に入る）を含めるようにしてください。カテゴリページのURLの数字部分が（…/blog-category-3.html）がその番号です。例えば本のカテゴリの番号が5だとしたら、本アイコンのファイル名をcno5.gifなどにします。

ちなみにイメージとタイトルの縦位置が合わないってことがよくあります。文字よりも画像が上に表示されたり。そんなときはvertical-alignとかposition: relative;とか、marginとかpaddingとかで調節したりします。

これが1番苦戦すると思うので、カテゴリイメージを作るときに適当な余白のあるものを作成するってのも手です。

これと似たようなものとして、<%topentry_hour>を使って時刻別にアイコンや背景色が変わるとか、<%topentry_youbi>を使って曜日別に以下同文ができます。追記を使わないことを条件にすれば<%topentry_more>を使って、もっともっとおもしろいことができると思います。

■ [custom] カテゴリ名置換

カテゴリ名を英数にしたけども、サイドメニューのカテゴリリストでは日本語で表示したい場合や、その逆の場合のためのカスタマイズです。

サイドメニュー版

HTMLのカテゴリ部分（<!––category––>）か、カテゴリプラグインのHTMLを以下のように変更します。固有番号（詳しくは上のカスタマイズを参考に）と太字の部分を合わせるようにします。以下の例では番号が1のとき雑記、2のとき読書。

<ul>
<!––category––>
<li>
<a href="<%category_link>">
<span class="c <%category_name>1">雑記</span>
<span class="c <%category_name>2">読書</span>
<span class="c <%category_name>3">ウェブ</span>
(<%category_count>)/a>
</li>
<!––/category––>
</ul>

そしてCSSに以下を加えます。太字は元のカテゴリーで数字は固有番号です。

.c { display: none; }
.zakki1, .reading2, .web3 { display: inline; }

エントリ版

HTMLのエントリ内のカテゴリ表示（<%topentry_category>）の部分を以下のように変更、もしくは<!––topentry––>内の別の場所に以下を追加します。太字や数字の意味はサイドメニュー版と同じ。

<a href="<%topentry_category_link>">
<span class="ce <%topentry_category>1">雑記</span>
<span class="ce <%topentry_category>2">読書</span>
<span class="ce <%topentry_category>3">ウェブ</span>
</a>

そしてCSSに以下を加えます。こちらも意味はサイドメニュー版と同じ。

.ce { display:none }
.zakki1, .reading2, .web3 { display: inline; }

備考

参考：http://blog.fc2.com/forum/viewtopic.php?t=35

別のことにも使えますね。JavaScriptでやらなきゃならなそうなことがCSSでもできるという例。

2005-09-08

■ [custom] プラグインの折りたたみ

プラグインの折りたたみ方法について解説しています。3つの方法を書いていますが動作自体は変わりません。

上から順に難しくなっています。その2とその3はJUGEMカスタマイズ講座 | ナビゲーションの折り畳みのスクリプトを利用しているので、こちらに慣れている人や同サイトのスクリプトを利用してツリー化も行う人向きです。古い方のその3は一応残してありますが、初めての人にはその2をお奨めします。

※ 文中に○○という穴抜きがされていますが、どれもプラグインカテゴリ（以下PC）の番号（first,second,third）を現しています。

■プラグインの折りたたみ その1

この方法では、フリーエリアが複数ある場合には動作しません。しかし、すべてのプラグインタイトルを英数字にすることで解決することができます。もしフリーエリアが複数あり、かつプラグインタイトルを日本語にしたいという場合は、各自で工夫をするかその2その3の方法を選んでください。

詳しく説明すると、プラグインの識別タグ（<%plugin_○○_tag>）をidセレクタとして使用するため、この識別タグや、categoryやsearchなどの識別用の文字列と同じものが他の場所でidセレクタとして使用されていると正しく動作しません。その場合は、識別タグの代わりにプラグインタイトルを使用する方法を解説していますが、それもまた既にidセレクタとして使用されていないことが条件です。これらに反する場合は、各自でプラグインの説明（<%plugin_○○_description>）などを使用するなどの工夫をしてください。意味がわからないという人はとりあえず試してみて、動作しなかったときに改めて他の方法を試すことになるかもしれません。

基本となるJavaScript（以下js）はfrom DFJの折りたたみメニューのスクリプトを利用させて頂きます。

jsを写す

HTMLの<head>から</head>の間に以下を挿入します。

HTMLの変更

1．テンプレートのHTMLから<!––plugin––>を探し、折りたたみたいPCのプラグインタイトル（<%plugin_○○_title>）を、<a href="javascript:void(0)" onclick="dd('<%plugin_○○_tag>')">と</a>で囲みます。メニューのタイトル部分が<h3>最近の記事</h3>の場合は<h3><a href="javascript:void(0)" onclick="dd('<%plugin_○○_tag>')">最近の記事</a></h3>となります。

フリーエリアが複数ある場合は、<%plugin_○○_tag>の代わりに<%plugin_○○_title>を使用します。そうした場合、プラグインの設定にてそれぞれのプラグインタイトルを別々の英数字にする必要があります。また、それらは既にidセレクタとして使用されている文字列以外に限ります（HTMLにid="search"とあれば、searchというタイトルにはすることができません。その場合はどちらかを変更する必要があり、HTMLの方を変えた場合にはスタイルシートの変更も行わなければならないこともあります）。

プラグインタイトルを囲む代わりに、画像や■などの記号を囲むこともできます。そうすることで折りたたみのボタンを作ることができます。

2．次に<%plugin_○○_content>、もしくはプラグインタイトル部以下からそのPCの末尾までを、<div style="display:none" id="<%plugin_○○_tag>">と</div>で囲みます。最初に閉じておく場合はstyle="display:none"に、開いておく場合はstyle="display:block"とします。

1と同じように、フリーエリアが複数ある場合には、<%plugin_○○_tag>の代わりに<%plugin_○○_title>などを使用します。

変更例1

<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>">
<a href="javascript:void(0)"
 onclick="dd('<%plugin_first_tag>')">
<%plugin_first_title></a></h3>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<div style="display:none" id="<%plugin_first_tag>">
<%plugin_first_content>
</div>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
<!––/plugin_first––>

変更例2

<!––plugin_second––>
<div class="side_title">
<a href="javascript:void(0)"
 onclick="dd('<%plugin_second_title>')">■</a>
<%plugin_second_title>
</div>
<div style="display:block" id="<%plugin_second_title>"
 class="side_body">
<p><%plugin_second_description></p>
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>

jsをOFFにしている閲覧者のためには、noscriptを用意するかstyle="display:block"にするといいと思います。

■プラグインの折りたたみ その2

失敗したときのためにテンプレートの予備を用意しておくと安心です。

プラグインの設定変更

1. 管理画面にて、プラグインの設定→（折りたたみたいプラグインの）設定の変更と選択し、上部に記載するプラグインの説明文に以下の例に従って入力していきます。

  • 最近の記事を折りたたむ場合＝plugin_entryと入力
  • 最近のコメントの場合＝plugin_commentと入力
  • 最近のトラックバック＝plugin_tb
  • 月別アーカイブ＝plugin_archive
  • カテゴリー＝plugin_category
  • リンク＝plugin_link
  • その他＝plugin_任意の文字列（英数字）

HTMLの変更

2. JUGEMカスタマイズ講座からナビゲーションの折り畳みのスクリプト（<script ...>から</script>まで）をコピーして貼り付けます。ツリー化スクリプトなどがある場合は貼り付ける位置に注意。

3. スクリプトを以下の例に従って変更します。on,offやtrue,falseについては配布元を参照してください。

function InitFoldNavi() {  FoldNavigation('プラグインの説明文に入力した文字列','off',false);
 FoldNavigation('plugin_entry','on',true); //最近の記事
 FoldNavigation('plugin_comment','on',false); //最近のコメント
 FoldNavigation('plugin_tb','on',false); //最近のトラックバック
 FoldNavigation('plugin_archive','off',true); //月別アーカイブ
 FoldNavigation('plugin_category','off',true); //カテゴリー
 FoldNavigation('plugin_link','on',true); //リンク
 FoldNavigation('plugin_search','off',false); //ブログ内検索
 FoldNavigation('plugin_calender','on',false); //カレンダー
 FoldNavigation('plugin_profile','off',false); //プロフィール
 FoldNavigation('plugin_mail','off',false); //メールフォーム
 FoldNavigation('plugin_rss','off',false); //RSSフィード
 FoldNavigation('plugin_ad1','off',false); //アフィリエイト広告1
 FoldNavigation('plugin_ad2','off',false); //アフィリエイト広告2
}

4. テンプレートのHTMLから<!––plugin––>を探し、折りたたむプラグインを含むPCの<%plugin_○○_description>とそれを囲むタグを消します。最初から無い場合はこの項目を飛ばしてください。

<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>">
<%plugin_first_title>
</h3>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</div>
<div class="side_body" style="text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
</div>
<!––/plugin_first––>

<!––plugin_second––>
<div class="sidemenu_title"><%plugin_second_title></div>
<div class="sidemenu_body">
<p><%plugin_second_description></p>
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>

5. 次に<%plugin_○○_title>を囲むタグにid="<%plugin_○○_description>name"を挿入します。

<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>" id="<%plugin_first_description>name">
<%plugin_first_title>
</h3>
<div class="side_body" style="text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
</div>
<!––/plugin_first––>

<!––plugin_second––>
<div class="sidemenu_title" id="<%plugin_second_description>name">
<%plugin_second_title>
</div>
<div class="sidemenu_body">
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>

6. 最後に<%plugin_○○_content>、もしくはプラグインタイトル部以下からそのPCの末尾までを囲むタグにid="<%plugin_○○_description>list"を挿入します。挿入すべきタグが見当たらない場合は<div id="<%plugin_○○_description>list">と</div>で<%plugin_○○_content>を囲んでください。

<!––plugin_first––>
<div class="side_menu">
<h3 style="text-align:<%plugin_first_talign>" id="<%plugin_first_description>name">
<%plugin_first_title>
</h3>
<div class="side_body" style="text-align:<%plugin_first_align>" id="<%plugin_○○_description>list">
<%plugin_first_content>
</div>
<div style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
</div>
<!––/plugin_first––>

<!––plugin_second––>
<div class="sidemenu_title" id="<%plugin_second_description>name">
<%plugin_second_title>
</div>
<div class="sidemenu_body" id="<%plugin_○○_description>list">
<%plugin_second_content>
<p><%plugin_second_description2></p>
</div>
<!––/plugin_second––>

  • 開閉ボタンなどの表示設定はスクリプトの配布元を参考にしてください。
  • また、<div>などが多く使われていたり、凝ったデザインである場合には表示が崩れてしまう可能性もあります。
  • プラグインタイトルの位置などをCSSで調節する必要がある場合もあります。
  • その他、テンプレートによっては動作しないなどの問題があるかもしれません。
  • ツリー化との併用もできます。

スクリプトは同じなのでその3と変わりはありません。

■プラグインの折りたたみ その3

失敗したときのために予備を用意しておくと安心です。

テンプレートのHTMLを変更

1. JUGEMカスタマイズ講座からナビゲーションの折り畳みのスクリプト（<script ...>から</script>まで）をコピーして貼り付けます。ツリー化スクリプトなどがある場合は貼り付ける位置に注意。

2. カテゴリーを折りたたみたい場合は、スクリプトに矢印の一行を加えます。他にも折りたたみたい部分がある場合は、○○の部分を新しい文字列に変えたものを加えます。

function InitFoldNavi() {
 FoldNavigation('newentry','off',false); //最新エントリ
 FoldNavigation('entry'   ,'on' ,true); //ページエントリ
 FoldNavigation('comment' ,'on' ,false); //最新コメント
 FoldNavigation('tb'      ,'on' ,false); //最新トラックバック
 FoldNavigation('archive' ,'off',true); //アーカイブ
 FoldNavigation('link'    ,'on' ,true); //リンク
 FoldNavigation('profile' ,'off',false); //プロファイル
 FoldNavigation('category' ,'off',false); //カテゴリー　←
 FoldNavigation('○○' ,'off',false); //○○の説明
}

3. 折りたたみたいプラグインが含まれるPCを、 <!--plugin_○○-->を目印にHTMLから探します。 例えば「最近のエントリー」がPC1に、「最近のコメント」がPC2にあり、 そのどちらも折りたたみたいという場合には<!--plugin_first-->と <!--plugin_second-->を探します。

4. その下方にあるプラグインタイトルの変数とそれを囲むタグ （<h2 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h2> や <div class="side_title"><%plugin_second_title></div>など）を切り取り、メモ帳などに貼り付けておきます。

5. またそれぞれに<%plugin_○○_description>があれば、 それを囲むタグごとそれを消します（<p style="text-align:<%plugin_first_ialign>">〜</p>など）。description2についてはそのままで平気です。

6. もし上記までを行った状態で<!--plugin_second-->と<%plugin_second_content>の間に何か表記がある場合はそれも切り取り、4でメモ帳などに貼り付けたものの下に貼り付けておきます。

HTML変更例1

変更前

<!--plugin_first-->
<h3 style="text-align:<%plugin_first_talign>">
<%plugin_first_title></h3>
<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>
<!--/plugin_first-->

変更後

<!--plugin_first-->
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
<!--/plugin_first-->

メモ帳

<h3 style="text-align:<%plugin_first_talign>">
<%plugin_first_title></h3>

HTML変更例2

変更前

<!--plugin_second-->
<div class="side_title"><%plugin_second_title></div>
<div class="side_body">
<%plugin_second_description>
<div class="side_content">
<%plugin_second_content>
</div>
<%plugin_second_description2>
</div>
<!--/plugin_second-->

変更後

<!--plugin_second-->
<%plugin_second_content>
</div>
<%plugin_second_description2>
</div>
<!--/plugin_second-->

メモ帳

<div class="side_title"><%plugin_second_title></div>
<div class="side_body">
<div class="side_content">

プラグインのHTMLを変更

7. まず1番上に、4（と6）でメモ帳に移したものを貼り付けます。その中のstyle指定を消します（class="××"は残す）。さらに、<%plugin_○○_title>を任意のタイトルに変更します。

HTML変更例1

<h2 class="side_title">Recent Entry</h2>
元々のHTML

HTML変更例2

<div class="menu_title">Recent Comments</div>
<div class="menu_body">
<div class="menu_content">
元々のHTML

8. 元々のHTMLを<div>で囲います。もし6で移したものがある場合はそのままで結構です。

HTML変更例1

<h2 class="side_title">Recent Entry</h2>
<div>
元々のHTML
</div>

HTML変更例2

<div class="menu_title">Comments</div>
<div class="menu_body">
<div class="menu_content">
元々のHTML

9. 加えたものにそれぞれidを付けます。もし6を行っている場合は、元々のHTMLのひとつ上にある<div>にidを付けます。idについてはテンプレートHTML変更の2にある以下の色文字の部分を参照します。

FoldNavigation('newentry','off',false); // 最新エントリ

その文字に、タイトルにはnameを、本体にはlistを付けたものがidになります（例はナビゲーションの折り畳みに）。

HTML変更例1

<h2 class="side_title" id="newentryname">Recent Entry</h2>
<div id="newentrylist">
元々のHTML
</div>

HTML変更例2

<div class="menu_title" id="commentname">Recent Comments</div>
<div class="menu_body">
<div class="menu_content" id="commentlist">
元々のHTML

例になくても、テンプレートHTML変更の2で加えたものならば折りたたむことができます。 例えばスクリプトに○○をmemoに変えた一行を加えてあれば以下のようにすることで折りたためます。

<h3 id="memoname">MEMO</h3>
<div id="memolist">
メモ
</div>

10. 折りたたみたいプラグインと同じPCにあるが折りたたまないプラグインにも必要があればタイトルを付けます（付けないとタイトルは表示されません）。やり方は7と同じです。
タイトルが必要のない場合でも6を行っている場合は、6で移したもの（4で移したものを除く）を元々のHTMLの上に貼り付けておく必要があります。

<h3>Search</h3>
元々のHTML
<div class="side_box">
元々のHTML

備考

  • 開閉ボタンなどの表示設定はナビゲーションの折り畳みを参考にしてください。
  • また、<div>などが多く使われていたり、凝ったデザインである場合には表示が崩れてしまう可能性もあります。
  • プラグインタイトルの位置などをCSSで調節する必要がある場合もあります。
  • その他、テンプレートによっては動作しないなどの問題があるかもしれません。
  • ツリー化との併用もできます。

スクリプトは同じなのでその2と変わりはありません。

■ [custom] プラグインのツリー化（誘導）

最近のエントリ・コメント・トラックバックとリンクについてはひよこさん（id:hiyokokun）のツリー化の手引き（FC2ツリー化の手引き簡易バージョンでも可。というか楽）での修正HTMLをコピーしてプラグインのHTMLにペーストで、カテゴリーについてはそのリンク先を読めばできます。

リンクのツリー化をするときにはカテゴリーのように、リンクの編集でサイト名を以下のように変更します。

［分類］サイト名

2005-05-28

■ [custom] コメントの展開・折りたたみ

個別記事に移動せずに“トップページで”コメントリストを展開して読めるようにするカスタマイズです。動作をするように変更するだけの説明なので、見た目のカスタマイズについてはご自分で調べるか質問をしてください。 また、使用するテンプレートによってはHTMLの変更に違いがあるかも知れません。どうしてもわからなければ質問してください。

まず行うべきこととして、コメントリストを有効にすることが挙げられます。管理画面で、環境設定の変更→ブログの設定と進み、そのページの最下部「<%topentry_comment_list>を有効にする」の項目を「有効にする」に変更しておいてください。

ここでは記事ステータス（記事下の日付・コメント・トラバ等）を<ol>によってリスト化しているテンプレートを前提に説明します。他のテンプレートで使いたい場合は<li>を<div>や<p>にして考える必要があるかも知れません。

スクリプトの設置

以下をHTMLの<head>と</head>の間に挿入します。

HTMLとスタイルシートの変更

以下を</ol>の上に挿入しますが、記事ステータスは大抵の場合ひとつひとつの項目が | で仕切られています（前後に半角スペースがない場合も）。そのため、コメントの開閉ボタンを設置するために前の項目に仕切りを入れなければなりません。</ol>の直前の</li>の前に | を入れてください。
開閉ボタンであるComment-openとComment-closeの文字は好きに変更してください。

そしてスタイルシートに以下を書き加えます。paddingの指定はご自分にあったサイズに調整し、必要があれば他の指定も書き加えてください。

.com_open {
display: block;
padding: 0 5px;
}

※ このコメントの折りたたみは追記の折りたたみと共に使うことができます。
※ 開閉を行うと閉じるボタン（Comment-close）がズレる場合がありますがそういう仕様です。
※ もちろん私にもわからないことがあるので、なんでもかんでも質問に答えられるわけではないので悪しからず。

<ol>や<ul>がない！

記事ステータスがリスト化されていない場合は、そのままリンクを並べただけのHTMLになっていることが多いはずです。そのコメントやTRACKBACKなどの文字列が並ぶ一群に以下を挿入します。

その下方にある</div>や</table>の下に以下を挿入します。

こちらは挿入する位置によって動作や表示に支障をきたす場合があるので、何度か移動させてみるといいと思います。

おまけ - スタイルの変更

私が公開している共有テンプレート「climber」にコメント折りたたみを導入したときにはそのままだと崩れてしまうので、スタイルを整える方法を記します。動作確認（そのうち消します）

スタイルシートから/* ---------- 記事ステータス ---------- */を探しだしてheight: 30px;を消し、padding: 0;をpadding: 0 0 10px 0;に変更します。そしてbackgroundの指定のno-repeatの後ろに bottomと入れます（半角スペース含む）。

そして上記で書き加えたスタイルシートを以下のように変更します。

.com_open {
display: block;
padding: 5px 20px;
text-align: left;
}

合計 + 今日 + 昨日