自分のコメントを ”もっと” わかりやすく | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

自分のコメントを ”もっと” わかりやすく

2009/3/7

新・自分のコメントを "もっと"わかりやすく

ThickBoxは使わないって方は短くなっていますのでコチラを使ってください


++++++++++++++++++++++++++++++++++



自分のコメントを "もっと" わかりやすく ・・・・

普通は自分(以後管理人)と他の方のコメントは分けられているのが普通だと思うのですが

アメブロではどちらも"each_comment"と同じに設定されています


ここではjavascriptを使って管理人コメントをムリヤリ"admin_comment"とクラス付けしてしまって

.admin_commentを使ってCSSで管理人と他の方のコメントに違いをつけます


アメブロ側で対策してくれればカンタンですし、

トップページで自分のコメントに「新しいコメントが1件あります」なんて出なくなると思うのですが

アメブロで対策するまではこちらを使ってください


すっぴんのコメント部分改良バージョン・・・・・すっぴん改C

・・・・・加えたことですっぴんではなくなるんですが・・・・・・細かいことはスルーして


ので、CSSが使えないスキンをお使いの方はフリープラグインに書けるくらいしか使えません

まっ、裏技もありますので相談ください・・・・



↓こんな感じで区別できます・・・・

 わかりやすくするためにヘンな色になっていますが・・・(これが私のセンスの限界だったりして・・・・)





赤字部分を自分の設定にしてからフリープラグインに貼り付けてください

すでにすっぴんバージョンを利用されている場合は上書きしてください

<link href="http://stat.ameba.jp/blog/ucs/css/common/thickbox.css " rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/editor/selectimage.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/jquery.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/thickbox.js"></script >
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 80416C exlink/vjcatkick */
function enTb() {
var myHn = "ニックネーム";
var myUrl="http://hama-sush-jp.pro/アメブロID/";
var myLimit=500,e=0,k=1,i,nC="admin_comment",oC="each_comment";
var ourl = "http://hama-sush-jp.pro/public/image/displayimage.do?imagePath=";
var nurl = "http://stat.ameba.jp";
var myLinks = document.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
if(myLink.href.indexOf("do?imagePath") > 0){
myLink.href = (myLink.href).replace(ourl,nurl);
myLink.className = "thickbox";
if(!myLink.innerHTML.match(/<img/i) && myLink.href != ""){ myLink.setAttribute("title"," ");} else {var myTitle = myLink.childNodes[0].getAttribute("alt"); myLink.setAttribute("title",myTitle);}} if(myLink.href == myUrl && myLink.innerHTML == myHn){
var Com = myLink.parentNode.parentNode.parentNode; if(Com.className == oC ){
Com.className = (Com.className).replace(oC,nC);}}
k++;if (k > myLimit) {break;}}}
function enThickbox() {enTb();
try {initializeUpload(false, false);} catch(e) {}
try {checkpw();} catch(e) {}}
window.onload = function(){enThickbox();}
// -->
</SCRIPT>



たとえばここの場合でしたら

var myHn = "実験委員"
var myUrl=http://hama-sush-jp.pro/
exlink/



オリジナルスキンCSSの編集 コメント欄 をお使いの方は

現在の画像とは別の画像を用意してCSSにコピペしてください

/* 管理人コメント吹き出し */
#comment_module .admin_comment{
margin: 0;
padding:0 0 10px 0;
background: url(上の画像のURL);
background-repeat : no-repeat;

color:#00008b;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 20px;
background: url(中の画像のURL);
background-repeat : repeat-y;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 15px 0 45px 0;
background: url(下の画像のURL);
background-repeat : no-repeat;
}



コメント部分はこうなっています

自分でCSSを変更されている場合は参考にしてください

管理人コメントの場合は赤字に変ります


<div class="admin_comment"> ←ここの each_comment が管理人の場合は admin_comment に変ります
 <p class="label">■タイトル</p>
 <p class="comment_body">コメント文</p>
  <div class="comment_footer">
   <span class="comment_author"><a href="トップページURL">ニックネーム</a></span>

   <span class="comment_date">日付・時間</span>
   <span class="comment_gotoform">&nbsp;[<a href="javascript:commentWinOpenB();">コメント記入欄を表示</a>]</span>
  </div><!--//.comment_footer-->
</div><!--//.each_comment-->


※ソースを見ても変っていませんが、このようになっているはずです・・・・



自分のコメントだけ文字色を変更する場合は


/* 管理人コメント */
#comment_module .admin_comment{

color:#00008b;/*←管理人コメント文字色変更の場合*/
}



自分で工夫してあなたらしさを出してください・・・・・


※現在コメント部分のCSS設定をされている場合はそれより後ろに加えてください



ラビリンス さまの場合は


みさっちo さまの場合は

※ファイルを外部ファイル化する場合は・・・・・



ゲストさまと管理人のコメントは分けたいけど・・・・

新しいウインドウで立ち上がってもかまわないからThickboxは、いらないって場合は


<link href="http://stat.ameba.jp/blog/ucs/css/common/thickbox.css " rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/editor/selectimage.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/jquery.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/thickbox.js"></script >


の、最初の4行は削除してください