LOOP

画像のループ

loop-workファイルを使用

01　画像をダウンロード

使用する写真を「PIXABAY」などからダウンロード。

ダウンロードサイズ／640px
写真の枚数／10枚
※写真のサイズは高さも同じになるように編集してください／width:100px　height:100px
windowsのペイント、photoshop、iLOVEimgなどで編集

※写真の名前はph1、ph2、ph3、ph4.、・・・ にすると簡単に入れ替えられます


02　タイトルを変更

サンプルのタイトルやh1をページにマッチした名前に変更してください。

HTML

<title>回転すし</title>
<h1>いらっしゃいませ</h1>


03　jQueryのリンク・JavaScript　を確認

</body>の上にjQuery本体と自作script.jsを入れてあります

HTML

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.pause.min.js"></script>
<script src="js/loop.js"></script>
</body>


04　画像のサイズ

メイン写真
サイズは横幅（width）640px以下にする

ループ写真
サイズは横幅（width）100px　　高さ（height）100px

HTML

<p><img src="img/cat.png" width="400" height="439" alt="メイン"></p>

<li><img src="img/ph1.jpg" width="100" height="100" alt="ループ"></li>


05　CSSでデザインを変更

bodyやheader、ｈ1、など自由に変更してください


06　フッターのテキスト

フッターのテキストも忘れずに変更

HTML

<footer>
<p>conveyor belt sushi</p>
</footer>


07　画像解像度の確認

最後にもう一度、画像解像度（image resolution）をチェックしてください

Important！

画像解像度が変更できていない場合が多いので必ず全ての写真を
iLOVEimg で「画像の圧縮（Compress IMAGE）」した写真をダウンロードしたものを使ってください