商品画像を拡大表示する
画像のサムネイルをクリックすると、クリックした画像の拡大画像がみれるようなページを作ることができます。
このページは「フリーページ」を使用して作成しています。
▶フリーページについて
 |
 |
 |
 |
 |
作り方
【1】
レイアウトの雛形となるフリーページを1ページ作ります。
下に並んだ画像部分は表機能をつかって縦1列・横5列の表を作成し、各セルの中に画像を配置しています。
表部分について
このページでは以下のような設定をおこなっています。
- 画像はMサイズで挿入
- 「表の詳細設定」で表全体の幅を「100%」に指定
- 「セルの詳細設定」で1セルあたりの幅を「20%」に指定
画像について
挿入した画像を選択（画像の上を右から左に向かってドラッグ）し、「リンクの挿入・編集」から「リンク先URL」を削除しておきましょう。
【2】
雛形となるフリーページが完成したら公開設定を「公開」にして「保存」します。
【3】
管理メニュー＞「フリーページ」で作成したフリーページの一覧が表示されている画面を開きます。
拡大表示する画像の数だけ【1】で作ったフリーページを複製します。
今回の場合だと5回フリーページを複製します。
複製したいページの3点リーダーからフリーページを複製できます。
複製したページの編集画面でタイトルの後ろについた「～のコピー」を削除し、全てのページのタイトルを同じにすると1つのページ内で画像が切り替わっているように見えます。
【4】
複製したページの編集画面を開きます。
拡大部分の画像を削除して、次に拡大表示させる画像を挿入します。
例：拡大部分の「画像01」を削除して「画像02」の画像を挿入する
【5】
下に5つ並んだ画像も差し替えます。
例えば「画像02」を拡大表示させているページでは下の部分に「画像02」は必要ないので、「画像02」を削除して「画像01」を挿入します。
【6】
下に5つ並んだ画像をクリックすると、それぞれの画像を拡大表示させているページへ遷移するように各画像を画像リンクにします。
画像リンクにする方法
1. 対象の画像を選択（画像の上を右から左にドラッグすると選択しやすいです。）
画像に青いフィルターがかかっている状態が選択されている状態です。
2. 「リンクの挿入・編集」をクリック
3. リンク先URLに画像をクリックしたら遷移する先のページのURLを貼り付け
※例：「画像02」のリンク先には「画像02」が拡大表示されているフリーページのURLを貼り付け
【7】
複製した残りのページも同じように画像やURLを差し替えます。
雛形となるページは公開設定を「公開」で保存し、その他の複製したページは「限定公開」で保存します。
※すべて「公開」にするとナビゲーションメニュー上にすべてのページが表示されます。
