画面左上にリボン

★　画面左上にリボン


①　準備した画像

◆　画像①


◆　画像②



●　下記サイトを利用
http://sozai.7gates.net/docs/%E3%83%AA%E3%83%9C%E3%83%B3%E9%80%8F%E9%81%8Epng/





②　ロールオーバーさせる場合（フリープラグインへ追記）

<img src="画像のＵＲＬ①" onmouseover="this.src='画像のＵＲＬ②'" onmouseout="this.src='画像のＵＲＬ①'" id="ribon01">

●　実例

<img src="http://stat001.ameba.jp/user_images/20110925/10/new-blue-777/20/f7/p/o0140013011506096557.png" onmouseover="this.src='http://stat001.ameba.jp/user_images/20110925/10/new-blue-777/c6/2a/p/o0140013011506106125.png'" onmouseout="this.src='http://stat001.ameba.jp/user_images/20110925/10/new-blue-777/20/f7/p/o0140013011506096557.png'" id="ribon01">

③　ロールオーバーさせない場合（フリースペースまたは、フリープラグインへ追記）

<img src="画像のＵＲＬ①" id="ribon01">

●　実例

<img src="http://stat001.ameba.jp/user_images/20110925/10/new-blue-777/20/f7/p/o0140013011506096557.png" id="ribon01">

④　ＣＳＳへ追記

/* ------------------------------------------------------- */
/* 画面左上のリボン　　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
#ribon01{
position:fixed;
top:0px;
left:0px;
}