■ いつの間にか、【コメント欄にもっと見る✓】が表示され、クリックしないと
後ろのコメントが見えなくなりました。
● 内容
① コメントもっと見る✓の背景色の変更
② コメントもっと見る✓の文字の変更
③ コメントもっと見る✓の✓の画像削除
④ コメントもっと見る✓の✓画像変更
⑤ コメントもっと見る✓の画像変更
⑥ 以前の状態の様にコメントもっと見る✓は表示せず、コメントをすべて表示する
● やり方。(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;
}