Bonjour!

« 使用容量:6カ月で4.048MB(13.49%) | トップページ | 折り畳みで「続きを読む...」 プチ修正 »

2004-06-16

折り畳みで「続きを読む...」

折り畳みタイプの「続きを読む...」機能を実現するためのjavascriptです。ようやく「こんな感じならまあいいかな」と思えるレベルになってきたので、いつものように暫定公開することにしました。
 
(追記 2004-09-21:)
 
軽量化版を作ったので、そちらをまずお試し下さい_(._.)_
 
facet-divers: 折り畳みで「続きを読む」(軽量化版)

----

* 概略

この "折り畳みで「続きを読む」" javascript を設置すると、『本文』の一段落目が「導入部/概要」となり、それ以降の段落が「続き」として扱われるようになります。「続き」の部分は、ページ読み込み時に折り畳まれて非表示になります。

それと同時に、「導入部/概要」と「続き」の間が「折り畳み線」のような感じになり、「続き」が非表示になっている時にはそこに「[続きを表示]」というリンクが表示されるようになります。このリンクをクリックすることで「続き」を展開表示できるようになる、といわけです。

また、記事の最後には「[続きを隠す]」というリンクが生成されるので、続きを読み終った後に折り畳みなおすこともできます。

さらに、記事内で水平線(hrタグ)を使えば、一段落目の直後に限らず、任意の場所を「折り畳み線」として指定することもできるようになっています。

以上が基本機能ですが、その他のオプション機能も結構豊富にあります。

# 私のように、たらたらと長い記事が多い人にとっては、非常に使い勝手のあるscriptですね〜(^^;。

----

* 動作状況

このjavascriptのブラウザ別の動作状況は、以下の通りです。

- Mozilla Firefox 0.8 [Linux/Mandrake 9.2/Gnome 2.4]で作ってます。
- Internet Explorer 6 [Windows XP]では、ほぼ問題無く動作しているようです。
- Opera 7.23 [Win XP] や Opera 7.53 [Linux] では、折り畳みは動作していますが、肝心の[続きを表示]リンクがでません。 何故でしょう?(T_T) また、ボタンが変な形なのも従来通りです_(._.)_。その他にも大量のエラーがでているみたいなので、順次調整しつつバージョンアップしていきたいと思っています。
- Galeon [Linux]でも大体動いているような感じでした。
- Konqueror [Linux]は、動いていた時もあったんですが、公開時点ではまた動作しなくなってしまいました。

その他の環境での動作状況は、分かり次第追加していきたいと思います。動作確認報告、いつでも大歓迎です!

----

* 設置方法

試していませんが、Typepad系のHTML構造を持つページなら設置できそうな気がします(ポイントはh3タグとpostedクラスを持つpタグなので、MTなども調整すれば使えるようになりそうな気がします。seesaaも可能性ありますね)。時間があればMTでも試してみようかなとも思っていますが、誰か試してみて結果を教えていただければ幸いです(^^)。

また、元々の「続きを読む」機能を既に使っている記事がある場合のことも考えて作ったつもりですが、なんとなくまだ問題が沢山残っているような感じがしますので、その辺りの具合も教えていただけたらなあと思っています。

まだココログベーシックでしか試していないので、以下とりあえず、それに限定した設置方法を書きます。

>>> (2004-06-17) ブログ人でも動いたようです。
ぴっくあっぷ@blogzine: 折り畳みで「続きを読む...」スクリプト
# ぴっくあっぷ。さん、ありがとー(^^) <<<

** ココログの場合

マイリスト設置タイプです。あらかじめ『テキスト表示』に設定した『マイリスト』の『メモ欄』に、以下の「呼び出しスクリプト」をコピー&ペーストして保存してください。ただし、いつものように『右サイドバー』限定ということで。_(._.)_

+ リンクタイプの『マイリスト』を作成してください。リストの名前は、「<-- scripts -->」などなんでもOKです。作成時に『このリストをウェブログまたはプロフィールページで表示する』をクリックし、自分のウェブログに追加しておきます。

+ 『設定』画面に移り、そこにある『高度な設定』で『メモの表示』を『テキスト表示』に設定ておきます。
+ 『管理』画面に戻り、『項目を追加』します。『メモ』欄に以下の「呼び出しスクリプト」をコピー&ペーストし、『追加』をクリックして保存すれば設置完了です。
+ サイドバーが二つある場合は、『ウェブログ』の『デザインの編集』画面から『現在選択されているテンプレートセット』の『並べ方』編集画面に移動し、作成したマイリストを右サイドバーに移動させてください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent01a.js">
</script>
<script type="text/javascript">
<!--
foldContent();
//-->
</script>

以上で、「導入部/概要」(一段落目)の直後に「[続きを表示]/[続きを隠す]」リンク(&「▽/△」ボタン)が自動生成され、「続き」部分がページ読み込み時に折り畳まれて非表示になるはずです。

>>> 追記 2004-06-17 >>>

いろいろカスタマイズしたりオプション機能を追加する場合は、次の方法の方が後々便利かもしれません。

+ スクリプト本体をダウンロード。 foldContent01a.js
+ 44行目にある//foldContent();の//を取り除き、アップロード。
+ 上記の「呼び出しスクリプト」の代わりに、以下をコピペし、http://facet.cocolog-nifty.com/divers/の部分をアップロード先のURLに変更してください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent01a.js">
</script>

<<< 追記ここまで <<<

# リンクのテキスト部分が[続きを読む]じゃなくて[続きを表示]なのは、記事別ページにジャンプするのかその場で展開表示されるのかが分かりにくいかなと思ったためです(ちなみにテキスト部分はカスタマイズ可能です)。

# また、「▽/△」ボタンは、「[続きを表示]/[続きを隠す]」リンクと全く同じ機能を果たすんですが、その場で開閉できることがより分かりやすくなるかなと思い、ボタンも同時に表示するようにしました(ボタン内のマークもカスタマイズ可能です)。

----

* 水平線(hrタグ)の使い方

水平線は、一記事内で何回でも使用することができます。水平線が複数ある場合、「続きを読む」リンクをクリックすると次の水平線までが展開表示され、そこに新たに「続きを読む」リンクが表示されるような実装になっています。最後の「続き」を展開すると「続きを隠す」リンクが現れます。それをクリックすると、全ての「続き」部分が一度に折り畳まれ、「導入部/概要」だけ表示する初期状態と同じ状態に戻ります。

# この記事のように、水平線があまり多いと使いづらいかも(^^;

水平線(hrタグ)で折り畳むようにする方法は、記事を作成する際の『テキストフォーマットの初期設定』の設定状況により異なります。

** 『テキストフォーマットの初期設定』が『なし』の場合

特にすることはありません。ただし、「折り畳み線」にしたい水平線(hrタグ)は、他のタグで囲まずに記述するようにしてください。

** 『テキストフォーマットの初期設定』が『改行を反映させる』の場合

ココログではこれがデフォルトなんですが、このモードで記事を作成すると、タグの付いていない段落は全て自動的にp要素に変換されます。したがって、hrタグを書いてもHTMLソース的に見るとpタグで囲まれた形となりますので、hrタグを「折り畳み線」として使うことはできません。

この場合、後述のオプション機能にある「特定キーワードで始まる段落を対応するタグに変換する機能」をオンにしてください。こうしておくと、「----(半角マイナス4つ以上)」で始まる段落を、自動付加されるpタグを取り除いてhrタグに変換してくれるので、そこが折り畳み線として使えるようになります。

----

* カスタマイズ方法

カスタマイズできる部分は、下記の通りです。

- [続きを表示]/[続きを隠す]リンクのテキスト
- ▽/△ボタンのマーク
- ▽/△ボタンのスタイル
- onMouseOverで▽/△ボタンが迫り上がるように見せるかどうか

カスタマイズするには、「呼び出しスクリプト」のfoldContent();という一行の前に、カスタマイズのための記述(代入文)を挿入します。挿入後の「呼び出しスクリプト」は、下記のようになります。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent01a.js">
</script>
<script type="text/javascript">
<!--
showSequelText = '[続きを表示]';
hideSequelsText = '[続きを隠す]';
showSequelButtonMark = '▽';
hideSequelsButtonMark = '△';
sequelButtonStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;";
riseSequelButtonOnMouseOver = true;
//
foldContent();
//-->
</script>

挿入した各行の右辺を変更することでカスタマイズできます。

>>> スクリプト本体を自分のところにアップした場合は、直接スクリプト本体の最初の方を編集して再アップすることで反映してください。 <<<

各行の意味は、以下の通りです。

- 〜Textの2行:[続きを表示]/[続きを隠す]リンクのテキストの指定
- 〜Markの2行:▽/△ボタンのマークの指定
- sequelButtonStyleの行:▽/△ボタンのスタイルの指定
- riseSequelButtonOnMouseOverの行:onMouseOverで▽/△ボタンが迫り上がるように見せるかどうかの指定

最初の4行では、引用符内を書き換えてください。

# もしかしたら、上記のような文字列だけでなく、HTML(たとえばimgタグなど)も使えるかもしれません。

sequelButtonStyleは、上記のように、CSS記法に従って記述します。ここも引用符内を書き換えてください。

riseSequelButtonOnMouseOverの右辺は、引用符なしのtrueかfalseで指定します。trueにすると、onMouseOver時だけ▽や△ボタンが迫り上がるようになります。falseにすると、sequelButtonStyleで指定した通りのスタイルの(普通の)ボタンになります。

----

* オプション機能

今回の "折り畳みで「続きを読む」" javascriptには、オプションとしてさらに以下のような機能があります。

- 小見出し一覧機能
- 「続き」の数の表示機能
- 特定キーワードで始まる段落を対応するタグに変換する機能
- 中央の本文エリア最上部に「表示モードスイッチ」を追加する機能
- 記事タイトル(見出しh3要素)に開閉スイッチを追加する機能
- 記事のフッターの下にスペーサー(div要素)を追加する機能

# 本ブログは、このjavascript公開時点ではこれらのオプション機能を全て使っています。

これらについての詳細は、長くなるので別の記事で書くことにします。

# できるだけ早く書きたいと思っていますが、興味のある方はとりあえず以下のリンクより外部javascriptを御覧下さい(script自体に全くコメントが付けられていないので分かりにくいとは思いますが、一応できるだけ意味のとれる英語を用いて変数や関数を記述するように努力していますので、だいたいの想像は付くのではないかなあと思いますが、いかがでしょう)。ご意見ご感想をいただければ幸いです。

foldContent01a.js

----

* 背景

ココログなどのブログには、トップページでは『概要』だけを表示させ、『続きを読む...』というリンクをクリックすると記事別(『固定リンク』先)ページに移動して「続き」を読ませるようにする、いわゆる「続きを読む」機能が元々備わっています。

# この機能を、以下、元々の「続きを読む」機能などと書きます。

# ココログベーシック自体にはその機能を実現するための方法が備わっていないため、別のツールを使ったりする必要があります。

一方、ページ読み込み時に「続き」の部分を折り畳んで非表示にしておき、『続きを読む...』リンクをクリックしたとき、その場で「続き」を展開表示してくれるタイプの「続きを読む」機能を使っているブログも巷にはあります。

# こちらは、開閉タイプの「続きを読む」機能と呼ぶのが一番しっくり来るように思いますが、ずっと「サイドバー折り畳み」スクリプトを作っている関係で、以下、折り畳みタイプの「続きを読む」機能と呼ぶことにします(^^;。

この、折り畳みタイプの「続きを読む」機能を使っているブログを見かけるたびに、「これ、いいな〜」と思ってました。こちらはjavascriptで実装されていますので、最初に見かけて以来、いつか私も作りたいなあと思ってきました。

実は以前、この折り畳みタイプの「続きを読む」機能の代替にならないかな〜と思いつつ、サイドバーだけじゃなく本文エリアも見出しで折り畳めるようなスクリプトを作ったことがあるんですが、使い勝手が非常に悪く、早々に使うのをやめてしまったことがありました。

それ以来ずっと、折り畳みタイプの「続きを読む」機能を実現するjavascriptを仕上げたいなあと思っていたんですが、先日、ぴっくあっぷ。さん経由で、ココログベーシックで折り畳みタイプの「続きを読む...」を実装された方がいたことを知り、よし、再挑戦しよう!と思い立ったというわけです。
ぴっくあっぷのめも: 2004.05.26
weblog.hikoboshi.mac: ココログ無料版でも『続きを読む』が欲しい!

それから約3週間。なかなか満足のいくレベルのスクリプトにならず、また駄目かなあと思っていたんですが、ようやく「こんな感じならまあいいかな」と思えるレベルになってきたので、いつものように暫定公開し、ご意見ご感想等を募集することにしました。

« 使用容量:6カ月で4.048MB(13.49%) | トップページ | 折り畳みで「続きを読む...」 プチ修正 »

ウェブログ・ココログ関連」カテゴリの記事

コメント

さっそくブログ人の方でテストしてみました。
http://mobaio.blogzine.jp/pickup/

実は設置にうまくいかないなぁ…とあきらめかけていた
ところ、foldContent01a.jsの44行目
//foldContent();
をコメントアウトしたら動きました!ヽ(´ー`)ノ
水平タグも問題無いようです。
#ブログ人(はじめの一歩)&IE6.0にて確認

スクリプトの設置箇所は、右サイドバーの
最後尾に。

なかなかイイ感じです。(^-^)

あ、コメントアウトというのは、

  //foldContent();
    ↓
  foldContent();

という意味でした。(^-^;

http://facet.cocolog-nifty.com/divers/2004/06/post.html#c348737

ぴっくあっぷ。さん、pickup&お試し、どうもありがとうございます(^^)。

コメントアウト→コメントアウトアウト? コメントイン? それとも……??
なんか適当な言葉がないですねぇ。なんて言うんでしょうね。

=== 閑話休題 ===

ブログ人の方、見てきました。HTMLソースを見ると、「呼び出しスクリプト」の記述が変ですね。2番目のscript要素の終了タグの位置が、前に来ちゃっています。

# これがブログ人の自動修正機能かなんか(scriptタグ内にはコメントを書けないとか)だと困りますけど(^^;。

----

スクリプト本体の方をダウンロードしていただいて試していただけるのなら、現状まま、スクリプト本体の44行目のfoldContent()関数の前にあるコメント記号を外しておいて、「呼び出しスクリプト」側の方を

script type="text/javascript" src="http://mobaio.blogzine.jp/pickup/foldContent01a.js"

だけで済ますという手もあります。

その方が、スクリプト本体の最初の方にある変数群をいじることで直接カスタマイズできるようになりますし、後々楽そうですね。

記事の方法だと『マイリスト』だけで完結するんだけど、カスタマイズするとなると、今回はいろんな機能を盛り込んだせいもあって、たくさんコピペしなくてはならず、逆に結構面倒そうですもんね。

ということで、カスタマイズする場合は、スクリプト本体の方を自分のところにアップロードする方法がお勧めです。

----

あと、ブログ人の方を見ていて気づいたんですが、このスクリプトは、[続きを隠す]をクリックして折り畳む時にスクロールして記事タイトルに戻るんですが、一段落目が長くて画面の縦より長い場合、「あれ?今、何処?」って感じになりますね。うーん。

「続き」だけを隠すんじゃなくて、本文全体を隠すようにした方がすっきりするかな?

それから、たまに[続きを表示]より後に、非表示にならずに残っている段落があるので何かと思ったら、タグで囲まれていない段落でした。なるほど。『改行を反映させる』モードで記事を作成しているとそういうことはありえないですけど、『なし』モードで書いている場合はそういうこともあり得るわけですね。ふむ。

これは、そのままにした方がいいのか、タグで囲まれていない段落も隠すようにした方がいいか、悩みドコロですね〜。どうしようかな……。

# さて、このコメント、今度は書き込めるでしょうか?>ココログ
# 一応、メンテは終了しているはずの時間ですが……

# メンテ時間、延長だった(T_T)

あれ?見覚えのないスクリプトが「私リスト」の
呼び出しスクリプト後にくっついてました。(苦笑)
#気がつかない間にコピペしたのかも?(^-^;

> これは、そのままにした方がいいのか、タグで囲まれていない段落も隠すようにした方がいいか、
> 悩みドコロですね〜。どうしようかな……。

「続きを表示」の後は全部隠す方が?
でないとどこが隠れているのかわからなくなりそうで。

ブログ人の方で設置方法などEntryしておきますね。

http://facet.cocolog-nifty.com/divers/2004/06/post.html#c350994

ぴっくあっぷ。さん、

>「続きを表示」の後は全部隠す方が?
>でないとどこが隠れているのかわからなくなりそうで。

そう思います?
小見出し一覧機能も余分だったかな……

……とりあえず、デフォルトでは(text nodeも)全部隠すよう修正することにしよう。

>ブログ人の方で設置方法などEntryしておきますね。

どうもありがとうございました(^^)。

 度々失礼いたします。
 折り畳みで「続きを読む」、とりあえずプレーンな形で入れさせていただきました。が、こちらでも触れられているOperaの問題がありましたので(Opera7.11で確認)、一旦外させていただきました。カテゴリバックナンバーなど凄く見やすくなったので、何らかの対処を考えて使わせていただきたいかと思います。

 さらなる余談ですが、サイドバー折り畳みと「続きを読む」を1つのマイリストにそれぞれ項目を分けて入れてみたのですが、サイドバー折り畳みの項目を上にするとサイドバー折り畳みボタンを押すたびにメッセージ(folded/unfolded)が出ていました。「新しいものが上」に設定を変えて「続きを読む」が上の項目になるようにするとこのメッセージは出なくなりました。環境はIE6です。facetさんには既知の事項かも知れませんが、ご参考まで。

http://facet.cocolog-nifty.com/divers/2004/06/post.html#c371155

しののめさん、

>サイドバー折り畳みボタンを押すたびにメッセージ(folded/unfolded)が出ていました。

うわ! どうもすみません。_(._.)_

実は、そういうメッセージを出すところが「サイドバー折り畳み」にたくさん残ったままなのですが、そのトリガーとなる部分が「本文折り畳み」の方に一行だけ残ってしまっていました。

早速、修正ミスがあっても影響の少ない「本文折り畳み」の方を差し替えておきました。

この問題、全然気付いていませんでした(^^;。ご指摘、どうもありがとうございました。

# うーん。サイドバー折り畳みの方を直すのは勇気がいるなあ……。

# Opera、やっぱり駄目ですか。Operaぐらいはちゃんとできてから公開すべきですねぇ……

 早々の対応ありがとうございました。そういや自分も以前仕事で、デバック行を消しては付けていたなぁと思い出しました(^^;

 Operaについては、「続きを読む」は表示されなくとも、フッタの「固定リンク」をクリックして貰えれば良い訳ですから、注意書きを入れれば大丈夫じゃないかなと思っています。どっかの首相じゃないですが「運用で対処」って奴ですね(^^)
 Operaのユーザーは比率からすれば決して多数派ではありませんが、選んで使っている方ですし、今回の公開に関してはそう大きな問題にはならないかと思います。ってOpera使いの方すみません。

Operaでの不具合もそうですが、動作完了までの時間がちょっと長すぎるような気がしてきました。実は「プチ修正」公開時に行なった修正がまずく、その後再度修正してアップしたんですが、それでいっそう重くなってしまったようです。それを解消したいなと思って、少しずつ新しいバージョンを作って試しているんですが、まだ少ししか軽くならないです(T_T)。

今、うちの環境(ADSL 1Mbps, firefox, mandrake 9.2 [linux], pentium III ‎567.964MHz, MEM458MB) だと、トップページ(10記事)の読み込み完了が7〜15秒ぐらいで、全くダメダメ状態です。さらに重いページ(バックナンバーの12月(52記事)やウェブログ・ココログ関連(59記事)、「とりあえずサイドバー折り畳み2」(TB+コメントで約50)など)だと、〜30秒ぐらいかかってたりします(T_T)。

ただ、本文を表示してから折り畳まれるまでが時間がかかることがあったり、左サイドバーが表示されただけの段階で待たされてしまうことがあったりするので、どのスクリプトがネックになっているのかイマイチ断定しづらいのですが、たぶん間違いなく「続きを読む」でしょう(^^;。 # というか、スクリプト、多過ぎ。>自分

ということで、スクリプトのロジックを根本から見直さないと駄目かなあと思っているところです。オプションも減らした方がいいかも知れませんね。Operaでの不具合の原因が見つかり辛いのは、機能を詰め込み過ぎているせいもありますからね。

こんにちは。またしてもスクリプトを適用させていただきました。見た目がさらにスッキリしていい感じです。
記事の全部に目を通したわけではなくて申し訳ないのですが一部バグがあるみたいですね。私のblogでもちょっとだけ不具合が発生しました(が、適当に回避しました)。
環境によって不具合が出たり出なかったりでいろいろややこしいかと思いますが、素晴らしいスクリプトであることには変わりないです。とても満足です。どうもありがとうございました。

こんにちは。コメントありがとうございました。この内容もこちらにかきこみさせていただきます。

> 一応、44行目にfoldContent()関数があるものが正式な暫定公開バージョン01aのつもりですので

再度アップしていただいたバージョン01aのモノを取り込んでみました。干渉問題も回避されているようですね、素晴らしい!!ありがとうございます。


>> 私のblogの記事にはオリジナルのタグを適用していて、記事の最後の行に「続きを表示」リンクが表示されたり逆に記事の最初にリンクが表示されてしまいました。
> どういう状況でこういう現象が起こったか具体的に教えていただければ有難いです。_(._.)_

記事をpaddingで少し広げて背景色を付けるという単純なclassをcssで作成し、記事それぞれを<div>で囲んでいました。そのようなモノに対しては「続きを表示」リンクが記事の一番最後(背景色の下)に表示されてしまったことを確認しています。<div>で囲んでいたこと以外は普通に<p>や<a>のみの記事だったので<div>との相性が悪かったのでしょうか。。。?

またこのclassを適用した記事では記事の先頭にリンクが表示されてしまいました(<p class="sidehead">と指定しています)。この場合、リンクを表示させたいなぁと思う部分に<hr/>を記述することで問題なく動作しています。コメントに書かれていたように<hr/>指定が基本とのことなので全然OKではないでしょうか。

---
あと、サイドバーのスクロール表示(仮)にもコメントしていただいたみたいで。どうもありがとうございます。やっぱり手を加えないと個別指定出来ないのですね。なるほど。謎がとけました(w

> ブラウザに限定がありますが、 overflow-y: scroll; とするのもひとつの手かと思います。

あっ、スミマセン。今は「overflow: auto;」と指定してあるんです。記事を修正してなかったですね。申し訳ないですm(__)m
いやぁ、そういう指定ができるとは知らなかったです、ご指摘ありがとうございます。
で、サイドバー折りたたみが正常に動作しているのでスクロールしないようにコメントアウトしちゃいました。スクロールよりも折りたたみのほうがはるかに実用的ですからね。

#…「test」っていう私リストはリネームしました。激しくカッコ悪かったですね(^^;)

スイマセン、再び書き込みします。リンクさせていなかったり、内容がおかしな部分があるもので。。。

> またこのclassを適用した記事では
うまくリンクされなかったみたいです。スイマセン。:first-letterを使ったclassのことです。クラス名は.sideheadです。

それから「---」以下は私のblogにある「サイドバーのスクロール表示(仮)」に書いて頂いたコメントに対してのものです。ご迷惑おかけしましたm(__)m

http://facet.cocolog-nifty.com/divers/2004/06/post.html#c384502

笑い男さん、

>記事をpaddingで少し広げて背景色を付けるという単純なclassをcssで作成し、記事それぞれを<div>で囲んでいました。そのようなモノに対しては「続きを表示」リンクが記事の一番最後(背景色の下)に表示されてしまったことを確認しています。<div>で囲んでいたこと以外は普通に<p>や<a>のみの記事だったので<div>との相性が悪かったのでしょうか。。。?

この折り畳みスクリプトは、実際には段落でなくタグ(要素)を走査してどう処理するかを判断していまして、divでもなんでも、何かのタグで本文全体を囲んでいると、その記事は1つの要素しかないと判断するようになっています(要素内部は全く見ませんので、囲んだタグ内でどんなタグを使っていても全く関係ありません)。

[続きを表示]リンクは、hrタグがない場合は最初の要素の終了タグの直後に挿入するようなロジックになっているので、本文全体をdivで囲んでいると[続きを表示]が最後に付く結果になります。

# 実は、本文に1つの要素しかない場合には[続きを表示]を出さないようにしてあるので、[続きを隠す]のことではないかと思うのですが、考えてみれば「隠す」も出さない方がよかったですね。次の更新で反映できればと思います。_(._.)_

# 本文をdivで囲むというのは、私も喉から手がでそうになるほどやりたい手でした。どうしてココログ(typepad系)では、本文をdivで囲んでくれていないんでしょうね。

# …と、ココログのHTML構造にはいろいろと不満がありますが、仕様だからどうしようもないですね。プロコースやMTなどだとテンプレートをいじれるのでそういうところも自分好みにできますし、XHTML的に正しいページも生成できるので、それもいいなーとは思うんですが、問題のあるシステムを工夫してなんとかするのもまた楽しいものでして(^^。

>またこの(.sidehead)classを適用した記事では記事の先頭にリンクが表示されてしまいました(<p class="sidehead">と指定しています)。

この現象、確認しました。「改行を反映させる」設定の場合、本文中でpタグを使って例えば
pテスト/p
という段落をつくると、
p/ppテスト/pp/p
という風に変換されるんですね。全く知りませんでした、この仕様。

ということで、最初の段落をpタグで囲んでしまうと最初の要素がp/pという空要素になってしまうので、見た目、最初の段落の前に[続きを表示]リンクがあるようになってしまうようです。

この問題も、次回のバージョンに反映させたいと思います。情報ありがとうございました。

ということで、しばらくは最初の段落をpではなくdivで囲っていただけると有難いかなと思います。記事作成時の確認画面では文字のサイズなどが変化してしまうようですが、実際のブログ上ではたぶん大丈夫だと思いますので。宜しくお願いします。_(._.)_

# なお、このコメント欄ではHTMLタグは使えません_(._.)_。コメント書き込みフォームのあたりに注意書きを出しておいたんですが、IE6では表示されていないのかも知れませんね……。うーん。これも要改善か……。(これもココログの不満な点ですね(^^;)

はじめまして、

トラックバックを送らせて頂きましたが、この機能ずっと欲しかったです。

ちょっと、「改行を反映しない」で書いた記事で、リンクがあると強制的に改行される不具合がありましたが、とりあえず、<div>で囲むと直りました。

本当に感謝感激です。:)

http://facet.cocolog-nifty.com/divers/2004/06/post.html#c415234

poohotosamaさん、はじめまして(^^)。

そうなんですよね……。「改行を反映しない」で書いていて、かつ段落をタグで囲んでいないときにそういう不具合が出てしまいます。divで囲むといったお手間を取らせなくていいようにしたかったんですが、まだいい解決法が浮かばないでいます。どうもすみません。

しかも、今回のスクリプトはOperaで「続きを表示」がでないという大問題も残っていますので、とりあえず様子を見つつ運用していただければ幸いです。

今晩は

本文折り畳バー何の問題もありません快適です

今回は色々と助けて頂いて有り難う御座いました。
 此からも色々と参考にさせて頂きますので
  宜しくお願いします。

どういたしまして。こちらこそ宜しくお願いします。(^^)

がんばってください!

がんばってください!

この記事へのコメントは終了しました。

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/778463

この記事へのトラックバック一覧です: 折り畳みで「続きを読む...」:

» 折り畳みで「続きを読む...」スクリプト [ぴっくあっぷ@blogzine]
facet-diversのfacetさんが新しいスクリプトを公開されました。 コ [続きを読む]

» 折り畳みで「続きを読む...」 プチ修正 [facet-divers]
「続き」の部分に折り畳まれずに残ってしまうところがあるという現象を修正し、スクリプト本体差し替えました。 facet-divers: 折り畳みで「続きを読む.. [続きを読む]

» The Pub [Poohotosama's Joke Diary]
なんと、ココログ・ベーシックで"続きを表示"ができるようになりました。 Thanks a million!!!!! > facet-diver様々 ちょっと、本文をいじらないとうまく行かないところもあ [続きを読む]

» facet-divers: 折り畳みで「続きを読む...」 [此処録ANNEX:ココログTIPS]
facet-divers: 折り畳みで「続きを読む...」 [続きを読む]

» ブログのカスタマイズその2 [One For All the blog]
「記事を折りたたんでみようの巻」  長い記事を載せると、過去の文章が下がって読み [続きを読む]

» 「続きを読む」スクリプト [an choco blog]
欲しかった「続きを読む」機能です。 折りたたみスクリプトを配布されているface [続きを読む]

» 「続きを読む」スクリプト [an choco blog]
欲しかった「続きを読む」機能です。 折りたたみスクリプトを配布されているface [続きを読む]

» 記事の「展開/折り畳み」をやってみた [KUMI's Web Journal]
記事の展開と折り畳み機能があるBlogを見てて、超羨ましかった私。facet-diversさんとぴっくあっぷ@blogzineさんのところを参考にして、Java... [続きを読む]

» 本文折り畳みテスト [Sketch Blog]
OCNが公開している 3分 ブログ 絵日記   タイトルのみ表示にする場合   最初の行に空白,<br>どちらの方法   でも思う様に反映されなく,... [続きを読む]

» 折り畳みで「続きを読む」(軽量化版) [facet-divers]
以前公開した「折り畳みで「続きを読む...」」javascriptですが、Opera7系で [続きを表示] が表示されない不具合があったこともあり、オプション機 [続きを読む]

« 使用容量:6カ月で4.048MB(13.49%) | トップページ | 折り畳みで「続きを読む...」 プチ修正 »

contact

検索

無料ブログはココログ
2017年7月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

BANNERS