コメント欄のもっと見るの調整 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ コメント欄のもっと見るの調整


■ いつの間にか、【コメント欄にもっと見る✓】が表示され、クリックしないと
  後ろのコメントが見えなくなりました。


● 内容

① コメントもっと見る✓の背景色の変更
② コメントもっと見る✓の文字の変更
③ コメントもっと見る✓の✓の画像削除
④ コメントもっと見る✓の✓画像変更
⑤ コメントもっと見る✓の画像変更
⑥ 以前の状態の様にコメントもっと見る✓は表示せず、コメントをすべて表示する


● やり方。(CSSの一番下へ追加する)


① コメントもっと見る✓の背景色の変更

#commentListMoreLink{/* コメントもっと見る✓の背景色 */
background-color:#000000;/* 背景色 */
}


② コメントもっと見る✓の文字の変更

#commentListMoreLink a{/* コメントもっと見る✓の文字 */
color:#ffffff; /* 文字の色 */
font-size:12px; /* 文字の大きさ */
font-weight:bold;/* 文字の太さ bold→太文字 normal→普通 */
}

③ コメントもっと見る✓の✓の画像削除

#commentListMoreLink a{/* コメントもっと見る✓の✓の画像削除 */
background-image:none;
}

④ コメントもっと見る✓の✓画像変更(⑤との併用はできません

使用画像例
http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif


#commentListMoreLink a{/* コメントもっと見る✓の✓の画像の変更(右横) */
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif);
background-repeat:no-repeat;
background-position:right top;
padding-right:25px
}

#commentListMoreLink a{/* コメントもっと見る✓の✓の画像の変更(左横) */
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif);
background-repeat:no-repeat;
background-position:left top;
padding-left:25px
}




⑤ コメントもっと見る✓の画像変更

使用画像例
http://stat.ameba.jp/user_images/20140214/14/new-blue-777/c5/96/g/o0150002512845891257.gif



#commentListMoreLink a{/* コメントもっと見る✓の画像変更 */
background-image:url(http://stat.ameba.jp/user_images/20140214/14/new-blue-777/c5/96/g/o0150002512845891257.gif);
background-repeat:no-repeat;
width:150px;/* 画像の幅 */
height:25px;/* 画像の縦 */
display:block;
margin:auto;
text-indent:-9999px;
outline:none;
}


⑥ 以前の状態の様にコメントもっと見る✓は表示せず、コメントをすべて表示する。


.commentList li{/*  コメントもっと見る✓を以前の状態にする */
display: block !important;
}
#commentListMoreLink{/* コメントもっと見る✓を消す */
display:none;
}