SAMPLE MOTORS

TEL:00-0000-0000受付：00:00〜00:00　定休日：水曜日

製品詳細おすすめ

小さな端末環境(幅800px以下端末)では、sub,side,footermenuブロックが非表示になります。その他のページでも非表示にしたい場合、html側の<body>タグを<body class="s-n">として下さい。もしclass指定が２つ以上ある場合は半角スペースで区切って入力すればOKです。例：<body class="s-n sample">

写真の説明を入れます 写真の説明を入れます

詳細画像１の説明文をここに入れます

詳細画像１の説明文をここに入れます 詳細画像２の説明文をここに入れます 詳細画像３の説明文をここに入れます。この画像だけ他の画像より高さが高くなっています。縦横比は統一しておいた方が綺麗に移り変わります。 詳細画像４の説明文をここに入れます

見出しが必要であればここを使います
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。

(このボタンのリンクは繋がっていません。必要に応じて設定して下さい。)

<< 前のページに戻る

イメージチェンジプログラム（imgchg_pack.js）の使い方

※当プログラムは有限会社クリタス様開発のプログラムです。imgchg_pack.jsは改変せずにご利用下さい。また、当社以外のテンプレートにプログラムのみを使う場合はこちらの規約をお守り下さい。

■解説

サムネイル画像をクリックすると、上の大きな写真が入れ替わります。

html側を見れば分かりますが、大きな画像の読みこみ行は２行あります。違う点はidの指定名が異なるだけですが必ず２行入れて下さい。この２枚の画像と、サムネイルの１枚目の画像名は合わせておいて下さい。

サムネイルを増やしたい場合はhtml側のサムネイルの行をコピペで増やし、画像ファイル名やalt指定（今回の場合は大きな写真下に表示される説明文になります）を入れ替えて下さい。

サムネイルと拡大画像は兼用です。画像の縦横比率はすべて統一しておいた方がきれいに入れ替わります。
サムネイルのサイズはcssフォルダのstyle.cssの「.thumbnail」のwidthとheightの値で変更できます。
画像は、コンテンツ幅より小さい画像だと表示に問題が出るのでできるだけ大きな画像を用意しておいて下さい。
imgchg_pack.jsはhtmlの下の方に読み込んでいます。別のページで使う場合はコピーするのを忘れずに。

↑