● いいね！した人をクリックすると表示されるポップアップ画面です。 下記は例。
● 内容
① ヘッダー部分とボディー部分の背景画像の設定。
・ 使用画像例
② ヘッダー部分とボディー部分のセパレータ線の設定。
③ ヘッダー部分のアイコン画像の設定。
・ 使用画像例
④ ヘッダー部分のクローズボタンの設定。
・ 使用画像例
⑤ いいね！がない場合（０件）の閉じるボタンの背景画像の設定。
・ 使用する画像例
⑥ いいね！がない場合（０件）のホディー部分の背景画像。
注意：ロールオーバーしたくない時は、同じ画像のＵＲＬを設定すればＯＫです。● やり方。
① ヘッダー部分とボディー部分の背景画像の設定。
（ＣＳＳの一番下に追加する）
/* いいね！した人 背景画像の調整(ヘッダー部分) */
#iineEntryHeader{
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/be/8a/j/o0150015012801155403.jpg);
background-repeat:repeat;
background-position:left top;
}
#iineEntryHeader:hover{/* ロールオーバー */
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/3d/11/j/o0150015012801161989.jpg);
}
/* いいね！した人 背景画像の調整(ボディー部分) */
.iineListItem{
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/be/8a/j/o0150015012801155403.jpg);
background-repeat:repeat;
background-position:left top;
}
.iineListItem:hover{/* ロールオーバー */
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/3d/11/j/o0150015012801161989.jpg);
}
② ヘッダー部分とボディー部分のセパレータ線の設定。
（ＣＳＳの一番下に追加する）
/* いいね！した人 セパレータ線（下線）の変更(ヘッダー) */
#iineEntryHeader{
border-bottom:1px solid #ffff00;/* 消したい場合は bordr-bottom:none; にする */
}
/* いいね！した人 セパレータ線（上の点線）の変更(ボディー) */
.iineListItem{
border-top:1px dotted #ff0000;/* 消したい場合は bordr-top:none; にする */
}
③ ヘッダー部分のアイコン画像の設定。
（ＣＳＳの一番下に追加する）
/* いいね！した人 ヘッダー部分のアイコン画像 */
.ico_iine_green{
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif);
background-repeat:no-repeat;
background-position:left center;
}
.ico_iine_green:hover{/* ロールオーバー */
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/035.gif);
}
④ ヘッダー部分のクローズボタンの設定。
（ＣＳＳの一番下に追加する）
/* いいね！した人 クローズボタンの調整 */
.ico_close{
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/2e/b5/g/o0050001512801174427.gif);
background-position:right top;
background-repeat:no-repeat;
cursor:pointer;
}
.iineListClose{
width:50px;/* ボタンの幅 */
top:10px; /* ボタンの位置 */
}
.ico_close:hover{/* ロールオーバー画像 */
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/52/d5/g/o0050001512801174428.gif);
}
⑤ いいね！がない場合（０件）の閉じるボタンの背景画像の設定。
（ＣＳＳの一番下に追加する）
/* いいね！した人 閉じるボタンの調整(0件時) */
#iineEntryFrame .btn_gray{
background-image:url(http://stat.ameba.jp/user_images/20140102/15/new-blue-777/b9/ab/g/o0100003012801280322.gif);
background-repeat:no-repeat;
background-position:left top;
width:100px;/* 画像の幅 */
height:30px;/* 画像の高さ */
border:none;
text-indent:-9999px;
}
#iineEntryFrame .btn_gray:hover{/* ロールオーバー画像 */
background-image:url(http://stat.ameba.jp/user_images/20140102/15/new-blue-777/d2/a0/g/o0100003012801280323.gif);
}
⑥ いいね！がない場合（０件）のボディー部の背景画像
（ＣＳＳの一番下に追加する）
/* いいね！した人 背景画像の調整(ボディー部分) (0件時) */
#iineEntryFrame #iineEntryContents{
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/be/8a/j/o0150015012801155403.jpg);
background-repeat:repeat;
background-position:left top;
}
#iineEntryFrame #iineEntryContents:hover{/* ロールオーバー */
background-image:url(http://stat.ameba.jp/user_images/20140102/12/new-blue-777/3d/11/j/o0150015012801161989.jpg);
}