折り畳みで「続きを読む」(軽量化版)
以前公開した「折り畳みで「続きを読む...」」javascriptですが、Opera7系で [続きを表示] が表示されない不具合があったこともあり、オプション機能を排除したシンプルなバージョンを作りましたので暫定公開します。(ココログなどのTypepad系用です)
このjavascriptを設置すると、一段落目の後(記事タイトルの次の要素の直後)で折り畳まれるようになります。また、記事本文中に水平線(HRタグ)がある場合はそこで折り畳まれますので、折り畳みたい位置を自由に指定することもできます
このスクリプトは、もう古くなりました。新しいのはこちら↓(2005年)
[f-] 折り畳みで続きを読む(ブログ人の新HTML対応?版)
(ココログもコレでとりあえず)
設置方法は、本文より後(ココログの場合:右サイドバー)にあるHTMLを書ける所(同:マイリスト[リンク型など]のメモ欄[要「テキスト表示」に設定])に下記の呼び出しスクリプトをコピー&ペーストして反映させてください。
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent00a.js"> </script>
自サイトに持っていきたい方は、以下のリンクからスクリプト本体をどうぞ。
# 上記の呼び出し呼び出しスクリプトのURLも変更が必要です。
# 以前のような、44行目の//を消すという作業は不要にしました。
[続きを表示]の文字などをカスタマイズしたい場合は、自サイトにスクリプト本体をアップロードする必要があります。上記のスクリプト本体をダウンロード後、メモ帳などでファイルを開き、最上部にある該当部分を書き換えて(アルファベット以外の場合はUTF-8で)保存してからアップロードしてください。
# 最初からこのバージョンを出せばよかったですね...orz
★水平線を使う場合の注意:
- 自動改行している場合は、<hr />タグの前後に必ず空行を一行おいてください。
- タグを手打ちしている場合は、前後の文章とは別の要素としてhr要素を記述してください。
# hrタグと文章を同じタグ内に同居させてしまっている場合にどうなるかは自分でもよくわかっていませんので、不具合があれば御連絡いただければ幸いです。
# Opera7.53/7.23で動くようになったようです。
« そういえば2、3日留守にするんでした | トップページ | 使用容量:10カ月で6.032MB(20.11%) »
「ウェブログ・ココログ関連」カテゴリの記事
- [ココログ] 「記事の公開日時変更をもっと簡単に」するBookmarkletを再びIE6でも動くようにしました(2010.01.29)
- [ココログ] 「ウェブページ」のファイル名を index.html にしてみたら…(2008.09.03)
- [ココログ] コメント入力欄に「(任意)」の文字も!(2008.04.01)
- げ。(2008.01.10)
コメント
この記事へのコメントは終了しました。
トラックバック
この記事へのトラックバック一覧です: 折り畳みで「続きを読む」(軽量化版):
» 折り畳みで「続きを読む...」」(軽量化版) [ぴっくあっぷ@blogzine]
facet-diversのfacetさんが以前紹介した「続きを読む」スクリプトの [続きを読む]
» サイドバー折り畳みVER.UP! [のこのこGOGO]
コロッピーさんの「折りたたみ状態保持の人柱になってみる(笑) [続きを読む]
» 「続きを読む」に大成功! [英 語 日 和 。]
「続きを読む」(=続きを表示)リンクを貼って記事を折りたたむことに昨日は失敗して [続きを読む]
» facet-divers: 折り畳みで「続きを読む」(軽量化版) [此処録ANNEX:ココログTIPS]
facet-divers: 折り畳みで「続きを読む」(軽量化版) [続きを読む]
» 折りたたみは難しい! [らいおんうさぎハート]
記事を折りたたもうとぴっくあっぷさんの手順を参考にfacetさんのスクリプトを使 [続きを読む]
» コメントアウトして非表示にしたところの下線や枠も消すjavascript:Mac IE対応(?)版 [facet-divers]
以前公開した「サイドバーの見出しの下線や枠も非表示にするjavascript」ですが、Mac IEでは効果がないという御指摘をいただいていましたので、とりあえず [続きを読む]
» 折り畳みで続きを読む(ブログ人の新HTML対応?版) [facet-divers]
以前公開した、折り畳みで「続きを読む」スクリプトですが、先日のブログ人のHTML変更でうごかなくなってしまったので、それに対応したバージョンを作ってみました。動 [続きを読む]
» 折り畳みで続きを読む(ブログ人の2005-12版HTML暫定対応&動作確認版) [facet-divers]
以前公開した、折り畳みで「続きを読む」スクリプトですが、先日(2005-12)のブログ人のHTML変更でまた動かなくなってしまったので、修正バージョンを作ってみ [続きを読む]
こんにちは。(^-^)
ブログ人の方に設置してみました。
#一部JavaScriptエラーが出ていますが
#あの対応でよかったですか?IE6.0だから??(苦笑)
あと、このスクリプトの設置説明の記事だけは
うまく機能してないようです。(^-^;
#タグがらみですかねぇ…。
まずは、ご報告まで。
投稿: ぴっくあっぷ。 | 2004-09-21 12:36
ぴっくあっぷ。さん、早速どうもです。(^^)
>#あの対応でよかったですか?IE6.0だから??(苦笑)
すみません。凡ミスもいいところでした。差し替えておきましたので、記事の該当部分をdelっておいていただけますか_(._.)_
>#一部JavaScriptエラーが出ていますが
これって57行目のエラーのことでしょうか。まだ出ているようでしたら、またお知らせいただければ幸いです。
>あと、このスクリプトの設置説明の記事だけはうまく機能してないようです。(^-^;
>#タグがらみですかねぇ…。
あれ?そうですか?うーん。うちでは問題なく...。
そうそう。個別記事ではボタンが出ない仕様にしたんですけど、それでしょうか。
投稿: facet | 2004-09-21 13:28
該当部をDelっておきました。
#エラーは57行目のことです。
> そうそう。個別記事ではボタンが出ない仕様にしたんですけど、それでしょうか。
最新の記事、http://mobaio.blogzine.jp/pickup/2004/09/post.html" title="ぴっくあっぷ@blogzine: 折り畳みで「続きを読む...」」(軽量化版)">ぴっくあっぷ@blogzine: 折り畳みで「続きを読む...」」(軽量化版)
では「続きを表示」が出てこないです。
水平線も入れているんですが…。(^-^;
説明の記事なので、かえって折り畳まない方がいいかな?とも
思うのであまり気になりませんけどね。
投稿: ぴっくあっぷ。 | 2004-09-21 13:45
>該当部をDelっておきました。
>#エラーは57行目のことです。
お手数かけました。_(._.)_
# delタグでもよかったですけど:反省の意味を込めて
>ぴっくあっぷ@blogzine: 折り畳みで「続きを読む...」」(軽量化版) では「続きを表示」が出てこないです。
ああ。ほんとですね。下の方にある以前のバージョンの記事もダメですね。
...水平線がある奴がダメみたいですね。
HTMLソースをみたところ、ブログ人とココログの、自動改行の処理が違うように思われます。
ココログだと、水平線がある場合、回りのPタグを自動的に消去してくれるようですが、ブログ人は、そのままPタグ内にHRタグがあるようになってますね。(以前はココログもそうだったんですけど、いつのまにか変更されている様子)
今回軽量化する時に、HRタグがPタグの内部にある場合の処理を外してしまった(外れてしまった)のが原因のようです。
しばしお待ちを。
投稿: facet | 2004-09-21 14:33
修正してみました。差し替えましたので、再ダウンロード&アップロード&確認をお願いします。>ぴっくあっぷ。さん
投稿: facet | 2004-09-21 15:00
ご連絡ありがとうございます~。
軽量版にしてみました。hrタグを本文に入れる予定はないので、私には大丈夫だと思いますが…。
投稿: KUMI | 2004-09-21 15:06
>>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c754609">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c754609
KUMI さん、コメント&早速の入れ換え、ありがとうございます。
KUMIさんのように、シンプルに使いたい方がほとんどでしたので、思い切ってオプション機能をほとんど捨ててみました。
オプション機能は、別途、呼び出しスクリプトを書き足すだけでできるようにしたいなと考えているところです。まあ、自分以外には需要がなさそうですけど(笑)
ところで、スクリプトの差し替えが、ちょうど入れ違いになったかもしれません。今回の修正で、ブログ人で水平線を使っても大丈夫になったとは思うのですが。
水平線、もしご入り用になりましたら、また覗きにいらっしゃってください。そのころには事態も固まっていることかと。(^^;
投稿: facet | 2004-09-21 15:32
facetさん、こんばんは!
おっ、軽量版ですか。
僕も以前はオペラを使っていたのですが、ハイパーリンクが使えないHPがあったりしたのでやめました。
今のところ、前回のバージョンで安定しているので、このまま使ってみようと思います。(この間いろいろいじっていたら、修復するので1日使ってしまったので…)
三角矢印とタイトルに触ると色が変わるようになりましたね!?
これからも楽しませていただきます♪
投稿: ぐんぐん | 2004-09-22 12:07
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c758996">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c758996
ぐんぐんさん、こんにちは。
この間、私がコメントでオペラの不具合のことを書いたの後、オプション機能をいろいろと追加してくださっていたようですね。お手数かけました。最初にこれを公開できればよかったんですが、あのときはまだこのバージョンを作り始めてさえいなかったので。
以前のバージョンは、機能は豊富なんですが、それぞれの機能がまだ十分ではなく、使っているうちに不満が出てくるかと思います(わたし自身がそうでした)。なので、そういう時が来てから、こちらのバージョンを御検討いただければよいかと思います。
なお、今回削った機能については、これからまた、このバージョンに追加できるような方法を考えて見たいと思っています。
>三角矢印とタイトルに触ると色が変わるようになりましたね!?
?...ああ、すみません。この二つは、また全く別のスクリプトです。
「▲」リンクは、単なる「ページの先頭に戻る」リンクを本文エリアに適当に配置するようにしたjavascriptで、まだ未公開の実験中のものです。
(addBackToTopLinks01a.js:右サイドバーにあります)
色が変わるのは、スタイルを設定してあるためです(CSSのa:hover)。マウスを持っていくと、ほとんど全てのリンクがこの色に変わると思います。
# 最初の「本文折り畳み」スクリプトの「△」「▽」は実はbuttonタグでして、aタグではないんです(^^;。
それから記事タイトルの頭の■は、■(スクエア)ギルドってやつに共感しているからでして、折り畳みとは全く関係ありません。詳しくは、以下のリンクから。
http://facet.cocolog-nifty.com/divers/2004/09/guild.html">http://facet.cocolog-nifty.com/divers/2004/09/guild.html
いつもいろいろ実験中で、ややこしくてすみません。(^^;
投稿: facet | 2004-09-22 13:56
/* どのブログでも折り畳んでしまいたいと思ったことはありませんか?私はそうなんですが(^^; */
思う様な,思わない様な
ウ~ン,考え込んでしまいました。
一度試して見ます。
その時又ご報告します。
投稿: straycat | 2004-09-23 03:16
試しに,全て畳んでみました
こんな感じですかね?
笑わずに見て下さい。
投稿: straycat | 2004-09-23 08:32
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c762912">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c762912
straycatさん、おはようございます(^^)
なーるーほーどー。そういう意味でしたか。もちろん笑いませんけど、私の意図していたこととは全然別のことでしたので、戸惑いました。
「どのブログでも...」の条は、「自分が巡回したり出会ったりする(自分のブログを含めた)全てのブログで...」という意味で書いたつもりでした。
自分のブログならば、こういう風に自分好みに近づけることもできますけど、他人のブログではそうはいきませんからねぇ...と、そういう、世間話程度の話のつもりでした。なんだか、お手を煩わせてしまったようですみません。
「本文折り畳み」はいかがでしょうか?もしお気に召しましたら、そのままお使いいただき、御意見いただければ幸いです。
文字で意図を伝えるのは難しいですね。
投稿: facet | 2004-09-23 10:14
今晩は
度々お邪魔してご迷惑おかけします
文章の書き方,文章での伝え方,本当に難しいですが,それよりもfacet-diversさんが公開している,折りたたみ式サイドバーの事で毎日頭の中が一杯で,facet-diversさんのサイトに訪れては勉強している自分に今は他の事を考える余裕が無く,とんでもない誤解をしていました。(笑って下さいすみません)でも丁度良いきっかけでしたので,このままの状態で使用させて頂きます。(お恥ずかしい限りでした)
投稿: straycat | 2004-09-23 13:53
straycatさん、こんばんは。
拙作サイドバー折り畳みのことをそんなに一生懸命考えていただけるなんて、本当に光栄です。今回のさまざまな御協力を無駄にしないよう、なんとか改良に反映させていきたいと思います。_(._.)_
なにか反映し忘れていることがありましたら、その時はビシビシと御指摘ください。これからも宜しくお願いします!(^^)
投稿: facet | 2004-09-24 01:54
facet-diversさん 今晩は
今回は,「本文折り畳み」を勘違で(お恥ずかしいです)最初は導入しましたが,導入してみて,大変気に入りましたのでこのまま使用させて頂く事にしました。(怪我の功名でした)
(少し手を加えて勝手に文字に色を付けさせて頂きました。)
投稿: straycat | 2004-09-24 11:47
facet-diversさん有り難う。
スクリプトファイル早速ダウンロードしました。でも遅すぎました,全て手作業で編集しましたが100個ぐらいでしたで?それよりも最近面白半分で絵日記で投稿していたのがまずく折り畳むのに難儀しました。先に知恵をお借りしていれば苦労しなくて済んだのに浅はかでした。
* スクリプトファイル名の中に自分の名前を付けて頂いて有り難う(感激です)。
これからも良きアドバイスお願いします。
投稿: straycat | 2004-09-24 13:35
facetさん、こんばんわ!
お久しぶりです。
最近またカスタマイズ熱が出てきて、お邪魔させていただいてます。
ちなみに、[続きを読む]を表示したくない記事、
そのままの状態で読ませたい記事の場合は
どうすればいいのでしょうか?
もし前出であればすみません…m(_ _)m
投稿: ほし | 2004-09-24 18:55
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c768523">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c768523
straycatさん、こんばんは。
手作業だったんですか。100記事も...。お疲れさまでした。カスタマイズしたスクリプトに何か不具合が見付かりましたら御連絡下さい。絵日記とか、ちょっと不安ですので(^^;
投稿: facet→straycatさん | 2004-09-24 20:18
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c770273">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c770273
ほしさん、こんばんは。おひさしぶりです(^^)
>ちなみに、[続きを読む]を表示したくない記事、そのままの状態で読ませたい記事の場合はどうすればいいのでしょうか?
う。(T_T)
...ってのは冗談としまして(^^;
残念ながら、この記事で公開中のスクリプトには、そういう機能はありません。
んが、先日、別のサイトさんで「HRタグを入れた時だけ折りたためたら・・・と思うんですが」という御意見を発見しまして、スクリプトを見直してみたところ、一行修正するだけでそれが可能だということがわかりました。
ということで、こちら↓にその「水平線があるときだけ折り畳む」バージョンがありますので、お試し下さい。
http://facet.cocolog-nifty.com/divers/foldContent00a4vanilla.js">http://facet.cocolog-nifty.com/divers/foldContent00a4vanilla.js
# "[続きを表示]" 部分のカスタマイズは、記事中にある通りですので。(上のスクリプトでは今 ">>" になっています)
投稿: facet→ほしさん | 2004-09-24 20:51
facetさん、ありがとうございます♪
で、ですが、なぜか、[続きを表示]部分のカスタマイズが
うまくいきません~(>◇<)
とりあえず試行錯誤、少ない脳みそを絞ってがんばってみます!
投稿: ほし | 2004-09-25 10:50
マイリストに書いた呼び出しスクリプトの、src="..."の部分もアップロード先に変更してくださいね。
投稿: facet→ほしさん | 2004-09-25 10:57
わーーーっっ!o(*´д`*)o
ありがとうございます~!
できましたよお!!
のた打ち回ってた自分が恥ずかしいです(笑)
投稿: ほし | 2004-09-25 11:37
うまくいったようで(^^)
ところで、水平線、タグ内のスタイルで消してますね。これ、以前やったマイリストの独自スタイルのところに、
.content hr {visibility:hidden;}
または
.content hr {display:none;}
って追加したら、HRタグ、全部消えますのでお試し下さい。
また、もし、消すやつと消さないやつを指定したいなら、前と同じパターンで、消すやつだけにclass(例えばclass="h")を付けることにして、
.content hr.h {visibility:hidden;}
とする、という方法もありますね。逆に、消さないやつだけを指定するなら、消さないやつだけ例えばclass="v"として、
.content hr {visibility:hidden;}
.content hr.v {visibility:visible;}
とする、というのもありです。これでちょっとだけ楽になるかと。
投稿: facet→ほしさん | 2004-09-25 12:17
こんにちは。(^-^)
ブログ人にて不思議な現象が!
TOPでは記事が折り畳まれず、バックナンバーでは
折り畳まれてます。(?_?)
うちのblogはTOPでも折り畳まれるのですが、
http://pippi.blogzine.jp/tokyo/
↑では折り畳まれてません。むむむ…。
投稿: ぴっくあっぷ。 | 2004-09-29 16:55
こんばんわー。
”折りたたみ”はずっとチェックさせて頂いていて、使いたい衝動がものすごいのですが、私のところは本文中にタグ入れまくりのよろしくないブログなので我慢してました^^;
でもこんな方法があったのですねぇ。試してみます^o^
>逆に、消さないやつだけを指定するなら、
>消さないやつだけ例えばclass="v"として、
>
>.content hr {visibility:hidden;}
>.content hr.v {visibility:visible;}
投稿: cova | 2004-09-29 19:54
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c792252">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c792252
ぴっくあっぷ。さん、御連絡ありがとうございました。TOPの問題は、私のミスでしたので、さっそく差し替えました。
# isExtended(h3)を二回も定義するというアホなミスをしちゃってました(T_T)
pippiさんの方にもコメントしておきました。
どうも、純正の「続きを読む」を使っているページ(つまり、トップページだけ)で問題が発生していたようです。バックナンバーでは「続きを読む」は出ないんですね。初めて知りました。
たぶんココログでも同様の問題が出ていたと思いますが、顕在化しなかったのは「3分ブログ」がなかったせいでしょう。
ぴっくあっぷ。さんの@blogzineのTOPでも、この問題は発生しています。「続きを読む」がある記事より上にある記事は折り畳まれず、より下にある記事では折り畳まれる、という感じの症状です。
ということで、差し替え結果をご確認いただければ幸いです。
----
3分ブログに関してちょっと調べてみたところ、吐き出されるHTMLの「追記」部分が全くタグで覆われておらず、剥き出しになっていました。
つまり、以前のあの問題と同じです。がーん(T_T)
今回、軽量化するため、および、以前の解法が不完全だったため、そこのロジックは全て取り払ってあります。なので、当然この問題が起こるのでした。
むむむ。
また一から考え直してみますが、ダメかも...
投稿: facet→ぴっくあっぷ。さん | 2004-09-29 20:54
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c793010">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c793010
covaさん、こんばんは。いただいたコメントだけではイメージできなかったので、もし適用されましたら、是非お知らせください。(^^)
投稿: facet→covaさん | 2004-09-29 20:56
こんにちは。(^-^)
早速の対応、ありがとうございました。
そうですか…「3分ブログ」に。(苦笑)
スクリプトの入れ替えと、3分ブログを下書きにしたところ
純正の追記入力以外は問題なく動作しております。
「3分ブログ」は逆に折り畳み対象外にしてしまった方が
よいのかな?(^-^;
投稿: ぴっくあっぷ。 | 2004-09-30 01:40
>いただいたコメントだけではイメージできなかったので、
訳わからないことを書いてました。すみません^^;
># hrタグと文章を同じタグ内に同居させてしまっている
>場合にどうなるかは自分でもよくわかっていませんので、
この説明を勘違いしていました。
hrタグいっぱい埋め込んでるのでダメかなぁと^^;
上で言われているのは↓こうゆうことですかね^^;
<div>aa<hr />bb</div>
ちなみに本文を丸ごとtableで囲んでいるので
やっぱりダメでした。丸ごとなら消せるのですが^^;
あと、class="v" の話は、線自体を消す/消さない
と言うお話だったのですね。。
こちらも良くわかっていなかったようです^^;
投稿: cova | 2004-09-30 07:13
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c793406">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c793406
ぴっくあっぷ。さん、いろいろとテストしていただいたみたいで、どうもありがとうございます。
text node問題への対応、なんとかできたような気がします。\(^^)/
まあ、text nodeを無理矢理spanに入れているのは変わらないので動作が遅くなっている感は否めませんが、前回よりは早くなったように思います。
それに、以前は e.style.display='none' or 'block' とやっていた開閉操作を、'none' or '' にしていたお蔭で、inlineレベル要素の展開時にblockレベル要素になって強制改行されてしまうという問題が防げていました。(^^)
ということで、とりあえず、foldContent00a4pippi.jsとして、pippiさんのところでお試しいただくよう、コメントしてきました。
http://pippi.blogzine.jp/tokyo/2004/09/post_19.html#c291949">http://pippi.blogzine.jp/tokyo/2004/09/post_19.html#c291949
問題ないようなら、少々重くなっていてもこれでfoldContent00aを差し替えたほうがいいかなと思っていますが、どうでしょう?
ただ、今回は、DOMのcloneNode()というのを使ったので、MacIEで文字化けするかもしれないという情報が気になるところです。...まあそれ以前にMacIEでスクリプト自体が効いているかどうかが問題か...(^^;
投稿: facet→ぴっくあっぷ。さん | 2004-09-30 11:39
>http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c794553">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c794553
covaさん、
>上で言われているのは↓こうゆうことですかね^^;
<div>aa<hr />bb</div>
そうそう、そうです。わかりにくくて、すみません。
>ちなみに本文を丸ごとtableで囲んでいるのでやっぱりダメでした。丸ごとなら消せるのですが^^;
tableですか。なるほど。そうですね。全体を囲んでしまうと使えないんですよ。
>あと、class="v" の話は、線自体を消す/消さないと言うお話だったのですね。。
はい、そうです。こちらもわかりにくかったみたいで、すみません。
もし良かったら、どういうものをイメージしていたのか、ご説明いただけますか?ナントナクは分かるのですが。今後の参考までに。作れるかもしれませんし。
投稿: facet→covaさん | 2004-09-30 11:52
facetさん、pippiです!
挨拶が遅れまして申し訳ありません><
先ほど、修正していただいたスクリプトに差し替えてみました。そしたら、トップページでもちゃんと「続きを読む」で記事が折りたたまれるようになりました!バックナンバーもカテゴリ別もちゃんとなっています。
『3分ブログ』ではバックナンバー一覧で全文表示されてしまうのが不満だったので、バックナンバーでも折りたたまれるようになって嬉しいです。
動作に関しては、私は遅いとは感じませんでした。なので、もう大大大満足です!
私は詳しいことは全くわからないのですが、こんなに迅速に対応していただいて、facetさん本当に大変だったと思います。なんとお礼を言ったらいいのか・・・
また、前々から憧れていたサイドバーの折りたたみも昨日facetさんのスクリプトで実行してみたんです。そしたらちゃんと問題なくできました!
ブログ人「初めの一歩コース」を始めたばかりの頃は、できないことだらけのような気がしてブログ運営自体が嫌になったこともありましたが、facetさんのように手助けしてくださる方のおかげで少しずつカスタマイズすることができて、だんだんブログに愛着がわいてきて嬉しい限りです。
今回は本当にありがとうございました。また何かあったらお世話になると思いますが、そのときはどうぞ宜しくお願いします。
投稿: pippi | 2004-09-30 11:56
pippiさん、コメント&トラックバック、ありがとうございました。折り畳み、ご満足いただけたようで、とても嬉しいです(^^)
今回は、お蔭様で、もうダメだと半分あきらめていた問題の解決方法が見付けられたので、こちらこそとても有り難かったです。
動作の方も、特に遅くないとのことで、ほっとしています。ただ、これは閲覧環境(PCの能力)によるので、来訪者の中には、うーん...という方がいらっしゃるかもしれませんので、その点、ご承知おき下さい。
具体的には、バックナンバーなどの記事が多いページで、かつ、3分ブログの追記部分が多いページほど、動作が重くなる傾向があります。
たとえば、私の環境(Pentium3, 448MB, Linux, Firefox)では、あまりメモリが残っていない時に「英語日和。」さんの九月のページを開くと、折り畳み前に5秒ぐらい固まってしまう(CPUの使用率が100%で、一生懸命計算している)時があります。
また、私のブログのカテゴリ「ウェブログ・ココログ関連」なんか、追記部分がないくせに20秒ぐらい固まってしまう時もあります(^^;。これを、3分ブログ対応版のfoldSidebar02a4pippi.jsでやってみると、25秒ぐらいに延びる、という感じでしょうか。
メモリに余裕があるときは、そのページでも数秒しかフリーズしなかったり、固まらない時もあったりします。
と、そんな感じです。
# もっとも、私のブログはスクリプトだらけなので、どのスクリプトが一番重いのかは定かではありませんが(^^;
投稿: facet | 2004-10-01 10:21
こんにちは。(^-^)
今夜、IE6.0でこちらのサイトが開けなくなってます。
途中までは開くのですが、最後にエラー表示がPOPしてそのまま開けなかった画面に。
ためしにFirefoxで見てみたらエラーがでないようなので、コメントを残しておきますね。(^-^;
投稿: ぴっくあっぷ | 2004-10-01 13:04
ぴっくあっぷ。さん、御連絡ありがとうございました。全然気がついてなかったので、助かりました。_(._.)_
エラー発生源は見付かったので、とりあえず外してみましたが、中身をみても該当するエラーが出る原因が分かりませんでした。
実験中のこいつ↓なんですけどね。
http://facet.cocolog-nifty.com/divers/addBackToTopLinks01a.js">http://facet.cocolog-nifty.com/divers/addBackToTopLinks01a.js
こいつには本当に泣かされ続けてます。今日、できたーと思ったんですけど、IEでダメでしたか...(T_T)
投稿: facet | 2004-10-01 14:22
facetさんこんにちは!
今日はこちらに入れなかったのであわててぴっくあっぷさんに相談してしまいました。でも今はもう入れるようになりました。ぴっくあっぷさん、度々お騒がせしてすみません。
facetさんのカテゴリ「ウェブログ・ココログ関連」は私のPCだと5秒ぐらいごにょごにょごにょ・・・と計算しているような感じで動いています。でも固まってはいないのでその間文章も読めるし私は全然不都合を感じていません。でもfacetさんのPCだと20秒もかかるのですね!びっくり。PC環境によって異なるんですねえ~。
投稿: pippi | 2004-10-01 14:29
pippiさん、こんばんは。入れなくてすみませんでした_(._.)_
>私のPCだと5秒ぐらいごにょごにょごにょ・・・と
固まらずにごにょごにょやっているのまで入れると、20秒どころか30秒はやってますよ(^^;
「8秒ルール」とかいうのもあることだし、やばいかな?と思ったりしますけど、普通のPCで5秒ぐらいなら、まあヨシとしようかな。トップページなら、うちのPCでも5秒前後で読み込めてるし。
# って、自分に甘い(笑)
投稿: facet | 2004-10-01 22:21
さっそく使わせていただきました。
Operaが手元になくて確認できてませんが、なんとなく軽くなった気がします。;)
ありがとうございました。
投稿: poohotosama | 2004-10-03 11:34
うちのOpera7.53ではOKでした(ホッ)
軽くなったかどうかは47Mじゃちょっとわからないでしょうね...実質2Mでも(笑)。誰かが恩恵を受けているでしょうからヨシと思うことにします。
ところで、しばいたろかエゲレスTBP、おもしろそうですね。私は在英経験がないので残念ながら参加できませんが、「しばいてさしあげますわ、おふらんす」(笑)なんてのがあれば、速攻で参加したいかも。
投稿: facet | 2004-10-03 14:40
facetさん、はじめまして、こんばんは。みみ毛と申します。「続きを読む」の記事を読み、私も早速チャレンジしてみました。で、見事設定完了!自フログがすっきりして見栄えも良くなりました。ありがとー( ´∀`)
投稿: みみ毛 | 2004-10-05 13:00
みみ毛さん、こんにちは(^^)
レス遅れましたが、「折り畳みで続きを読む」スクリプトの適用、ありがとうございます。
ただ、「金のなる毛~」を拝見させていただいた所、古いバージョンのスクリプト(foldContent01a.js)を適用されているようですね。
バージョン01aは、この記事に書いた通り、Opera7系で[続きを表示]のリンクがでないという不具合があります。
それが問題だと思われる場合は、新しい、この記事にある軽量化版(foldContent00a.js)の方を設置してみてください。
投稿: facet→みみ毛さん | 2004-10-06 10:13
またまたやってきました。
最近になってやはり『続きを…』を導入してみたくなったのでpippiサン経由で、軽量版を導入してみました。ただし、自分のブログ内でファイルをアップロードする方法が未だ把握し切れていませんので、とりあえずはこのままfacetサンのを使用します。だから暫くは消えないで下さいね
ぺこ <(_ _)>
投稿: 防災千太 | 2004-10-13 14:38
防災千太さん、いらっしゃいませ(^^)
できるだけ長く、消えないようにがんばりたいと思います(^^)
さて。
先程、本文の折り畳みの設置を拝見させていただいた所、折り畳めていない記事があることに気づきました。(具体的には、2004.10.11の井上和香さんの記事です)
この不具合は、自動的に改行を反映させるモード以外で入力していて、記事本文の段落がタグで覆われていない時などに起こる現象で、スクリプトがそのことを考慮していないために起こる、スクリプト自身の問題です。
ただ、この不具合は、pippiさんちで既に問題になった現象と同じで、pippiさんのご連絡のお蔭でその時に解決していましたので、先程この「軽量化版」のスクリプトをpippiさん仕様のものに差し替えさせていただきました。
これで、直接リンクを張ってくださっている方には、不具合の修正が自動的に適用されたはずです。
防災千太さんの「近所を探索」でも修正の反映を確認しましたので、もう問題なく折り畳まれていると思いますが、もしまだ何か問題があるようでしたら、ご連絡ください。
投稿: facet→防災千太さん | 2004-10-13 17:56
先日は、コメントありがとうございました。早速試してみたのですが、もう、あたまが、うつにやられているせいか、試行錯誤してみたものの、どうも上手くいきません。
右サイドバーのメモ欄に
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent00a.js">
</script>
↑こちらのスクリプトを入れて、
おり返したい場所に、前後に1行空白をあけて、<hr/>をいれればいいんですよね?
でも、こうすると、実際表示されるのは、おり返したい場所に実際に水平線が入ってしまい、肝心の「続きを読む・・・」は、記事の一番最後に表示されてしまうのです。
どうしてでしょう?何がいけないんでしょうか?色々やってみたのですが、手におえないので、コメントを残してみました。
投稿: ゆっこ | 2004-11-15 11:30
ゆっこさん、早速試していただいたのに、うまくいかなくてゴメンナサイ。
コメントを読む限り、設置方法が間違っているとは思えないので、なにか他に理由があるのだと思います。
申し訳ありませんが、もう一度同じ方法でやっていただいて、そのままの状態で該当記事のURLをお知らせいただけますか。HTMLソースを覗いてみると原因がわかるかもしれませんので_(._.)_
投稿: facet | 2004-11-15 14:16
facetさん、ご返答ありがとうございます。
トップページの一番上の記事(国は必要ですか?)でとりあえず、試してみました。
http://daybreak.cocolog-nifty.com/keserasera/
トップページで記事を表示させると、<hr/>を入れた場所に水平線、文末に「続きを読む・・・」が表示されている様ですが、
その記事の固定リンクに飛んでみると、
http://daybreak.cocolog-nifty.com/keserasera/2004/11/post_23.html
<hr/>タグを入れたところに水平線、「続きを読む・・・」はどこにも表示されていませんでした。
お手数をおかけしますが、よろしくお願いします。
投稿: ゆっこ | 2004-11-15 15:00
わかりました。
原因は、「記事の内容」欄で水平線を使っていることです。
ココログ純正の「続きを読む」が使われている記事では、折り畳みは効かないような仕様にしています。
二種類の「続きを読む」が同一記事にあると、読者に混乱を招くと思ったのでそうしたのですが、わかりづらいということであれば再検討しますので、御意見をいただければ幸いです。
ということで、両者を同居させる場合、「記事の内容」欄の方じゃなくて、「本文(続き)」欄で水平線を使うようにしてみてください。
たとえば、「本文(続き)」欄を常に「水平線+改行」で始めるようにすれば、トップページではココログ純正の「続きを読む」が現れ、バックナンバーでは「折り畳み」が効く、という風になるはずです。
ただ、これは、自分では検証したことのない、初めてのケースですので、もし上手くいかないようならば是非またご連絡いただけますでしょうか。
一応、自分の頭の中ではうまくいくと思ってプログラムしているのですが、自分がベーシックコースなので、実際の検証はできていないのです。
ということで、とてもありがたいケースですので(^^;、また御報告いただければ幸いです。できるだけサポートさせていただきますので。
なお、「本文(続き)」欄を使っていない記事の場合は、「記事の内容」欄で使う水平線が有効になります。
それから、記事別ページで「続きを読む・・・」が表示されていないのも、仕様です。
記事別ページでは折り畳む必要がないと考えて、そういう仕様にしています。
...が、記事別ページでも折り畳みたいという場合も確かにありますので(ジョークや駄洒落のオチとか^^;)、そういう場合だけは記事別ページでも折り畳めるようにしたいなあと思うことはあるのですが、それを簡単に使えるようにするにはどうしたらいいのかなー...水平線を二回使うようにすると分かりやすいかな?それとも...?...というところで思考がとまっています(^^;
なにかいいアイデアがありましたら、是非。
ただ、全ての記事別ページでも折り畳んでしまうようなバージョンにするのはそれほど難しくはないので、もし、そういうタイプがお望みでしたら、お気軽にどうぞ〜
投稿: facet | 2004-11-15 15:59
ありがとうございました。本文の続き欄に全ての文章を入れこみ、(本文には何も入れない)おり返したいところで、前後に1行ずつ空白を入れ、水平線を入れたところ、きちんと表示されました。
ただ、続きを読むのリンクをクリックし、全文表示をしたときに、おり返し場所に水平線が残ってしまうのが気になったため、属性で、backgroundと同じcolorを指定し、水平線のサイズを1にしたら、見事に水平線がなくなったかのように全文表示させることが出来ました。
できれば、過去の記事にも全部反映させたいのですが、200件以上の記事全部にこの設定を施すとなると気が遠くなりそうです・・・。暇を見て、地道にやろうと思います。
丁寧に教えていただき、ありがとうございました。
投稿: ゆっこ | 2004-11-15 17:16
いえいえ。うまくいったようで何よりです。
しかし、分からない点がでてきてしまいました。
今まで、「記事の内容」欄と「本文(続き)」両方に書くと、「記事の内容」だけがトップページに表示され、「続き」は記事別ページだけで表示されるようになると思っていたのですが...
「続き」だけに書くと、どの部分がトップページに表示されるのでしょう?
それから、全ての過去記事を修正するのは、しばらくお待ち下さい。何か手はないか、考えてみたいと思いますので。...ムリかもしれませんが(^^;
あと、水平線の消去ですが、CSSを使ってみてはいかがでしょうか。
全ての水平線を消してしまっていいのなら、一番簡単なのは、拙作「折り畳みで続きを読む」を設置したメモ欄に、
<style type="type/css">
<!--
.content hr {
display: none;
}
-->
</style>
と書き足してしまう方法です。
また、消したい水平線と消したくない水平線をわける方法もあります。
→http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c772539">http://facet.cocolog-nifty.com/divers/2004/09/post_10.html#c772539
# これは、今の方法と比べてそれほど楽になるわけではないですが。
投稿: facet | 2004-11-15 18:03
facetさん、はじめまして。
「続きを読む」を設置させていただいたのですが、うまくできないので、助けてください!!
2日ほど前に設置したときは(自分のサーバーへアップ)、投稿記事が4つほどしかなかったので、すべてが上手く表示されていたんです。(ただ、この時点でも「続きを読む」「隠す」の両方が表示されている状態で、自分で「隠す」ボタンを押さないと隠れない状態でした)
改善したい点は3つです。
1、昨日記事数を増やした後見てみると、投稿の新しいものは「続きを読む」表示があったのですが、古い記事では「続き~」が表示されず投稿記事そのまま長文が出ている状態です。
2.前述の「隠す」ボタンを押さないと隠れないこと。
つまり普通の表示に「続きを~」「隠す」の両ボタンが付いているだけの状態になってしまっていること。
3、とくに長い文章(引用あり)の11月14日の「泥棒行為じゃないかと」の記事では、「続きを読む」ボタンのみ表示されていて「隠す」のほうが見当たらない。
以上3つの問題点を解決したいのです。初心者でこういう難しいことをするというのが無謀なのかもしれませんが、長文書きですので、どうしても使いたいんです。よろしくお願いします!!
追伸。これを設置してからページを開いたときにエラーが出ます。詳細を見ると「'parent Node'はNullまたはオブジェクトではありません」とあります。関係あるのかないのかもわかりません。すみません。
余談:ブログでは「ゆっこ」と名乗っているのですが、すでに同じ名前の「ゆっこ」さんがいらっしゃったので(笑)、ローマ字表記にしました。
投稿: YUKKO | 2004-11-16 01:10
ゆっこさん、こんばんは。(偶然同名の方から同時期に...びっくりですね^^;)
えー。最初にあやまってしまいます。上手く動かなくてゴメンナサイ。原因はハッキリしているのですが、修正するのはものすごく大変なのです。
----
1〜3の原因は全て、タグの閉じ忘れや交差にあると思います。
ココログやブログ人が採用しているXHTML文法ではタグの閉じ忘れや交差が許されていないのですが、拙作「折り畳みで続きを読む」スクリプトは、このXHTML文法に則って記事が書かれていることを想定して作ってあるため、タグの閉じ忘れや交差に対して全く抵抗力がないようなのです。
先日(約一ヶ月程前でしょうか...)他の人から同様のお知らせをいただき、調査した結果、この不具合があることが判明した次第です。
その時、スクリプト側でこの問題を解決したいと思って随分考えたのですが、いい方法を見つけることができませんでした。
ということで、解決方法としては、タグの閉じ忘れや交差を一つ一つ手で直していただくしかないのですが、これは結構大変な作業なんですよね...。
ゆっこさんのブログを拝見させていただいた所、fontタグを多用されていて、しかもほとんど閉じタグがないようですし、サイドバーにも同様のfontタグがあるようですので、修正するのはとても大変かと...。
いい解決方法がなくて、本当にすみません_(._.)_
----
もし修正する気になられた場合のために、一応、HTML的に問題のある箇所を自動的に見つけてくれるサイトを紹介しておきます。
Another HTML-lint gateway
http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html">http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html
ここで、URLの所にブログのURLをコピペして、その上にある「チェック」というボタンを押してください。
チェックの結果が表れたら、重用度7以上の所を中心に御覧いただくと、「タグが重なっています」というような表示がでているので、その前後のHTMLソースを見て何処のことを指しているのかを把握しながら修正すれば、ちょっとは楽かと思います。
# なお、このチェックサイトは結構厳しくて、ブログ人やココログでは最上位コース以外では100点満点は取れないはずですので、点数自体はそれほど気にしなくていいと思います。
長くなりました_(._.)_
投稿: facet | 2004-11-16 03:11
facetさん、ありがとうございます。
HTMLタグを訂正していくしかないんですね。
教えていただいたチェッカーで試したところ「-20点」でした(あははは~苦笑)
それでも思ったよりはマシかも?
とりあえずタグはすべて閉じるようにしていく予定なのですが、よく見直したらブログ人って一番上のコースじゃないとHTMLタグいじれないんですよね。
となると入れた覚えのない<p>タグなどの訂正は出来ないわけで…。
どうやらあきらめるしかなさそうです。
「 は ~~行目の と重なり合っているようです」とでるんですが、ちゃんとでおわってからが始まっているんですが、どこがいけないんでしょうか…。
タグは、以前HPをつくろうとした際に、ちょっとかじっただけなのでよく分からないことが多くて…。
ブログ人は使いやすいんですが、タグで指定でもしない限り 字が小さくて見づらいのがネックですね。
これをなくせば かなりすっきりする上、結果としてチェッカーの採点も上がると思うんですが。
ありがとうございました。
投稿: YUKKO | 2004-11-16 13:43
fecetさん、みてください~!!
フォントタグを全部取っ払ってみました!
(色指定だけ残しました)
そしたら問題点オールクリアできましした!!
一応…とおもって チェッカーで採点したところ
「48点」まで上がりましたよ!大躍進(イエ~!(^-^)v)
(7以上のものは1つだけになりました。
これはPタグ内に引用タグが入ってるということなんですが、Pタグは自動挿入されてるみたいなので手直しが出来ません)
本当に ありがとうございました!!
投稿: YUKKO | 2004-11-16 14:49
YUKKOさん、こんにちは。確認しました!躍進ですね(^^)
FONTタグを取り去ったということなので、もう不要ですが、せっかく書きかけだったので、書いちゃいますね。
>「 は ~~行目の と重なり合っているようです」とでるんですが、ちゃんとでおわってからが始まっているんですが、どこがいけないんでしょうか…。
これは、たとえば、ちょうど私がこのコメントを書いている時にチェックした結果によると、
# 7: line 503: </p> は 502行目の <font> と重なり合っているようです。 → 解説 70
となっていたんですが、そのline 503のリンクを辿って502行目も引用してみると、もともとのHTMLソースは
# 502. <p><FONT size="-1">【補足】これほど独創的な世界で完結しているにも関わらず、すでに絶版です(;o;)<br />
# 503. でも中古店や図書館などではまだ読めますので、ぜひ!</p>
となっていました。この502行目にあるFONTタグは、503行目の最後の</p>より前で閉じないといけません。つまり、</FONT></p>としないと、重なり合っていると判断されてしまいます。
# 「重なり合っている」とは、<p><FONT></p></FONT> という風に交互になっていることを指します。HTML-lintは、ずーっと後ろにある</FONT>を502行目の<FONT>タグの終了だと思っているのかもしれません。
また、502行目の最後がbrで終わっていたり、この502〜503行目の段落がpタグで囲まれているのは、ブログの設定のデフォルトが、「改行を自動的に反映する」という入力モードになっているからです。
これは、ココログでも同様です。だから、いちいち段落ごとにpタグやbrタグを使わなくてもよくて、楽なわけですが。
従って、このpやbrは自動的に付きますから、FONTタグをつかった場合はその段落内で閉じないと「重なり合っているようです」(正確には「閉じタグがない」)という判定になってしまうわけです。
ですから、もし、FONTタグを複数の段落にまたがって適用させたい場合は、「改行を自動的に反映する」じゃない入力モードも用意されていますので、それに変更して、<p>や</p>を自分で打つようにすれば可能なんですが、結局さらに大変なだけでしょう。
...という感じですから、まあ、お分かりのように、ブログでタグ、特にFONTタグを使うのは、あまり得策ではないのです。
では、どうやってフォントのサイズや色を変えるのかというと、CSS(スタイルシート)を使う、ということになります。
CSSというと敷居が高そうですが、意外に簡単ですし、すごく楽になりますので、是非トライしてみてください。
たとえば、
>ブログ人は使いやすいんですが、タグで指定でもしない限り 字が小さくて見づらいのがネックですね。
とおっしゃっていますが、それはご自身で選んだテンプレートで、本文の段落(pタグ内)の文字を小さくするように設定されているからです。
# テンプレートとは、最上位コース以外では、CSSと同義です。
このテンプレートで決まってしまうスタイルを上書きして独自スタイルを適用する方法は、いろいろと編み出されているんですが、最も簡便なのは、スタイルを私リストのメモ欄に直接書いてしまうことでしょう。
たとえば、YUKKOさんのブログなら、....とりあえず、私リスト「うさぎ小屋」のメモ欄の冒頭にでも、以下のCSSをコピー&ペーストしてみてください。
<style type="text/css">
<--
.content p {
font-size: medium;
color: blue;
}
-->
</style>
そうすると、記事内のFONTタグでサイズ指定していない部分の全てがmediumサイズになり、色指定していない全ての段落内の文字がblueになるのが確認できると思います。
このように、CSSを使うと、記事を書く毎にFONTタグを使う必要がなくなるので、かなり楽になります。
# 本当は、左サイドバーの上の方に、CSS専用の私リストを作って配置する方が、CSSの適用が早くなっていいのですが。
確認できたら、mediumで大きすぎるならsmall、色の指定が不要ならcolor:で始まる一行を消す、という風に適宜調整してみてください。
【参考】とほほのスタイルシート入門(基礎知識)
→http://tohoho.wakusei.ne.jp/css/basic.htm">http://tohoho.wakusei.ne.jp/css/basic.htm
それから、
>(7以上のものは1つだけになりました。
> これはPタグ内に引用タグが入ってるということなんですが、Pタグは自動挿入されてるみたいなので手直しが出来ません)
ということですが、blockquoteの開始タグ直前にある空白を取り除いてみてください。pタグが付かなくなると思います。
# ブログ人では、blockquoteタグで始まる段落にはpタグを挿入しない変換規則になっています。ただし、blockquote内に空行があると、やはりpタグが変な感じに付いてしまって、結局「重なり合って」しまうので、このblockquoteタグ内の空行だけは、<br />で代用する必要があったりします。
なお、blockquoteの直前にスペースを設けたいという場合には、<blockquote style="margin-left:5em;">という風に書いてやるとOKです。
また、blockquoteタグを使う場合は毎回直前にスペースを設け、かつ、枠で囲んだり,文字の色を変えたり、背景色を変えたりしたい、という場合には、上記で書いたstyleタグの中に、
.content blockquote {
margin: 1em 1em 1em 5em;
border: dotted 1px green;
padding: 0.5em;
color: green;
background-color: white;
}
というような感じで書き足してやればOKです。お試し下さい。
----
めちゃくちゃ長くなっちゃいましたが(^^;
投稿: facet | 2004-11-16 15:47
facetさん、本当にありがとうございます!
目の前から霧が晴れたように読後感スッキリです!
CSSを使いたいと前々から思っていたのですが、
本やHPをみてもどうも難しくて。
CSSで何が出来るのかとかは分かるんですが、自分のしたいことをいざCSSで…となると、お手上げになっちゃったんです。
(HP作成時にインラインフレーム風で、サイト内を統一したデザインにしたくてやってみたんですが、あっさり挫折しました。)
ですが、facetさんのご説明、ほんとに分かりやすかったです。
もう少し落ち着いたら、ぜひトライしてみます!!
そのときはまたご報告させていただきますので、これからもよろしくご指導くださいませ。
投稿: YUKKO | 2004-11-17 11:06
不思議な出来事が起きまていました。
今日、ログインして、編集ページを開いてみたら、先日試して上手くいった、「続き」部分に全文を入れ、おりかえしたいところで水平線を入れて、保存して、それでうまくいっていたはずなのに、今日改めてみてみたら、折り返し前の部分(畳まれない部分)が、本文欄に、水平線を入れた後のおりかえいしたい部分が、本文の続きに、別れて、入力された状態で保存されていました。
「??」
私は、寝ぼけて夢でも見ていたんでしょうか?今日、先日と同じことをやってみてもうまくいきませんでした。
facetさんの当初おっしゃっていた、
「本文(続き)」欄を常に「水平線+改行」で始めるようにすれば、トップページではココログ純正の「続きを読む」が現れ、バックナンバーでは「折り畳み」が効く、という風になるはずです。
つまり、記事の内容に折りたたみ以前の文章を書き、「本文(続き)」を「水平線+改行」で始める・・・という方法をとってみましたが、バックナンバーに飛んでみても、水平線が表示されるだけで、水平線を入れた場所には、「続きを読む・・・」が表示されませんでした。
なんだか・・・うまくいかないようです・・・。
投稿: ゆっこ | 2004-11-17 12:36
HPでCSSを使うのはかなり大変ですけど、ブログはもともとCSSベースなところが多いので、割りと楽なんですよね。
# CSSとXMLを実際にお手軽に使えるようにしたところがブログの最大の功績だと私は思ってます。
CSSの意義については、やはりとほほさんのところがよくまとまっているようですので、興味が湧いてきたのでしたら、こちらもどうぞ↓
見栄えの分離とアクセサビリティ
http://tohoho.wakusei.ne.jp/html/memo/policy.htm">http://tohoho.wakusei.ne.jp/html/memo/policy.htm
投稿: facet→YUKKOさん | 2004-11-17 13:16
その現象が何処で発生しているのか分からないので、その上手くいかない状態のまま、該当記事のURLを教えていただけますか。
ざっと探してみたんですが、私のブラウザ(Firefox)では、今のままで問題なく、見た限り全てのバックナンバーでちゃんと折り畳まれているのです。
お使いのブラウザはIE6でしょうか。もし、IE6だけでその現象が起きている場合は、もしかしたら上手く解決できないかもれませんので、あらかじめ御了承ください。
ただ、今まで上手くいっていたのだから、該当の記事に問題があるかと想像しますので、それなら何とか解決できると思います。
....もしくは、先日からサイドバーのどこかを変更したとか、そういう場合も同様の現象が起こる可能性はありますので、それも併せてお知らせ下さい。
では、ご連絡、お待ちしています。
投稿: facet→ゆっこさん | 2004-11-17 13:26
facetさん、こんにちは。
折りたたみ以前の文章を本文に入れ、折りたたみたい部分は、
「本文(続き)」欄に「水平線+改行」で始めてみました。
やってみたのは下記のバックナンバーです。
http://daybreak.cocolog-nifty.com/keserasera/2004/11/post_27.html
今のところ、この記事は、トップページに表示されていますが、トップページの場合は、通常のココログプラスの機能が働いていて、本文に入れたものが表示され、続きに入れたものは、「続きを読む・・・」の表示になっています。(記事書き足してしまって、トップページじゃなくなってたら、ごめんなさい。)
ちなみにサイドバーは、あれから、もしかしたら、スクリプトのコピーがおかしいのかも・・・?などと思い、もう一回、コピペし直しました。
ブラウザは、IE6.0です。
度々お手数をおかけして申し訳ございませんが、よろしくお願いします。
投稿: ゆっこ | 2004-11-19 05:30
わかりました。(たぶん)
原因は、「バックナンバー」という言葉の使いかたが私とゆっこさんで違ったせいだと思います。
私のいう「バックナンバー」とは、サイドバーにあるリンク「バックナンバー」の先の一覧にあるページのことで、つまり、「(月別)バックナンバー」と「カテゴリー」のページのことなんです。
一方、ゆっこさんのは、それに記事別ページ(固定リンク先)も含まれるようですね。言われてみると、確かにそれもバックナンバーです。
ということで、「バックナンバー」にはいろいろ種類がありますから、ここでは「記事別ページ」と言わせていただくことにしますね。
で、その記事別ページですが、記事がひとつしかありませんから、折り畳む必要はないと判断し、スクリプトは働かないような仕様にしています。
ですから、それで正常な動作です。
もし、記事別ページでも折り畳みたいという場合は、その旨お知らせ下さい。
# 結構そのご要望が多かったりするので、対応できるようにした方がいいかなと思っていたところなのです。
また、折り畳まないのなら水平線を消してくれよ!っていう場合は、...うーん、どうしたらいいかな...ちょっと考えてみます。
ということなんですが、いかがでしょう? 的を外してたらゴメンナサイ。
投稿: facet | 2004-11-19 10:01
はじめまして!
facetさんの折りたたみ使わせていただきました。
ありがとうございます。
でも、3分ブログ楽書き日記編のの記事が一行目あたりの妙な位置で折り込まれてしまいます。
ちょうどいい位置で折り込むか、3分ブログだけ折り込まないようにしたいのですが、どうしたらいいでしょうか?
教えていただけるとありがたいです。
投稿: らぶあんここ | 2004-11-21 03:48
facetさん、こんにちは。
確かに月別のバックナンバーは全て折りたたまれていました。失礼しました。私とfacetさんの解釈の仕方が違ったようですね。
過去の記事は、あのスクリプトを入れただけで、特に水平線を入れなくても、改行をしたところで、全て折りたたまれているようです。ありがとうございました。
ただ、一つ、疑問なのが、こうさぎ投稿です。
記事を書く際には、本文と本文続きに分けて書くようにしているので、トップページ表示されている記事については、全て、プラスプランの機能で、本文と本文(続き)を分けたところで、「続きを読む・・・」となっています。
こうさぎからの投稿は、全て本文部分に書きこみされます。本来なら、こうすると、トップページでは、全文表示されるはずなのですが、ここにだけ、バックナンバー折りたたみのスクリプトの機能が効いているようで、改行や、引用があると、そこで、おりたたたまれているのです。なぜ、こうさぎの投稿だけ、その機能が働いているのかがよくわかりませんが・・・。
投稿: ゆっこ | 2004-11-21 09:14
らぶあんここさん、コメント&トラックバック、ありがとうございました。
レスは、トラックバックいただいた元記事の方に書きましたので、そちらをご参照ください。
なんとか対応してみたいと思いますので。
投稿: facet→らぶあんここさん | 2004-11-21 09:52
ゆっこさん、こんにちは(^^)
えーっと。つまり、記事別ページでは折り畳まなくてもいいという結論でしょうか。
それから、トップページでこうさぎの投稿だけが折り畳まれるとのことですが、それが仕様です。本来、このスクリプトは、本文欄に記入した記事を、改行や水平線のところで折り畳むようにするためのスクリプトです。ですから、逆に、今回のゆっこさんのような使用方法が、応用なのです。
以上、疑問解消していただけたでしょうか?
# もし、トップページでこうさぎの投稿(というか、純正の「続きを読む」を使用していない記事)を折り畳みたくないという場合は、その旨お知らせ下さい。方法はありますので。
投稿: facet→ゆっこさん | 2004-11-21 10:42
わざわざご迷惑かけて、申し訳ございません。
3分ブログは文字どおり手軽というか、画像をアップするときに、bmpファイルでも小さい容量で表示してくれて、とても便利なんです。これが、うまい具合で表示できたらとってもうれしいです。
htmlはまったくわからないんですが、参考になるかどうか。
なんとか、うまくたためるかなと思い<hr/>タグを3分ブログの記事のとこに打ち込んでみたりしたんですが、<table>で囲まれている外に(記事の一番下)に書くとそこで折り込まれるみたいなんです。(つまり3分ブログは全表示して、その下で折りたたみます)
<hr/>タグは折りたたみ最優先になってるんでしょうか。
<table>で囲まれた中に打ち込んでも、例の日記の上のほうで折りたたまれてしまいます。
これって、改良の何かヒントになるでしょうか。とりあえず、書いてみました。
本当にお手数かけて申し訳ないです。どうぞよろしくお願いします。
投稿: らぶあんここ | 2004-11-21 15:05
> <hr/>タグは折りたたみ最優先になってるんでしょうか。
そうですね。かなり優先度は高いです。なので、お試しいただいたようにtable外にhrを書けるのなら、それでとりあえず対処することはできます。
実は、その対処方法をコメントしようかとも思ったのですが、hr以降に文がないと[続きを表示]が出ても意味がないですし、毎回それを書かなければいけないとなると、使い勝手が悪くなって、せっかくの3分ブログがダイナシになってしまうと思い、やめました。(やめて正解でした^^;)
...ということで、こちらで改造した方がいいかなという考えに落ち着いた、というわけですなんですが、まだいいアイデアが浮かんでいません(^^;ので、気長にお待ちいただけると幸いです_(._.)_
投稿: facet | 2004-11-21 17:44
ありがとうございます。
気長に待っておりますので、ゆっくり作ってくださいね。
投稿: らぶあんここ | 2004-11-22 02:52
う。そういわれると、逆にプレッシャーが(笑)
投稿: facet | 2004-11-22 08:31
facetさん、こんばんは。
贅沢をいえば、バックナンバーなどの記事別ページも折りたためたらいいなー・・・などと思っております。
あと、こうさぎ投稿(純正の「続きを読む」を使用していない記事)はできれば、折りたたみたくないなー・・・などと思うので、方法があれば、教えていただきたいです。
要求多くて住みません(汗)
投稿: ゆっこ | 2004-11-22 12:44
>1. 私リストのメモ欄にある、foldContent00a.jsを呼び出している一行の直前に・・・書き足す
これって、一番最初の行に書き足せばいいんでしょうか?
やってみたんですけど、エラーが出てしまします。
ピコっていって△!マークで5と出てきてしまいます。
やり方が間違っているんでしょうか。
投稿: らぶあんここ | 2004-11-23 02:53
アドレス書くの忘れてました。
それから、修正版ははずしてあります。
投稿: らぶあんここ | 2004-11-23 02:59
ご要望は、大歓迎ですよ〜
さて。現時点でご要望に沿うためには、どちらも、スクリプト本体(foldContent00a.js)を修正する必要があります。
この修正は、ほんの2、3行だけなのですが、ちょっと説明がむずかしいこともあって、簡単に修正できるような形にしようと思い作業中でした。
で、ようやく使っていただけそうな感じになってきたので、動作確認がてら、以下の方法でお試しいただけますでしょうか。
----
今、マイリストのメモ欄にコピペしてあるコードを、以下のコードで置き換えてみてください。
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent00b.js">http://facet.cocolog-nifty.com/divers/foldContent00b.js">
</script>
<script type="text/javascript">
<!--
showSequelText = "[続きを表示]";
hideSequelsText = "[続きを隠す]";
canFoldInPermalinkPage = true;
canFoldOnlyWhenHrExists = true;
//
foldContent();
-->
</script>
以上でご希望どおりの動作になるはずですが、何か問題がありましたらご連絡下さい。
----
一応解説しておきますと、最初の
canFoldInPermalinkPage = true;
という所が、記事別ページでも折り畳むように設定するところです。trueをfalseにするか、この一行を消すと、記事別ページでは折り畳まなくなります。
次の、
canFoldOnlyWhenHrExists = true;
という所で、水平線があるときだけ折り畳むように設定しています。これをfalseにするか、この一行を消すと、(今までのように)水平線がないときには一段落目の直後で折り畳むようになります。
つまり、こうさぎの投稿には水平線が含まれていないと仮定して、折り畳まないようにする、というわけです。
なお、ここがtrueのままだと、過去記事の水平線を使っていないものは、バックナンバーで折り畳まれていないはずです。いろいろ考えたのですが、結局、水平線を使わずにバックナンバーでも折り畳む方法は思い付きませんでした。もうしわけありませんが、ご希望の動作にするには、やはり、過去記事を一つ一つ編集していただいて、水平線を追加していただくしかなさそうです。
...ということで、いかがでしょうか。うまく動作してくれるといいのですが。
投稿: facet→ゆっこさん | 2004-11-23 10:35
らぶあんここさん、動作不良の件、どうもすみません。アップするファイルを間違えてました(^^;
先ほど、ちゃんとしたものに差し替えましたので、同じ方法でお試しいただけますか。やりかたは間違ってませんので。
# アドレスは、確かにある方が便利ですけど、一度書いていただいているので特に不要です。お気遣いなく〜(^^)
投稿: facet→らぶあんここさん | 2004-11-23 10:44
ありがとうございました。
3分ブログもちゃんと表示されていますし、
他の記事も折りたたまれています。
ほんと、天才としか言いようがないです。
感謝してもしきれないほどです。
そういえば、3分ブログで折りたたみ機能(シンプル画像のみ)があったんですね。
さっき試してみました(もう戻しましたけど)。どちらも、相性よく機能するみたいです。
スクリプトはダウンロードして自サイト使ったほうがいいんですか?どっちがいいんでしょう?
投稿: らぶあんここ | 2004-11-23 14:02
らぶあんここさん、こんにちは。
うまく動作しているようでホッとしました(^^)
それから、スクリプトですが、そのまま使っていただいても、ご自分のブログに持っていっていただいても、どちらでも構いません。
そのままだと、私がスクリプトを修正すると自動的にそれが反映されるという長所がありますが、ココログが止まったら動かないという短所もある、といった具合で、それぞれ一長一短ですので。
まあ、ブログ人だと、持って帰っていただいた方が安心かもしれませんね。
あと余談ですが、今の設置位置だと、通信環境によっては折り畳まれるまでの時間差がちょっと目立つことがあるかもしれません。
それが気になる場合は、右サイドバー上部にあるリスト(たとえば「ブログメニュー」)のメモ欄をテキスト表示に設定して、そちらにスクリプトを移せばちょっとマシですので、お試し下さい。
投稿: facet | 2004-11-23 14:34
とりあえず、呼び出しスクリプトを一番上までそのまま持っていってしまいました。
確かに、前よりかなり早いですね!知らない人が見たら何も気づかないかも。それにブログメニューも線に囲まれて分かりやすくていいかも知れません。ブログメニューは、けっこういじくるのでそのままにしました。
それと、自サイトにアップして使い始めました。
これで、もはや完璧です。
それもこれも、みーんなfacetさんのおかげです。
ありがとうございます。
落ち着いたら、サイドバーも折りたたんでみようかなぁ~。
また、お世話になってしまうかも。
投稿: らぶあんここ | 2004-11-24 06:13
facetさん、こんにちは。
ありがとうございます。 教えていただいたものを試してみたところ、きちんと個別記事でも折りたたまれる様になりました。期待通りの結果に大満足しております。水平線も以前教えていただいたスタイルシートを一緒のメモ欄に入れこめば、表示されないですし、全く問題ありません。
重ね重ねありがとうございました。
今一つ試してみたところなので、他の記事も今から、やってみます。
投稿: ゆっこ | 2004-11-24 10:04
らぶあんここさん、こういうの↓も作ってますので、ご入り用でしたら、どうぞ。
http://facet.cocolog-nifty.com/divers/2004/11/javascriptmac_i.html">http://facet.cocolog-nifty.com/divers/2004/11/javascriptmac_i.html
これで、空間を全部詰める設定にすれば、さも何も無いかのようになりますので。
ただし、必要なものが他所で消えてしまっていることもありますので御注意を。
投稿: facet→らぶあんここさん | 2004-11-24 10:42
ゆっこさん、こんにちは。
うまく動作しているようですね(^^)よかった、よかった
このバージョンは、お蔭様で、みなさんからのご要望の多い機能を簡潔にまとめられたのではないかと思うので、そのうち公開しようかなと考えています。どうもありがとうございました(^^)
# 余談ですが、動作までのタイムラグが 少し目立つようですので、カウンターの後ぐらいにでも配置することをお薦めしておきます。
投稿: facet→ゆっこさん | 2004-11-24 11:04
facetさん、こんばんは。事件です!
つい先日まで、うまく作動していた記事別の「続きを読む」ですが、今日突然作動しなくなりました。折りたたむの似た商事書かんがかかるので、待ってみたのですが、それでも折りたたまれず、リロードしても変わらず・・・。ココログ側で何か変更があったのでしょうか?
念のために、以前、facetさんに教えていただいたスクリプトをコピペしなおして、保存してみたのですが、ムリでした。
一度ご確認頂ければ幸いです。
投稿: ゆっこ | 2004-11-29 17:25
こんばんは。うーん。謎ですね。
ちょっと調べてみたんですが、何もつかめませんでした。
うちで実験してみると、記事別ページでは折り畳めるようになるので(水平線の方は記事が見付からなくてまだためせてないのですが)、スクリプトがおかしくなったとか、ココログに変更があったとか、そういうことではないような気がします...
よくあるのは、どこかのタグの閉じ忘れ、なのですが、今回は特にエラーも出ていないようですし...
先日から今日までの間に、サイドバーなどに変更を加えたかどうかなど、何か参考になるような状況などをもう少し教えていただけるとありがたいです。_(._.)_
投稿: facet | 2004-11-29 18:12
facetさん、こんにちは。
お騒がせしました。原因がわかりました。
「コメント欄の設定を明示する」のコメントを読んでいて、そのコメントに対するfacetさんの回答を見て、原因がつかめました。
・・・引用
「# ココログは、左サイド→本文→右サイドの順で読み込むので、本文がまだ読み込まれていない状態ではこのスクリプトは作動しないのです。」
・・・おわり
これを読んではたと気づきました。先日、スクリプトを、左サイドバーから右サイドバーに移していました。それが原因のようです。右サイドバーに設置しなおしたら、うまく作動してくれました。
ココログの構造などが全くわかってないので、どこに設置したらいいのか全くわかっていなかったので・・・。「スクリプトは、バラバラに設置すると混乱してしまって、わかりづらいから、全部、左サイドバー上にまとめてしまえ 」などと思い、全部、そちらに移してしまったのです。
スクリプトによって、ココログは、「左サイド→右サイド→本文で読む」というのがわかり、少し勉強になりました。それぞれのスクリプトには、正しい置き場所がある、ということも。
ご迷惑をおかけしました。
投稿: ゆっこ | 2004-11-30 07:49
ありゃ。いつもそのことはチェックしているつもりなんですけど...寝ぼけてたかな(^^;
(昨日、徹夜明けだったもので)
# 引用をしていただいたコメントでも書いたように、左サイドでも動作するようにできればいいんですけど。_(._.)_
投稿: facet | 2004-11-30 10:16