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

近況報告・・・・

ポルシェ・・・・売れました    ほっ

        9万で手数料引かれて5万円入ってきました



当てにしていた原付バイク・・・・・エンジンがかかりません     えっ

        バッテリーがなくなるくらいまでセルをまわしてもダメです



自転車・・・・盗まれました     あっ

       移動手段が徒歩だけになってしまいます



なので新しいスニーカー買いました

       靴擦れができて痛くて・・・・・・・    うっ



来週・・・・・・入院・手術決まりました   

        ・・・・・・やだな~ 10日ほど更新休みます    あぁ



最近・・・・・ うつが入ってきているようです      んぅ~

     自分のブログを見ていてやる気がなくなってきます・・・・

     がんばって、大丈夫!・・・ってコメントしないでくださいね

     うつには逆効果みたいですから・・・・



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

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://ameblo.jp/アメブロID/";
var myLimit=500,e=0,k=1,i,nC="admin_comment",oC="each_comment";
var ourl = "http://ameblo.jp/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://ameblo.jp/
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行は削除してください

自分のコメントをわかりやすく

2009/3/7

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

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


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



すっぴんのチット改バージョンです


コメント欄の自分のコメントに ニックネーム  ではなくて アイコン をつけます

自分のコメントがわかりやすくなるかどうかは??ですが・・・・


自分のプロフィール画像を加工して縦16~20px位のアイコン画像を作り画像フォルダーにアップします



 ← こんなかんじで・・・

       別に画像はなんでもかまわないのですけどね





※”もっと” わかりやすく を作業中です・・・ 

  この記事のコメントをご覧下さい・・・もう少しお待ち下さい m(_ _)m



赤字部分を書き換えて濃い青字部分をフリープラグインのすっぴんバージョンに追加します

わからなければ<SCRIPT LANGUAGE="JavaScript">から</SCRIPT>までを上書きしてください

※現在のフリープラグインを保存してから作業してください

※3800字の文字数制限でだめな場合もあります


<SCRIPT LANGUAGE="JavaScript">
<!--
/* 80415exlink/vjcatkick */
function enTb() {
var myHn = "ニックネーム"
var myUrl="トップページのURL"
var myImg="<img src='画像のURL' border='0' />"
var myLimit=300,e=0,k=1,i;
var ourl = "http://ameblo.jp/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){myLink.innerHTML = myImg;}
k++;if (k > myLimit) {break;}}}
function enThickbox() {enTb();
try {initializeUpload(false, false);} catch(e) {}
try {checkpw();} catch(e) {}}
window.onload = function(){enThickbox();}
// -->
</SCRIPT>



・・・ ココのサイトの場合でしたら ・・・・

ニックネーム ・・・・ 実験委員

トップページのURL ・・・・ http://ameblo.jp/exlink/


if(myLink.href == myUrl && myLink.innerHTML == myHn){myLink.innerHTML = myHn+myImg;}

で、ニックネームとアイコンが・・・


・・・同じ事を繰り返せば常連さんのコメントにアイコンは付けられますが・・・・

ココでは文字数が足りなくなりますね・・・

外部ファイルが利用できて・・・DBとかで大げさにすれば何とかなるかもですが

私にはできません・・・・ とりあえずは自分のコメントだけで・・・・・