popup


当ブログで使用しているコメントのレスアンカーへのポップアップ機能を実装する方法を紹介します。

作業はコピペして追加するだけです。
ご利用は自由です。また改変もご自由にどうぞ。 ただし、javascriptを使用していますので自己責任でお願いします。

※ライブドアブログではデザインを保存する機能があり、失敗してもすぐ元に戻せますので、 変更作業をする前にデザインの保存をしておくことをお勧めします。
※コメントが100件を超えると分割して表示している場合は、このポップアップ機能が正常に動作しません。
※すべてのライブドアブログで動作するわけではありません。



変更する箇所は全部で3つです。

まずCSSを変更します。
(管理画面のデザイン設定→PC→カスタマイズからCSS)

以下のコードをCSSに追加します。
場所はどこでもいいです。ご自分でわかりやすい位置(一番下など)に追加してください。

#mypopup {
display: none;
position: absolute;
border:1px solid #bbb;
padding:5px 8px 8px;
font-size:12px;
color:#111;
background-color:#ffc;
list-style-type:none;
line-height:1.2;
text-align:left;
max-width:750px;
min-width:250px;
box-shadow: 3px 3px 3px #ccc;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
}

#mypopup li.comment-date, #mypopup li.comment-author{
display: inline;
color:#666;
}


追加したら、「保存する」ボタンをクリックして変更を保存します。



次は個別記事ページを変更します。

まず<body>~</body>内に次の一行を追加します。
<body>~</body>内なら場所はどこでもいいです。 わかりやすい位置(</body>直上など)に追加してください。

※追記
どこでもいいと書きましたが、使用しているテンプレートによってはポップアップの位置がズレてしまうことがあるようです。
その際はこの部分を<body>タグのすぐ下に移動させてください。

<div id="mypopup"></div>



最後に以下のコードを<head>~</head>内に追加します。
<head>~</head>内なら場所はどこでもいいです。 わかりやすい位置(</head>直上など)に追加してください。

<script type="text/javascript"> 
<!--
function rep(){
 var all = document.getElementById('comments-list');
 all.innerHTML=all.innerHTML.replace(/[0-9]/g, function(obj){return String.fromCharCode(obj.charCodeAt(0)-65248);});
 all.innerHTML=all.innerHTML.replace(/(※|米|&gt;&gt;)(\d+)/g,"<a href=\"javascript:void(0)\" onMouseOver=\"opentext('$2', arguments[0])\" onMouseOut=\"popoff()\">$1$2</a>");
}

function opentext(res,evt){
 var obj;
 var objPopup = document.getElementById('mypopup');

 var all = document.getElementById('comments-list');
 var list = all.getElementsByTagName('ul');
 res=res-1;
 obj=list[res];

 if (! evt) { evt = event; }
 var mx = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 var my = evt.clientY + (document.body.scrollTop  || document.documentElement.scrollTop);

 if(obj){
  objPopup.innerHTML     = obj.innerHTML;        
  objPopup.style.left    = mx + 15 + "px";
  objPopup.style.top     = my - 25 + "px";
  objPopup.style.zIndex   = 9999;
  objPopup.style.display  = 'block';
 }
}

function popoff() {
 var objPopup = document.getElementById('mypopup');
 objPopup.style.display = 'none';
}

window.onload = rep;
//-->
</script>


「保存する」ボタンをクリックして変更を保存すれば作業は終了です。



※補足
・当ブログで実際に使用しているものとは少し変更しています。
・アンカーは「※数字」「米数字」「>>数字」で機能します。(数字は全角数字でもOK)




すべてのライブドアブログで動作するわけではありません。利用しているテンプレートによって動かない場合もあります。 いくつかのブログで試してみましたが動作したのは6~7割ほどでした。

ただし、動作しないブログでもjavascriptを少し修正すれば動作する場合があります。
あくまで一例ですが、わりと新しいテンプレートを使用している場合、以下のように修正すると動く場合が多いです。 (赤字が修正部分)


<script type="text/javascript"> 
<!--
function rep(){
 var all = document.getElementById('comments');
 all.innerHTML=all.innerHTML.replace(/[0-9]/g, function(obj){return String.fromCharCode(obj.charCodeAt(0)-65248);});
 all.innerHTML=all.innerHTML.replace(/(※|米|&gt;&gt;)(\d+)/g,"<a href=\"javascript:void(0)\" onMouseOver=\"opentext('$2', arguments[0])\" onMouseOut=\"popoff()\">$1$2</a>");
}

function opentext(res,evt){
 var obj;
 var objPopup = document.getElementById('mypopup');

 var all = document.getElementById('comments');
 var list = all.getElementsByTagName('li');
 res=res-1;
 obj=list[res];

 if (! evt) { evt = event; }
 var mx = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 var my = evt.clientY + (document.body.scrollTop  || document.documentElement.scrollTop);

 if(obj){
  objPopup.innerHTML     = obj.innerHTML;
  objPopup.style.left    = mx + 15 + "px";
  objPopup.style.top     = my - 25 + "px";
  objPopup.style.zIndex   = 9999;
  objPopup.style.display  = 'block';
 }
}

function popoff() {
 var objPopup = document.getElementById('mypopup');
 objPopup.style.display = 'none';
}

window.onload = rep;
//-->
</script> 


※この場合だと文字が大きく表示される場合があるのでその際はCSSに

#mypopup .comment-body{font-size:12px;}

の一行を追加すると文字が小さくなります。

あくまで一例ですのでこれでも動作しないブログもあります。 すべてのテンプレートを把握することはできませんし、個別での対応などもしておりません。申し訳ありません。

※追記
ポップアップ機能が、たまに動作しなくなる場合あるようです(原因はおそらくライブドアの広告)。
次の2つを修正すると動作するようになります。

以下のコードを<head>~</head>内に追加する(すでにjqueryを使っている場合はなくてもよいです)。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

次に、
window.onload = rep;
の部分を以下に変更します

$(function(){
rep();
});


当ブログでも同じように変更してあります。ソースを表示して参考にしてください。