ブログ画像一覧を見るを画像にする

★　ブログ画像一覧を見るを画像にする

■　2012.08.06 アメーバがHTMLを変えたので変更



　■　複数画像でのロールオーバー

　●　使用した画像(横 100px 高さ 20px)

http://stat001.ameba.jp/user_images/20120719/00/new-blue-777/59/37/g/o0100002012086823710.gif





http://stat001.ameba.jp/user_images/20120719/00/new-blue-777/86/1e/g/o0100002012086823711.gif




①　下記をＣＳＳへ追記する(黄色い部分の間違えを修正　2012 07 28)

.userLinkArea .imagelistLink a{/* ブログ画像一覧を見るの画像 */
background-image:url(http://stat001.ameba.jp/user_images/20120719/00/new-blue-777/59/37/g/o0100002012086823710.gif);
background-repeat:no-repeat;
display:block !important;
text-indent:-9999px !important;
width:100px;/* 画像の幅 */
height:20px;/* 画像の高さ */
background-position:left center;
}
.userLinkArea .imagelistLink {
width:100px !important;/* 画像の幅 */
height:20ox !important;/* 画像の高さ÷２ */
margin:auto;
}
.userLinkArea .imagelistLink a:hover{/* ブログ画像一覧を見るの画像(ロールオーバー) */
background-image:url(http://stat001.ameba.jp/user_images/20120719/00/new-blue-777/86/1e/g/o0100002012086823711.gif);
text-indent:-9999px !important;
display:block !important;
}

　■　単一画像でのロールオーバー


　●　使用した画像(横 100px 高さ 40px)


http://stat001.ameba.jp/user_images/20120719/00/new-blue-777/ba/ef/g/o0100004012086831669.gif





①　下記をＣＳＳへ追記する

.userLinkArea .imagelistLink a{/* ブログ画像一覧を見るの画像 */
background-image:url(http://stat001.ameba.jp/user_images/20120719/00/new-blue-777/ba/ef/g/o0100004012086831669.gif);
background-repeat:no-repeat;
background-position:left top;
display:block !important;
text-indent:-9999px !important;
width:100px;/* 画像の幅 */
height:20px;/* 画像の高さ */
background-position:left top;
}
.userLinkArea .imagelistLink {
text-indent:-9999px;
width:100px !important;/* 画像の幅 */
height:20ox !important;/* 画像の高さ÷２ */
margin:auto;
}
.userLinkArea .imagelistLink a:hover{/* ブログ画像一覧を見るの画像(ロールオーバー) */
background-position:left -20px !important;
text-indent:-9999px !important;
display:block !important;
}

●　②の様に、画像を連結して　background-position　にて位置を変えると
　　画像が１つなので、画像をサーバに読みに行く回数が、
　　①より減ります。
　　そうすれば、少しは、ページ表示が速くなるかも。