ZOOM

画像の拡大

zoom-workファイルを使用
PCのみ（レスポンシブデザイン不可）

01　画像をダウンロード

フォトアルバムに使用する写真を「PIXABAY」などからダウンロード。
名前をつけて「img」フォルダーへ入れる。

※ダウンロードサイズ／1920pxぐらい　1枚
※写真のサイズは正方形になるように編集してください
width:1000px　height:1000px ／ファイル名 zoom.jpg
windowsのペイント、photoshopなどで編集

実際はzoom.jpgを2000px～4000pxにするとキレイに表示されます



02　タイトルを変更

サンプルではタイトルやh1が「SHIBUYA」となっていますのでコンテンツに合わせた名前に変更してください。

HTML

<title>SHIBUYA</title>
<h1>SHIBUYA</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　CSSでデザインを変更

●bodyのbackground-color
●h1のcolorやsize
●headerやfooter etc...
イメージに合わせて変更しましょう


05　ZOOM画像の下は自由にコンテンツを追加

サンプルではZOOM画像の下へは写真やテキストを入れていますが、こちらは自由にコンテンツを追加してアレンジしてください。


06　画像解像度の確認

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

Important！

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