こちらのサイト様の記事を参考に、コメント内のレスアンカーにマウスオーバーするとその番号のコメントが表示される機能を追加しました(PC版のみ)。
ぐう速>>ライブドアブログでコメント欄にレスアンカーのポップアップ機能を実装する
まとめサイトのようにコメントがたくさんつくところでよく見るアレです。
ウチみたいな零細個人ブログには過ぎた神機能ですけど、前のネタバレ記事でコメント数が20を超えて(半分は管理人の返信ですが)ちょっと番号をたどるのが大変だったので、思い切って入れてみたのです。
コメント欄が開くのは個別記事ページなので、本来はぐう速樣の記事にあるようにそのページの HTMLテンプレートに貼るべきなのでしょうが、CSSもまとめて書けて楽なフリーエリアに入れました。
但し、ポップアップの実体要素だけは
他の場所だとポップアップの表示位置がずれてしまうようなので。
デモというか、実験のため自演コメントをしておきました。
マウスオーバーで確かめてみてね!
ぐう速>>ライブドアブログでコメント欄にレスアンカーのポップアップ機能を実装する
まとめサイトのようにコメントがたくさんつくところでよく見るアレです。
ウチみたいな零細個人ブログには過ぎた神機能ですけど、前のネタバレ記事でコメント数が20を超えて(半分は管理人の返信ですが)ちょっと番号をたどるのが大変だったので、思い切って入れてみたのです。
すべてのライブドアブログで動作するわけではありません。利用しているテンプレートによって動かない場合もあります。 いくつかのブログで試してみましたが動作したのは6~7割ほどでした。とあるように、初めはうまく動かなかったのですが、ソースをいろいろいじったら何とかなりました。
- rep() および opentext()という関数の中の
var all = document.getElementById('comments-list');
の'comments-list'を'ld_blog_article_comment_entries'に変えました。
ここは結果的に変えなくても別に良かったんですが、構造的に余分な HTML要素をスキップしているので、改良には違いない。 - 次に、
var list = all.getElementsByTagName('ul');
の 'ul' の部分を代替案の 'li' にすると妙な動作になったので、'ul' に戻しました。
ウチのテンプレではコメント群が HTML のリストではなく、リストの親要素(ul)の並列で構成されていたのです。
それがヘンなので新しいテンプレでは 'li' に変えられている、ということなのかもしれません。 - また、HTML属性に呼び出しを設定している
all.innerHTML=all.innerHTML.replace(/(※|米|>>)(\d+)/g, '<a href="javascript:void(0)" onMouseOver="opentext(\'$2\', arguments[0]);" onMouseOut="popoff();">$1$2</a>');
の二つの関数(opentext() と popoff())記述の後に、 return false; を書き加えました(古いIE対策) - 最後に、初期処理の実行部分
window.onload = rep;
は、jQuery で$(function(){ rep(); });
とする、追記の方法に変えました。 - 更に、rep() の中身をここに直接書きました。
コメント欄が開くのは個別記事ページなので、本来はぐう速樣の記事にあるようにそのページの HTMLテンプレートに貼るべきなのでしょうが、CSSもまとめて書けて楽なフリーエリアに入れました。
但し、ポップアップの実体要素だけは
<body id="takahama" class="・・・"> <div id="mypopup"></div>と、テンプレの<body>開始タグ直下に書き込みました。
他の場所だとポップアップの表示位置がずれてしまうようなので。
デモというか、実験のため自演コメントをしておきました。
マウスオーバーで確かめてみてね!
コメント
コメント一覧 (7)
恥ずかしい奴だな
デモやで
全角でもやってみる
この書き方もおk
下の安価
自レス
以上