【ココログ】コメント展開表示ボタンを付けるスクリプト
トップページや、アーカイブページ(バックナンバー／カテゴリー)に、コメントを展開表示するためのボタンを付けるスクリプトを作ってみました。
設置方法は、サイドバー上のメモタイプのマイリスト等、HTMLを記述できるところに
<script type="text/javascript" charset="utf-8" src="https://furyu.tea-nifty.com/script/cocoCView.js"></script>
<script type="text/javascript">
cocoCView.init();
</script>
というのを貼り付けます。
<script type="text/javascript">
cocoCView.init();
</script>
【2008/01/23追記】
もしくは、↓のフォームを使えば、ブログパーツとしてもっとお手軽に設置出来ます。
■コメント展開ボタンをココログに設置
もしくは、↓のフォームを使えば、ブログパーツとしてもっとお手軽に設置出来ます。
■コメント展開ボタンをココログに設置
設置完了すると、その記事にコメントが付いている場合には、フッタ部分の『コメント(n)』の右側に
のようなボタンが出ますので、これを押すと、その記事の下に、コメントが展開表示されます。
| ↓ |
なお、拙作の目次スクリプトを使用していて、かつ、設置用スクリプトが
その場合には、
cocoPView.loadByAjax = true ; // バックナンバー／カテゴリーの読込にAjax(XMLHttpRequest)を使用
となっていると、そのままではバックナンバー／カテゴリーが表示されたときに上記機能が有効になりません。その場合には、
cocoPView.onloadFunction = "" ; // Ajaxにてページ読込後に呼出す関数を『"関数名()"』で指定
の箇所を、
cocoPView.onloadFunction=function(){cocoCView.init();};
のように修正することで、対応可能です。
【注意】
ページ(テンプレート)のタグ構造をある程度決め打ちしてしまっているため、対応可能なココログは限定されます。
ブックマークレット：コメント展開表示ボタン付加
をご自分のアーカイブページで試してみて、コメントがついている記事なのにボタンが出て来ない場合は未対応だと思って下さい。
ページ(テンプレート)のタグ構造をある程度決め打ちしてしまっているため、対応可能なココログは限定されます。
ブックマークレット：コメント展開表示ボタン付加
をご自分のアーカイブページで試してみて、コメントがついている記事なのにボタンが出て来ない場合は未対応だと思って下さい。
ちなみに、このスクリプトは、OBOCCO さんの
■冬至のかぼちゃ: ページの目次（タイトル）を付けた（訂正有り）
いかがですか？
■冬至のかぼちゃ: ページの目次（タイトル）を付けた（訂正有り）
☆彡 コメントを見たい時、表示しているページの記事の下にを反映してみたものです。
展開表示されたらもっとうれしい。
いかがですか？
« 1年前の僕にはもう2度と会えない | トップページ | 【ココログ】お知らせを表示するスクリプト »
「ウェブログ・ココログ関連」カテゴリの記事
- 久しぶりの投稿がココログへの苦言というのもなんなのですが……(2019.03.20)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 【覚書】風柳亭（ココログプロ）をレスポンシブWebデザイン化（Bootstrap3使用)(2015.10.09)
- ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた（既知の不具合の幾つかに対応）(2015.09.01)
- 現在に生きるということ。(2013.01.05)
コメント
トラックバック
この記事へのトラックバック一覧です： 【ココログ】コメント展開表示ボタンを付けるスクリプト:
» コメント欄の「展開／しまうボタン」を取り付けたいですが、の七転八倒記。 [とんぼや「楽・書・譚」]
記事の下にある「コメント」欄に「↓」ボタンが付いて、コメント欄を開閉できるカスタマイズをＯＢＯＣＣＯさんがしてらしたので、これは便利そう～と思い、作者の風柳さんのところの記事を参考に昨日（いえもう一昨日ですね）から作業してます。 下のスプリ... [続きを読む]
風柳さん、こんばんは。
お知らせ、ありがとうございました。m(__)m
また素晴らしいスクリプトを作って頂き、
ありがとうございました。m(__)m
お陰様で、ストレス無くコメントを読める様に、なりました。
その上、私の名前まで載せていただき、恐縮しております。(^^ゞ
投稿: OBOCCO | 2007/08/14 00:50
早速設置してみたんですが、フッターのデザインがちょっと崩れちゃいました。(T_T)
# FirefoxやOperaだとボタンがSUP（上付き）みたいに。…というか、なぜにtable？
あと、以前（StarGraphだったかな）もそうでしたけど、できれば :hover {cursor:pointer;} をお願いしま～す。
# IEでは無駄なんでしたっけ
それから、ついでですが、cocoPViewの記事、コード内に //--- ってのがありますけど、コメント内 には -- は書いちゃダメとHTML-lintに怒られました。お知らせまで～
投稿: facet | 2007/08/14 19:03
facet さん、毎度どうもです(^^)。
| …というか、なぜにtable？
CSSが苦手なので、「コメント(n)」の右隣にうまくブロック要素を埋めこむ方法が思いつかなかったのです……Firefoxなんかでレイアウトが崩れちゃうのは気付いてたのですけどね(^-^;)。
ということで、下手くそなアイコンをでっち上げ、これを表示して位置調整してみました。いかがでしょう？
| :hover {cursor:pointer;} を
JavaScriptではどうやって埋めこめばいいのでしょうね、これ？
＃いや、document.styleSheets 使えばいいのでしょうけれど、特にidやclassが設定されてない要素に個別に設定できるのかなぁ、と＜擬似クラス。
まぁ、どちらにしても、IE6だと a:hover 以外は効かないようなので(IE7からはサポートしているらしい)、onmouseoverとonmouseout使ってやってみました。
| //---
あはは、ある時点で気がついて、それ以降のスクリプトでは気をつけているのですが(たまにコピペしたまま修正忘れているときもありますが)、古い記事を全部修正するのは大変だしでそのままになってました(苦笑)。
＃とりあえず、cocoPViewの記事だけは修正(^^;
投稿: 風柳＞facet さん | 2007/08/15 02:21
画像まで作ってもらっちゃうことになっちゃってスミマセン。
単純に
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: "ＭＳ ゴシック"
}
ぐらいでよかったんじゃないかという気がしたので。
# 個人的にはclassだけにしてCSSは外に出して調整はユーザに丸投げした方が、と。
tableの件については、意味、わかりました。
たしかにinlineにwidthって利かないですね。
# →で、ＭＳ ゴシック。(笑)
:hoverについては、上のように、aにダミーのhref属性でリンクにして、ってのは邪道かな。
# リンクじゃなれば、CSSで span.cccv:hover {cursor: pointer;} とかかな。
投稿: facet | 2007/08/16 01:27
あ。font-sizeはナシで。_(._.)_
投稿: facet | 2007/08/16 01:41
ありゃ、それで出来ました？……ほんとだ、出来るや(^^;。
＃いや、前にカレンダーのCSSいじっていたときかなにかに、aをブロック要素にしないと枠線指定できなかった覚えがあったので……記憶違いか？
| CSSは外に出して調整はユーザに丸投げ
丸投げ、という意味では、わかるひとは
cocoCView.htmlSwitchOpen='～';
cocoCView.htmlSwitchClose='～';
で、画像も含めてお好きにどうぞ、というのを想定してました。
＃CSSを外出しすると処理が重くなるのがちょっと……styleタグをhead要素以外に入れるのはよくないという話もあるし。
＃といいつつ、はて★スタ de 投票は外出ししてるけど(^^;
| aにダミーのhref属性でリンクにして
これをやると、リンクの枠が残ってしまうのがちょっと(前に折り畳みボタンで話題になった件ですね……あの技使えばいいのでしょうけれど)。
投稿: 風柳＞facet さん | 2007/08/16 07:45
こんばんは。ＯＢＯＣＣＯさんのところから飛んできました。
私も早速このボタンを利用させて頂きました＾＾
展開したり、また折りたたんだりで便利です！
どうもありがとうございました。
投稿: とんぼや・壱 | 2007/08/20 21:07
あ・・・。
ボタンが表示されたから、成功したと思ったのですが・・・どうやら私のブログは対応可能『外』のテンプレートだったみたいです。動かない（泣）
おさわがせしました・・・（；∇；）
でも、このボタンは素敵です。
投稿: とんぼや・壱 | 2007/08/20 21:26
とんぼや・壱 さん、どうもです。
えーと、『ホーム／ページトップに戻る』のカスタマイズをされているようですが、『コメント展開表示ボタン』のスクリプトを、これの後(addBackToTop()が記述されているところよりも後ろ)に設置してみたら、どうなりますか？
一度お試しください。
投稿: 風柳＞とんぼや・壱 さん | 2007/08/20 22:15
風柳さん、こんばんは。
コメントありがとうございます！
マイリストに追加する「コメント展開」用のラベルの順番を、「ホーム・トップページに戻る」のスクリプト用のラベルよりも、先にしてみる、ということですよね。
早速試しているところで・・・す・・・が、
ん！？
すいません、もしかして超初歩的な間違いをしていたかもしれません。
マイリスト内のラベルの順番は特に変えずに、その「超初歩的な入力間違い」を直して試してみます。
投稿: とんぼや・壱 | 2007/08/21 23:39
風柳さん、お久しぶりです。
遅ればせながら、コメント展開のスクリプトを使わせていただきました。
お正月に時間ができたので、また少しづつカスタマイズしています。
今年もよろしくお願いします。
投稿: ★節約ごはん★ | 2008/01/06 23:12