マウスオーバーでテキストを表示
hover-workファイルを使用
01 画像をダウンロード
使用する写真を「PIXABAY」などからダウンロード。
ダウンロードサイズ／640px
写真の枚数／6～9枚
※写真のサイズは高さも同じになるようにリサイズしてください／
横／width:320px 高さ／height:○○○px
windowsのペイント、photoshop、iLOVEimgなどで編集
※写真の名前はs1、s2、s3、・・・ にすると簡単に入れ替えられます
02 タイトルを変更
サンプルのタイトルやh1をページにマッチした名前に変更してください。
HTML
<title>SUSHI</title>
<h1>My favorite sushi</h1>
03 jQueryのリンク・JavaScript を確認
</body>の上にjQuery本体と自作script.jsを入れてあります
HTML
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</body>
04 画像のサイズ
写真のサイズは横幅（width）320pxです
横サイズを変更した場合はCSS／main liのwidth:320px;も修正してください
高さは自由ですが全部の高さを同じにしてください
HTML
<img src="img/s1.jpg" alt="まぐろ：Tuna">
画像に直接サイズを指定する場合
<img src="img/s1.jpg" alt="まぐろ：Tuna" width="320" height="200">
05 CSSでデザインを変更
bodyやheader、ｈ1など自由に変更してください
06 表示テキストの入力
マウスオーバーで表示するテキストをaltキーに入れます
alt="自由にテキストを入れてください"
HTML
<li><img src="img/s1.jpg" alt="まぐろ：Tuna"></li>
サイズを指定する場合
<li><img src="img/s1.jpg" alt="まぐろ：Tuna" width="320" height="200"></li>
07 画像解像度の確認
最後にもう一度、画像解像度（image resolution）をチェックしてください
Important！
画像解像度が変更できていない場合が多いので必ず全ての写真を
iLOVEimg で「画像の圧縮（Compress IMAGE）」した写真をダウンロードしたものを使ってください