新・コメントをわかりやすく 二人以上で管理 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

新・コメントをわかりやすく 二人以上で管理

リクがあって二人用で作ったのですが・・

二人以上でも可能なように作り直していたら時間がかかってしまいましたm(_ _)m



今回もコメント分けだけに機能を絞りました

PCと携帯とでニックネームを使い分けたい場合・・・

1つのIDを二人で使っている場合・・・

一人の管理人と何人かの編集メンバーの場合でも可能です



ようは・・・ 管理人が二人以上って~ことで・・・

それぞれの背景を変えてコメントをわかりやすくします



もし・・管理人どうしで背景を分ける必要がなければ

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

こちらならURLが同じならニックネームはなんでも管理人と判断してくれます



見本サイトです

ここではゲストさまと管理人と二人の編集メンバーでコメント背景を分けています

(コメントの背景が4通りに分かれます)


※管理人と編集メンバーの違いは

ブログのIDとパスワードを知っている方が管理人

ブログのIDとパスワードは知らないけど別のIDで編集ができる方が編集メンバー
編集メンバーの方はコメント時にURLを入力しないと管理人と判断できません



フリープラグインに・・・

↓たとえば管理人が3人の場合です・・・


<SCRIPT LANGUAGE="JavaScript">
<!--
/* 0903b exlink */
function exAc() {
var myHn = new Array();
var mynC = new Array();
myHn[0] = "ニックネーム0";mynC[0] = "admin0";
myHn[1] = "ニックネーム1";mynC[1] = "admin1";
myHn[2] = "ニックネーム2";mynC[2] = "admin2";
var myUrl= "http://ameblo.jp/ブログのID/";
var myLimit=500,e=0,k=1,i,oC="each_comment";
var Ent = document.getElementById ("main");
var myLinks = Ent.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
for(m = 0; m < myHn.length; m++){
if(myLink.href == myUrl && myLink.innerHTML == myHn[m]){
var Com = myLink.parentNode.parentNode.parentNode;
if(Com.className == oC ){
Com.className = (Com.className).replace(oC,mynC[m]);}}}
k++;if (k > myLimit) {break;}}}
function ADcom() {exAc();
try {initializeUpload(false, false);} catch(e) {}
try {checkpw();} catch(e) {}}
window.onload = function(){ADcom();}
// -->
</SCRIPT>



上の中のこの部分を

myHn[0] = "ニックネーム0";mynC[0] = "admin0";
myHn[1] = "
ニックネーム1";mynC[1] = "admin1";
myHn[2] = "
ニックネーム2";mynC[2] = "admin2";

もし管理人が二人なら・・

myHn[0] = "ニックネーム0";mynC[0] = "admin0";
myHn[1] = "
ニックネーム1";mynC[1] = "admin1";

四人なら・・・

myHn[0] = "ニックネーム0";mynC[0] = "admin0";
myHn[1] = "
ニックネーム1";mynC[1] = "admin1";
myHn[2] = "
ニックネーム2";mynC[2] = "admin2";
myHn[3] = "ニックネーム3";mynC[3] = "admin3";

にします・・・・

ここのブログの場合でしたら・・・

わたし以外に太郎と花子が編集メンバーだった場合

myHn[0] = "実験委員";mynC[0] = "admin0";
myHn[1] = "
太郎";mynC[1] = "admin1";
myHn[2] = "
花子";mynC[2] = "admin2";
var myUrl= "http://ameblo.jp/exlink/";

こうなります


admin0  admin1  admin2 は、なんでもかまいません

前までは admin_comment なんて使っていた部分です

admin_comment1 admin_comment2 admin_comment3なんてすると長くなるので

フリープラグインの文字数節約のために短くしているだけです


前のコメント欄の素材のCSSの管理人コメントの .admin_comment 

.admin0  .admin1  .admin2 などに変更して使ってください


成りすまし防止のためURLは1つだけの絶対条件です

var myUrl= "http://ameblo.jp/ブログのID/";
管理人が何人いてもURLはそのブログのURLだけとしています

編集委員でもURLを書かないとゲストさまあつかいになります


見本サイト の素材を使った場合のCSSです




/* ゲストコメント */
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間*/
background: url(上画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:20px 30px;/*コメント分の上と左右と下の余裕*/
background: url(中画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 7px 30px 40px;
background: url(下画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:40px 0 5px 30px;
color:#333333;/*←コメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_date{/*日付*/
padding-left:10px;
}
#comment_module .comment_footer{/*フッタ上の点線を消す*/
border-top:none;
}

/* 管理人0コメント*/
#comment_module .admin0{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(上画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#00008b;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin0 .comment_body{/*コメント文章部分*/
margin: 0;
padding:20px 30px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(中画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin0 .comment_footer{ /*コメントフッター部分*/
margin:0;
padding: 7px 20px 40px;
background: url(下画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .admin0 .label{/*コメントタイトル*/
color:#333333;/*←管理人コメントタイトル文字色変更の場合*/
}

/* 管理人1コメント*/
#comment_module .admin1{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(上画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#0000ff;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin1 .comment_body{/*コメント文章部分*/
margin: 0;
padding:20px 30px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(中画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin1 .comment_footer{ /*コメントフッター部分*/
margin:0;
padding: 7px 20px 40px;
background: url(下画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .admin1 .label{/*コメントタイトル*/
color:#333333;/*←管理人コメントタイトル文字色変更の場合*/
}


/*↓管理人が二人ならこれ以下は必要ありません↓*/

/* 管理人2コメント*/
#comment_module .admin2{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(上画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#ff0000;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin2 .comment_body{/*コメント文章部分*/
margin: 0;
padding:20px 30px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(中画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin2 .comment_footer{ /*コメントフッター部分*/
margin:0;
padding: 7px 20px 40px;
background: url(下画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .admin2 .label{/*コメントタイトル*/
color:#333333;/*←管理人コメントタイトル文字色変更の場合*/
}
/*↓もし管理人が四人以上ならこの下に.admin3 などを加えてください↓*/



※コメントの文字色は変更ください・・・




アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


1人でやるのでしたら

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