WIN+IE5 で読み込むと折りたたまれたままで開けないという不具合がありました。2006-10-02 19:30 に修正ファイルをアップしましたので、それ以前のファイルを使われている方は、お手数ですが差し替えてくださるようお願いします。
> http://blog-imgs-27.fc2.com/s/u/g/sug/fold.js
とくに書くこともないんで、やりかけになっていた外部スクリプトを上げときます。なるべく簡単な記述で、なんでも折りたたむがテーマ。以前の記事.jsファイル外部化、あるいはプチギャラリー外伝と同時に作ってたんで方法論はいっしょ。時期をズラして出せば焼き直しと気づかれにくいし、今日ならなんでもって書いといても良いだろうってことで。
リスト専用の折りたたみに、こちらもどうぞ。
< 色考察しようと思ったけど | カレンダー > | 表紙へ戻る |
ブログ内をすっきりさせたくて、いろいろな収納(格納?)方法を伝授してくださっているところを探してこちらにたどり着かせていただきました。
さっそく使わせて頂こうと張り切っていたのですが、肝心なところで躓いてしまいました。
実は、私が使用しているテンプレートでは折り畳みたい要素と実際にスイッチとなるはずの要素の間に、もう一つ文字列のまったく存在しない要素があるのです。
その為、こちらで提示して下さっている方法では折り畳む事が出来ないようなのですが、何かいい方法はないものでしょうか?
該当部分を記載させて頂きますので、お手数ですがアドバイスを頂戴できると助かります。
どうかよろしくお願い致します。
---ここから---
<div class="linktitle" title="最新エントリー">RECENT ENTRIES</div>
<div class="linktext">
<div id="newentrylist">
<ul>
<!--recent-->
<li><%recent_etitle><br /><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a>(<%recent_month>/<%recent_day>)</a></li>
<!--/recent-->
</ul>
</div>
</div>
---ここまで----08日01時
>もう一つ文字列のまったく存在しない要素があるのです。
簡単な方法は「文字列のまったく存在しない要素」ごと折りたたみしてしまいます。
<div class="linktitle" title="最新エントリー">RECENT ENTRIES</div>
<div class="linktext js_open"> ← ここに設定
<div id="newentrylist">
<ul>
略
linktext+半角スペース+予約クラスネームと編集してください。.linktextに背景画像などが設定されていると、見た目がくずれるかもしれません。
その時はURLを教えていただければ、もう少し具体的な方法を考えます。がんばってみてください。-08日16時
丁寧に教えて下さったのにすっかりお返事が遅くなってしまってすみません。
> 簡単な方法は「文字列のまったく存在しない要素」ごと折りたたみしてしまいます。
もしかして私もそうすればいいのかなとは思ったのですが、如何せんどのようにしてすればいいのかわからずに断念してしまいました。
分ってみればとても簡単な事だったのですね・・・。
お手を煩わせてしまって申し訳ありませんでした。
大変勉強になりました。
本当にどうもありがとうございました。-17日14時
僕も、先人たちの技をみて最初はさっぱり解りませんでした。
トライアンドエラーでやってくうちに自然とおぼえるものなのでしょう。
そうなると、ちょっとだけ作業が面白くなりますよ。-18日19時
早速使わせていただこうと、取説をみながら自分のブログに適用させようとしましたが、折畳みどころか、
サイトの画面が真っ白になって何も表示しなくなりました、ソースは見れます。
<html lang="ja"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript" />
<link href="<%css_link>" type="text/css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml">
<script src="http://blog11.fc2.com/n/ID/file/fold.js"
type="text/javascript" charset=""></script>
<title><%blog_name> <%sub_title></title>
</head><body>
上記のように入力して
<!-- ▽カテゴリ -->
<div class="linktitle">CATEGORY</div>
<div class="linktext js_open">
<ul>
<!--category-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
</div>
<!-- △カテゴリ -->
上記の用にクラスネームを当てました。
なにか間違いがあるのでしょうか。
-24日23時
>なにか間違いがあるのでしょうか。
<script src="http://blog11.fc2.com/n/ID/file/fold.js"
type="text/javascript" charset=""></script>
/n/ID/ の部分は伏せられているのでしょうか?IDの一文字目とID(うちだったら s sug が入ります)
charset="" には euc-jp を入れてください。また、途中に改行が入っているなら削除してください。
<script src="http://blog(サーバのNO).fc2.com/(IDの一文字目)/(ID)/file/fold.js" type="text/javascript" charset="euc-jp"></script>
と、こうなります。
以下でも同じ動作をしますが、FC2の方で仕様の変更があるかもしれませんので、情報だけ。
<script src="./file/fold.js" type="text/javascript" charset="euc-jp"></script>
また、DTD が HTML 4.01のようですから、meta の空白とスラッシュはいりません。
× <meta http-equiv="content-script-type" content="text/javascript" />
○ <meta http-equiv="content-script-type" content="text/javascript">
これでうまく動かないようでしたら、URLをここのコメント欄にカキコしてください。
( URL欄が無くてご迷惑をおかけしております )
>サイトの画面が真っ白になって何も表示しなくなりました
プレビューで開いたブラウザのアドレス欄に &index を最後に付け足してください。これは最近できたルールみたいですよ。
→ http://blog.fc2.com/template.html [テンプレート機能一覧]-25日17時
折りたたみスクリプトをお借りして、サイドバーがすっきりしました〜♪
ありがとうございます。m(_ _)m-25日04時
ご利用ありがとうございます。隙間ネタがありましたら、またコメントくださいねー-26日01時
『今日の一枚』を参考に投稿欄で画像にjs_closeを試してみたんですけど…まったく動きません(/。\)
メニュー項目に使っているjs_closeは、titleのところに(click to open)と表示されるんですけど
今回投稿した画像にはtitleのみで(click to open)は表示されません、スクリプトが利いていないみたいですo(;・。・;)o
お手数ですが、アドバイス頂けたらと…よろしくお願い致します。-07日07時
その状態だと<img>の前の<br />がトグルスイッチになってしまい、開閉できないのです。
取り説の「表示されない要素にはスイッチは割り当てられません」に当ります。
自動改行をOFFにして投稿するか、
<p title="トマト" style="width: 300px; margin: auto;">お茶わん見る?</p><img class="js_close" style="margin: auto;" src="http://blog4.fc2.com/d/dogknittwears/file/tomato.jpg" alt="トマト">
のように、前略 〜見る?</p>と<img class="js_close"〜 後略 の間の改行を削除(ようするに続けて書く)してみてくださいね。-07日11時
やっぱり、そうでしたかぁ〜(/。\)
ソース見た時に、もしかして?!とは、思ったんですけどねo(;・。・;)o
アドバイスのようにして、思い通りに表示出来ました!
またまた、お手数おかけしました(^^ゞ ありがとうございます。
今後とも、またよろしくお願い致しますm(_ _)m
-07日20時
ここから踏み出すのって勇気いりますよね。(ブログ壊れたらどうしよう?とか)
そんな時は、いったんそのページをPCに保存してローカルで思う存分いじります。
全部この方法で上手くいくとは限りませんが。-07日21時
そうだっ!京都...じゃなくて春木屋@sugさんところに何かあったはずー!
ということで、「なんでもたたむよスクリプト」お借り致しました。
プラグインはフリーエリアを何個か使うと全部同じclass名になってしまうので、
このsugさんのスクリプトはまさにプラグイン時代にピッタリです!
いつもいつもお世話になりっぱなしです。ありがとうございます(・_・)(._.)
こういうちょっと前のモノでも、とっても探しやすいページ構成ですね。助かります。-22日00時
再配布は自由にしてもらってかまわないのですが、テンプレダウンロードからは添付ファイルを落とせないところがネックですね。
パーツ画像なんかと同じ扱いにするか、HTMLに組み込んでしまうか。直リンクだと修正しにくいし、どうしたもんでしょう?
あと、ぷらぐいんってどう使えばいいのですか(小声)-22日20時
早速お借りしてみて、とても自分の理想通りになったのですが、
なぜか各リストの一番上のものだけセンタリング状態になってしまいます。
こんな状態です→http://blog7.fc2.com/juka/index.php?style2=2005-08-22&index
最近の記事を例にすると、こんな感じです。
<!-- 最近の記事部分ここから -->
<div id="menublock">
<h2>New article</h2>
<dd class="js_close">
<!--recent-->
<ul>
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> (<%recent_month>-<%recent_day>)</li>
</ul>
<!--/recent-->
</div>
<!-- 最近の記事部分ここまで -->
大変恐れ入りますが、御教授くださいませ。。。-26日06時
トップ絵と仕掛けにビックリしました。雰囲気のあるサイトですね。
テンプレ改造過程を日付で管理するってアイディアがすばらしいw
質問についてですが、基本的には開閉したいブロックに class="js_close" を設定すればよいのですけど、JukaさんのHTMLでは一度に開閉したいブロックが複数あるので、それらをまとめるためのブロックを作らなければなりません。
基本は
<div id="menublock">
<h2>パートごとのタイトル</h2>
<div class="js_close">
開閉したい部分のHTML
</div>
</div>
という形です。
最近の記事の場合はこうなります。
<!-- 最近の記事部分ここから -->
<div id="menublock">
<h2>New article</h2>
<dd class="js_close"> ← この部分を <div class="js_close"> に編集。
<!--recent-->
<ul>
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> (<%recent_month>-<%recent_day>)</li>
</ul>
<!--/recent-->
</div> ← この一行を追加。
</div>
<!-- 最近の記事部分ここまで -->
以上のように編集してください。<dd> というのは単体では使えない要素なので、汎用ブロック要素の <div>〜</div> で開閉したい部分を全部囲みます。
裏ワザ的には
<!-- 最近の記事部分ここから -->
<div id="menublock">
<h2>New article</h2>
<ul class="js_close">
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> (<%recent_month>-<%recent_day>)</li>
<!--/recent-->
</ul>
</div>
<!-- 最近の記事部分ここまで -->
こんな書き方もあります。CSSの方も多少編集しなければなりませんが。
プロフィール欄はこうなります。
(展開前のHTMLは想像です。少し違うかもしれません)
<div id="menublock">
<h2>Information</h2>
<div class="js_close">
<p>
<!--myimage-->
<img src="<%image>" alt="<%author_name>">
<!--/myimage-->
</p>
<p>Author:<%author_name></p>
<p><%introduction2></p>
</div>
</div>
余談ですけど、id="menublock" が重複してしまっているので class="menublock" などとするのが良いと思います。その際はCSSの該当部分のほうも
#menublock → .menublock
と編集してください。
うまくいかないようでしたら、もう一度コメントください。
-26日19時
説明していただいたとおりに修正しましたところ、直りました!!
嬉しすぎて感激しておりますヾ(T∇T)ノ彡
id="menublock"もアドバイスの通りに致しました。
これから細かく諸々と調整をして、実装したいと思います。
こちらの春木屋様の方も、ぜひリンクさせてくださいませ。
とてもご親切に説明してくださり本当にありがとうございました。
これからもよろしくお願いします。
取り急ぎご報告させていただきました。-26日23時
>春木屋様
こう呼ばれると、悪代官と密談する材木問屋みたいで照れますな。-27日23時
こちらがお代官様のお好きな山吹色の菓子折りでございます。(流れが逆だって)-28日22時
様々です。本当に。
最終的に実装が完了いたしました。
たたみまくられております(笑)。
リンクもさせていただきました。
一応、本アドレスです→http://juka.blog7.fc2.com/
どうもありがとうございました♪-29日03時
また、カスタマネタなどありましたら、お寄りください。
コメント欄見てもらえばわかるように、ツッコミも歓迎ですので、そのへんも。-29日19時
本当にお騒がせして申し訳ございませんでした!
そして、素晴らしいスプリクトをありがとうございました!
もし、ご迷惑でなければ、リンクもしくはマイブログリストにのせさせていただいてもよろしいでしょうか。
もし不都合がありましたらおっしゃって下さい。
それでは、本当にありがとうございました^^-06日03時
どのページへでも、ご自由にリンクしてください。
>いったん落として繋いだらちゃんと折りたたみ出来てました
リロードすると不具合がなおるってのはよくあることです。「キャッシュを破棄する」などとも言います。
-06日21時
ようやく私のサイトでも折りたたみが実現して本当にうれしいです。
ありがとうございました。-30日23時
使ってみての不具合や、こうなっていたらもっと便利かもよ?というアイディアがありましたら、コメントくださいね。-31日20時
>ただ単に使用機種の問題なのでしょうか?
もっとも考えられるのは、ブラウザの設定でjavascriptをオフにしていることです。
その他にもブラウザのバージョンや種類(例えば、WinIE3、携帯用やPDA用の独自のブラウザ)では動きません。これらは使用機種もからむ問題ですが、僕の知識不足ともいえます。(その場合でも、元の文章が読めなくなったりエラーが出たりしないようにしているつもりです)
配布しといてあれですけど、スクリプトは補助の役目しかしません。そして、それらの余計な機能はいらないと思っている観覧者や、恩恵を受けられない観覧者もいます。折りたたみや開閉しないでも、読みやすい文章や使いやすいメニューをデザインできたらいいですね。-06日00時
実は、他の方が紹介されていた方法も試してみたんですが、どうも上手くいかなくて…(汗)
(多分、私が初心者なだけだと思いますが(笑)
こちらの方法を試してみた所、すっごく簡単に折りたたみ化出来ました!!
(苦戦していた、あの時間は何だったのか……(汗)
ありがとうございましたー!!
P.S
リンク貼らせていただきました♪-21日17時
>苦戦していた、あの時間は何だったのか……(汗
できないだけだと解らないもんですが、できたものと比べるとステップアップできることもあります。
苦戦もあまり長くならなければ楽しいものですよ(悟り。-21日22時
カスタム自体はじめてだったので、今回のことで自分の好みに仕上げていくのがとても楽しくなり、自分でもいろいろ勉強してみようと思えました^^
ありがとうございました。
リンク貼らせていただきましたm(_)m-08日21時
>カスタム自体はじめてだったので、今回のことで自分の好みに仕上げていくのがとても楽しく
化粧とか部屋の模様替えみたいなイメージですかね?自分にとってのカスタムはLEGOのイメージに近いです。
ネタなどありましたら、またお寄りください。-10日22時
丁寧な解説のおかげで無事設置出来ました!-05日17時
pinoさんクラスになると、使用料として次のアイディアを出さねばなりませぬ(ウソウソ)-05日23時
近々テンプレを変更する予定です。で、質問なんですが、
マウスオンの背景色を画像に設定することは可能でしょうか?
自分で思いつく限りのことは試してみたのですが、一向に変わってくれません。
折りたたみ自体は問題なく機能してるのですが…。
万策尽きました。よろしくお願いします。-03日09時
>マウスオンの背景色を画像に設定することは可能でしょうか?
クラス名を動的に変えるように修正しました。
スタイルシートで .js_mouse_onと .js_mouse_outにそれぞれ違うスタイルを設定することで、画像切り替えやその他のロールオーバー効果が出せます。
修正版fold.jsをアップ(2006/02/03 20:30)しましたので、お手数ですがもう一度ダウンロードして組み直してください。
手順は以下の通りです。
1)以前のスクリプトで編集箇所を書き換えたなら、同じように編集してください。
2)がるさんのサーバにfold.jsをアップロードしてください。
上書きされますから、テンプレのHTMLは変更不要です。
リロードして、以前と同じように開閉部分が動くか確認してください。
3)管理画面のCSS編集欄に以下のように記述してください
.js_mouse_on {
background-image: url(マウスオンで表示したい画像のアドレス);
background-repeat: no-repeat; /* お好みで */
background-position: 0 0; /* お好みで */
}
簡単な説明とサンプル → http://blog2.fc2.com/s/sug/file/fold2.htm
うまくいかないようでしたら、またコメントくださいね。-03日20時
希望通りに表示されて満足してます。
ありがとうございました。-04日12時
テンプレに組み込んでの配布、改造しての配布など自由にしていただいてOKです。
-----
組み込みのさいのTipsをひとつ。
メニュー → コンテンツ の構造のHTMLでメニューにのみfold.jsを使う場合。
fold.js内の
window.onload = setToggleFunc;
という一行をコメントアウトか削除して、HTML欄のメニューブロックを閉じた直後に
<script type="text/javascript">
setToggleFunc();
</script>
と追記します。(スクリプトを呼び出すタイミングを早くします)
記事件数が多い場合などで、開閉を待たなければならないストレスを軽減できるかもしれません。-03日22時
まずは解決法から。
1)ダウンロードしたfold.jsをエディタなどで開き、以下の部分を削除、またはコメントアウトしてください。位置はスクリプトの末尾のあたりです。
with ( document ) {
if ( getElementsByTagName && styleSheets ) {
var s = "<style type='text\/css'> 〜以下略;
write(s);
}
}
コメントアウトする(不具合があった場合に元に戻せるようにする)には以下のように記述します。
with ( document ) {
// if ( getElementsByTagName && styleSheets ) {
if ( getElementsByTagName ) {
var s = "<style type='text\/css'> 〜以下略;
write(s);
}
}
2)自分のサーバにアップロードしてください。上書きされますのでHTMLの編集は不要です。
3)リロードしてoperaで確認してください。(自分の使用しているopera8.01ではOKのようです)
説明など。
「なんでもたたむよ」はCSSを使って表示・非表示を切り替えています。そのエラー処理のため、スタイルシートが使えるか否かをスクリプト側で判定しています。operaはDOM-styleSheetsオブジェクトを未サポート(独自仕様)なので、スクリプトは実行されないのです。その場合でも元の文章は読めます。
本来なら、スクリプト側でUA名とバージョンを調べて、それぞれのブラウザが適応する範囲で動かす、というのが堅牢なプログラムなのでしょうが、手抜きしてます^^
いずれ、W3CのガイドラインにそったUAが増えてくれば稼動域も広がる・・・気もしますが、その頃には(折りたたみのような見映えの操作は)CSSだけで可能になるでしょうね。-24日18時
以前テンプレートに使用させていただいた時にも
//------------------------------------------------------------
//なんでもたたむよ_javascript by 春木屋 http://sug.blog2.fc2.com/
//------------------------------------------------------------
って載せてますからっ!-24日19時
Monkeyfarm なんでもつくるよ という超有名サイトのお名前をぱく(息苦しくてゆえない)
http://ironwork.jp/monkey_farm/
なんにせよ、ご利用ありがとうございます、Chakoさん(!^_^A -24日20時
見事!動きました♪
感動です♪
たたんでしまうと、クリックの手間かもしれませんけど。
動かせると楽しいですよね♪-24日22時
そうでした。趣味でやっているのだから(書き手も読み手も)楽しめることが大事ですね。
気がついたことなどありましたら、またお寄りください。-25日21時
実はウチのユーザーさんから折りたたみが開けませんというコメントがありました。
その方は、Win95&IE5.0だそうです。
テンプレートのスクリプトが以前のバージョンだったので新しい方と入れ替えてみたのですが、それでもダメなようです。
こちらが該当テンプレです。
http://beigeheart.blog9.fc2.com/?style2=beige_momiji-p&index
何かわかりますでしょうか?お忙しいのにすみません。-27日13時
>折りたたみが開けませんというコメントがありました。
実際に動いている(動いていない)ページを見せていただくのが解決の近道なのですけど、想像で書きますね。たたむところまでは出来ている様ですから、window.onload の上書き(他のスクリプトとのバッティング)が怪しそうです。
その部分を修正したファイルを上げておきます。ついでに↑43のコメント、operaでの不具合も修正してあります。
http://blog2.fc2.com/s/sug/file/fold.js
1)上記ファイルをダウンロードします。
2)テンプレのスクリプト参照先にアップロードします。← Chakoさんのサーバにリンクしているのか、各自がDL&アップするのかによって適宜、変えてください。
上書きされますので、HTMLの編集は不要です。
3)リロードして動作を確認します。
うまくいかないようでしたら、秘密コメントでかまいませんから、該当URLを教えていただけると解決できるかもしれません。
>お忙しいのにすみません。
今日はオフなんで昼寝したりテンプレいじったりしてマス。
おーるうぇいず、質問・ネタふりはお気軽にどうぞ (´ー`)-27日16時
その方は、ウチの折りたたみでも開かないようなんです(言葉足らずでした)
今、差し替えのお願いに行ってきましたので、また結果はご報告に参りますね。
今日はオフでしたか〜!
雨が上がって気持ちの良い夕暮れでしたね。-27日18時
>ウチの折りたたみでも開かないようなんです
それは、他のページを読んでもらえなくなるので深刻ですね。
だとすると思い当たるのは↑42のコメント「開閉を待たなければならない」のパターンかもしれません。
別サバの呼び出し(ブログペットとか)、エントリの表示数が多い、エントリ内に重い画像が使ってあるなんて場合で、ページの読み込みがムチャクチャ重いときや、読み込みの途中で途切れてしまった時には、スクリプトが動かず開閉できない状態になります。
閉じる部分も onload でやるように修正したファイルも上げておきます。これなら、読めない、という最悪の状態は防げるでしょう。
http://blog2.fc2.com/s/sug/file/fold_ad.js
ただ、たたむ動作をユーザに見せてしまうので、あまり美しくないかも。
他の情報などありましたら、またコメントくださいね。
-27日19時
色んな方に助けて頂きやっと折りたたむ事が出来たのですが、色の変更が出来ません。
fold.jsを編集しアップさせたのですが出来ません^^;
カラーコードは6文字では駄目なんでしょうか? 見本は3文字でしたので。
どうすれば反映されるのか教えて下さい。
もぅココは見てないでしょうか?-09日19時
>カラーコードは6文字では駄目なんでしょうか? 見本は3文字でしたので。
どちらでも OK です。編集後のファイルは文字コード EUC で保存してください。
----
上の方法は、js ファイルでのやりかたですが、FC2 管理画面の CSS 編集欄でも色の変更ができます。
**(2006/02/03 以降の fold.js で対応してます)**
1)テンプレートの編集 → CSS 編集欄 の最後に下のコードをコピペします。
.js_mouse_on {
color: #ff0000;
}
.js_mouse_out {
color: #999999;
}
2)更新してリロードします。開閉部分をポイントして(マウスを当てて)色が変わるか確認してください。
(例では、文字の色はマウスオンで赤に、マウスアウトでグレーになります。)
3)CSS 編集欄にもどり、
.js_mouse_on {
color: お好みの色;
}
.js_mouse_out {
color: お好みの色;
}
と編集してください。
背景画像や文字の大きさを変えることもできます。こちらも参考にしてみてください。
→ http://blog2.fc2.com/s/sug/file/fold2.htm
うまくいかないようでしたら、またコメントくださいね。-09日21時
こちらの方法では上手く折りたたみ出来ず、教えて頂いた方法で折りたたみが出来ました。
<!--plugin_first-->
<div class="menuBlock">
<div class="menuBlockHead" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<div class="menuBody js_close"> ←この位置です。
<div class="menuText">
<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>
</div>
</div>
<!--/plugin_first-->
上の位置にjs_closeを追加するだけで出来ました。
この方法で折りたたみに成功したのですが全部たたむのではなく、ブログパーツなどは最初から開いてて(閉じたい人は閉じる)最近のコメントなどは折りたたみ状態にしたいのです。
更新しても閉じないで前回開いた所はそのまま開いた状態にしたいのです。
説明が下手ですみません・・・
個別に設定しないといけないとは思うのですが、タグの意味が全く解らず何処に指示をしていいのか解りません・・・
上記の方法だと無理なのでしょうか?やはりこちらの書いてる方法で折りたたみ化してからしか出来ないのでしょうか?
簡単に出来ればいいのだけど。アドバイスいただけませんか?宜しくお願いします。-10日13時
今回の質問は 2つに分けて考えなければなりません。
>この方法で折りたたみに成功したのですが全部たたむのではなく、ブログパーツなどは最初から開いてて(閉じたい人は閉じる)最近のコメントなどは折りたたみ状態にしたいのです
こちらだけなら”なんでもたたむよ”スクリプトで可能です。
<div class="menuBlock">
<div class="menuBlockHead" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<div class="menuBody js_open"> <!-- 最初は開いておきたいブロックの js_close 部分を js_open とします -->
<div class="menuText">
<p style="text-align:<%plugin_first_ialign>">
〜略〜
>更新しても閉じないで前回開いた所はそのまま開いた状態にしたい
これは、ある意味”なんでもたたむよ”スクリプトとはまったく正反対の性格のスクリプトといえます。
”なんでもたたむよ”は文字通りなんでもたたみます^^が、状態を保持するスクリプトはメニューブロック・項目をすべて把握・操作できる構造にしておかねばなりません。やや中級者向けです。
いちおうサンプルを。
→ http://blog2.fc2.com/s/sug/file/ts_top1.htm
組み込み自体は簡単ですが、そこまでのテンプレの設計にセンスと熟考が必要になります。ちょっと箇条書きしてみますね。
1)メニューブロックの数を 3〜5個に整理すること
― まず、読者にとって必ず必要で、一度は目を通してもらいたいメニューを厳選します。
― それ以外のメニューは <!--index_area-->〜<!--/index_area--> などのブロック変数を使って、特定のページでのみ見せるようにします。
2)はじめて訪れた読者にはすべてのメニューを見せる(初期設定で非表示にしない)こと
― どこに何のメニューがあるか、読者に知ってもらう必要がありますので。
3)開閉の設定はユーザにまかせること
― 1)2)の上で、読者が(その時に)必要でないと判断したメニューをたたんでもらい、以後維持させます。
という流れになります。このような設計をした場合に「更新しても閉じないで前回開いた所はそのまま開いた状態」の特徴が最大限に発揮されます。
特に3)について考えた場合、読者にとって必要でないと思われるメニュー(たたむだろうと判断されるメニュー)は最初から書かないことが一番よい解決方法です。ただし、どこか(例えば <!--index_area-->〜<!--/index_area--> であるとか、そのメニューを書いた個別エントリ)に、最低ひとつはルート(通路)を作らなければなりません。でないとそのページには永遠にたどり着けなくなっちゃいますし。逆に、読者にとって必要だと思われるメニュー(たたまないだろうと判断されるメニュー)には、そもそも折りたたみスクリプトは必要ありません。
つまり、こういうタイプのスクリプトは下手に設置すればわずらわしいだけ、上手く設置すれば使われない、というシロモノなのです。それでも「何事も経験だ」と思われるなら協力いたしますよ。
拝見したところ、ゆいさんのブログはまだ記事がありませんね?しばらくは”なんでもたたむよ”を使っていただきながら、エントリを増やし(アーカイブなんかが増えてくれば、これはこれで有効です)、メニューを整理してゆくのが良いと思います。
ゆいさんのブログ(いえ、誰のブログであっても)を訪れる読者は、記事や日記を読みたくて来てくれるのです。こういっては何ですが、僕自身、スクリプトなんて有っても無くてもいいと思ってます^^
>アドバイスいただけませんか?
こういう話題・コメントをいただけることが、僕にとっての”なんでもたたむよ”の記事の効力なのです。-10日19時
(click to open)→クリックすると開きます
(click to close)→クリックするとたたみます
としてくて
objTrigger.title += ( elm.className.match(/js_close/) ) ? ' ( click to open )' : ' ( click to close )';
ここを変えてみたのですが、開いていても 「クリックすると開きます」と出てしまいました。
-07日03時
ツールチップを日本語に修正したファイルをアップ(2007/02/07 19:20)しました。
→ http://blog2.fc2.com/s/sug/file/fold_j.js
お手数ですが、上記ファイルをダウンロードして組み直してください。
手順は以下の通りです。
1)以前のスクリプトで編集箇所を書き換えたなら、エディタなどで同様に編集します。保存するさいは文字コードを EUC にします。
2)shameさんのサーバに fold_j.js をアップロードしてください。
3)管理画面の HTML 編集欄で設置してあるスクリプトのファイル名を fold_j.js と修正してください( _j を書き足すだけです)。
4)リロードして動作を確認してください。
うまくいかないようでしたら、またコメントくださいね。
(元のスクリプトと今回のものとを読み比べるてみると、次の修正の時のヒントになるかもです。)
-07日19時
変更部分の初めの部分では初期の状態のツールチップを指定して、次の2箇所では状態が変わった時に/〇〇/の部分を初期状態から探してそれを置き換えているのかな?replaceで気付くべきでした。お手数おかけしました。-07日22時
>/〇〇/の部分を初期状態から探してそれを置き換えている
ここの部分は、まわりくどく、解りにくいことをやってますね<僕
最初から設定してあるタイトル属性(ツールチップ)があれば、それに説明を追加するように作ったからです。説明だけをポップアップするなら、もう少し簡潔に書けるでしょう。
また、ネタなどありましたら、お寄りください。-08日20時
ただいま、はじめてのブログを作っております。
非常に説明が分かりやすかったです。
そのままのとうりにしたらスムーズに行きました。
お借りします。ありがとうございました。
-22日22時
分かりやすいと言っていただけると書いた甲斐があります。
分かりにくい日記も書いてますんで、ヒマつぶしにでもどうぞ(^^)
-23日22時