CSSの編集が出来ないスキンでCSSを使う 5
他にもスキンは満足しているのですが
これでコメント欄を可愛くしたい
で、Thickboxも使いたいし、管理人とゲストさんのコメントも背景を変えてすぐにわかるようにしたい
Thickboxが使えるんなら
ThickBoxを ”もっと” 可愛らしく・・・ も使って可愛くしたい・・・
そのためにはＣＳＳが使えないと出来ません・・・・・
だいぶハデになってしまいましたが・・・・・
まずはフリープラグインに
自分のコメントをわかりやすく を参考にjavascriptを貼り付けます
ＣＳＳ用のブログにログインしなおして ＣＳＳの編集に
/*
-----------------------------------------------------
http://hama-sush-jp.pro/csscss/
-----------------------------------------------------
*/
/*コメント欄*/
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 30px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:10px 20px 10px;/*コメント分の左右の余裕*/
background: url(画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0 !important;
padding: 15px 0 25px !important;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:35px 0 5px 40px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:40px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
.comment_gotoform{
display:none;
}
/* Thickbox背景色 */
#TB_overlay,
* html #TB_overlay{
background-image:url(画像のURL) !important;
filter:alpha(opacity=60) !important;
-moz-opacity: 0.6 !important;
opacity: 0.6 !important;
}
#TB_window {
background-image:url(画像のURL) !important; /*枠の背景画像*/
color:#ff00ff !important;/*タイトルの色*/
}
#TB_Counter{
color:#ff00ff !important;/*ページカウンターの色*/
}
!important ・・・ このスキンの場合はコレがないと言うことをきいてくれません
・・・・で、上のように出来ます
使いすぎには注意して、デザイナーさんのデザインを崩すような使い方は控えてください