« 1年前の僕にはもう2度と会えない | トップページ | 【ココログ】お知らせを表示するスクリプト »

2007/08/13

【ココログ】コメント展開表示ボタンを付けるスクリプト

トップページや、アーカイブページ(バックナンバー/カテゴリー)に、コメントを展開表示するためのボタンを付けるスクリプトを作ってみました。
設置方法は、サイドバー上のメモタイプのマイリスト等、HTMLを記述できるところに
<script type="text/javascript" charset="utf-8" src="http://furyu.tea-nifty.com/script/cocoCView.js"></script>
<script type="text/javascript">
cocoCView.init();
</script>
というのを貼り付けます。
【2008/01/23追記】
もしくは、↓のフォームを使えば、ブログパーツとしてもっとお手軽に設置出来ます。
■コメント展開ボタンをココログに設置

作者名
提供元
パーツ名
パーツID
設置用HTML
設置完了すると、その記事にコメントが付いている場合には、フッタ部分の『コメント(n)』の右側に
のようなボタンが出ますので、これを押すと、その記事の下に、コメントが展開表示されます。
なお、拙作の目次スクリプトを使用していて、かつ、設置用スクリプトが
cocoPView.loadByAjax = true ;           //  バックナンバー/カテゴリーの読込にAjax(XMLHttpRequest)を使用
となっていると、そのままではバックナンバー/カテゴリーが表示されたときに上記機能が有効になりません。
その場合には、
cocoPView.onloadFunction = "" ;         //  Ajaxにてページ読込後に呼出す関数を『"関数名()"』で指定
の箇所を、
cocoPView.onloadFunction=function(){cocoCView.init();};
のように修正することで、対応可能です。
【注意】
ページ(テンプレート)のタグ構造をある程度決め打ちしてしまっているため、対応可能なココログは限定されます。
ブックマークレット:コメント展開表示ボタン付加
をご自分のアーカイブページで試してみて、コメントがついている記事なのにボタンが出て来ない場合は未対応だと思って下さい。
ちなみに、このスクリプトは、OBOCCO さんの
冬至のかぼちゃ: ページの目次(タイトル)を付けた(訂正有り)
☆彡 コメントを見たい時、表示しているページの記事の下に
    展開表示されたらもっとうれしい。
を反映してみたものです。
いかがですか?

« 1年前の僕にはもう2度と会えない | トップページ | 【ココログ】お知らせを表示するスクリプト »

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

コメント

風柳さん、こんばんは。
お知らせ、ありがとうございました。m(__)m

また素晴らしいスクリプトを作って頂き、
ありがとうございました。m(__)m
お陰様で、ストレス無くコメントを読める様に、なりました。

その上、私の名前まで載せていただき、恐縮しております。(^^ゞ

早速設置してみたんですが、フッターのデザインがちょっと崩れちゃいました。(T_T)
# FirefoxやOperaだとボタンがSUP(上付き)みたいに。…というか、なぜにtable?

あと、以前(StarGraphだったかな)もそうでしたけど、できれば :hover {cursor:pointer;} をお願いしま~す。
# IEでは無駄なんでしたっけ

それから、ついでですが、cocoPViewの記事、コード内に //--- ってのがありますけど、コメント内 には -- は書いちゃダメとHTML-lintに怒られました。お知らせまで~

facet さん、毎度どうもです(^^)。

| …というか、なぜにtable?
CSSが苦手なので、「コメント(n)」の右隣にうまくブロック要素を埋めこむ方法が思いつかなかったのです……Firefoxなんかでレイアウトが崩れちゃうのは気付いてたのですけどね(^-^;)。

ということで、下手くそなアイコンをでっち上げ、これを表示して位置調整してみました。いかがでしょう?

|  :hover {cursor:pointer;} を
JavaScriptではどうやって埋めこめばいいのでしょうね、これ?
#いや、document.styleSheets 使えばいいのでしょうけれど、特にidやclassが設定されてない要素に個別に設定できるのかなぁ、と<擬似クラス。

まぁ、どちらにしても、IE6だと a:hover 以外は効かないようなので(IE7からはサポートしているらしい)、onmouseoverとonmouseout使ってやってみました。

| //---
あはは、ある時点で気がついて、それ以降のスクリプトでは気をつけているのですが(たまにコピペしたまま修正忘れているときもありますが)、古い記事を全部修正するのは大変だしでそのままになってました(苦笑)。
#とりあえず、cocoPViewの記事だけは修正(^^;

画像まで作ってもらっちゃうことになっちゃってスミマセン。
単純に

var a=document.createElement('a');
a.className="cccv";
a.href="#";
a.title="コメントを見る";
a.innerHTML='↓';

.content a.cccv {
margin: 0;
border: 1px solid red;
padding: 1px;
background-color: lightyellow;
text-decoration: none;
font-size: 10px;
font-family: "MS ゴシック"
}

ぐらいでよかったんじゃないかという気がしたので。
# 個人的にはclassだけにしてCSSは外に出して調整はユーザに丸投げした方が、と。

tableの件については、意味、わかりました。
たしかにinlineにwidthって利かないですね。
# →で、MS ゴシック。(笑)

:hoverについては、上のように、aにダミーのhref属性でリンクにして、ってのは邪道かな。
# リンクじゃなれば、CSSで span.cccv:hover {cursor: pointer;} とかかな。

あ。font-sizeはナシで。_(._.)_

ありゃ、それで出来ました?……ほんとだ、出来るや(^^;。
#いや、前にカレンダーのCSSいじっていたときかなにかに、aをブロック要素にしないと枠線指定できなかった覚えがあったので……記憶違いか?

| CSSは外に出して調整はユーザに丸投げ
丸投げ、という意味では、わかるひとは
cocoCView.htmlSwitchOpen='~';
cocoCView.htmlSwitchClose='~';
で、画像も含めてお好きにどうぞ、というのを想定してました。
#CSSを外出しすると処理が重くなるのがちょっと……styleタグをhead要素以外に入れるのはよくないという話もあるし。
#といいつつ、はて★スタ de 投票は外出ししてるけど(^^;

| aにダミーのhref属性でリンクにして
これをやると、リンクの枠が残ってしまうのがちょっと(前に折り畳みボタンで話題になった件ですね……あの技使えばいいのでしょうけれど)。

こんばんは。OBOCCOさんのところから飛んできました。
私も早速このボタンを利用させて頂きました^^
展開したり、また折りたたんだりで便利です!
どうもありがとうございました。

あ・・・。
ボタンが表示されたから、成功したと思ったのですが・・・どうやら私のブログは対応可能『外』のテンプレートだったみたいです。動かない(泣)
おさわがせしました・・・(;∇;)
でも、このボタンは素敵です。

とんぼや・壱 さん、どうもです。

えーと、『ホーム/ページトップに戻る』のカスタマイズをされているようですが、『コメント展開表示ボタン』のスクリプトを、これの後(addBackToTop()が記述されているところよりも後ろ)に設置してみたら、どうなりますか?
一度お試しください。

風柳さん、こんばんは。
コメントありがとうございます!
マイリストに追加する「コメント展開」用のラベルの順番を、「ホーム・トップページに戻る」のスクリプト用のラベルよりも、先にしてみる、ということですよね。
早速試しているところで・・・す・・・が、

ん!?
すいません、もしかして超初歩的な間違いをしていたかもしれません。
マイリスト内のラベルの順番は特に変えずに、その「超初歩的な入力間違い」を直して試してみます。

風柳さん、お久しぶりです。
遅ればせながら、コメント展開のスクリプトを使わせていただきました。
お正月に時間ができたので、また少しづつカスタマイズしています。
今年もよろしくお願いします。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

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

この記事へのトラックバック一覧です: 【ココログ】コメント展開表示ボタンを付けるスクリプト:

» コメント欄の「展開/しまうボタン」を取り付けたいですが、の七転八倒記。 [とんぼや「楽・書・譚」]
記事の下にある「コメント」欄に「↓」ボタンが付いて、コメント欄を開閉できるカスタマイズをOBOCCOさんがしてらしたので、これは便利そう~と思い、作者の風柳さんのところの記事を参考に昨日(いえもう一昨日ですね)から作業してます。 下のスプリ... [続きを読む]

» コメントを見る [よいこのぶっくまーく]
コメント展開表示ボタンを付けるスクリプト [続きを読む]

« 1年前の僕にはもう2度と会えない | トップページ | 【ココログ】お知らせを表示するスクリプト »

戻るリンク追加

カレンダー

2016年12月
        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

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ