box』を紹介します。fancyboxをレスポンシブECカートの代名詞、aishipRにて使ってみたいと思います。aishipRとは?aishipRでは、通販サイト運営の方が簡単にECサイトを立ち上げることができ、サポート体制やマニュアルもしっかりとしているので、初心者でも安心してサイト構築と運営ができるASPとなっています。fancyBoxとは?aishipR静的ページは、サイト管理>ページ作成で新規に作成することができるページです。店舗紹介ページや会社概要ページを作成できます。上記のようなページ内で画像をクリックしてオーバーレイ表示をしたい時にfancyBoxが活用できます。downloadよりダウンロードをします。概要の説明まず、fancBoxをダウンロードします。フォルダを確認し、cssやjavascriptをaishipRに入力します。オーバーレイ表示したい画像を格納します。最新のjQueryをヘッダーに読み込み、機能パーツにhtmlを静的ページ内に本体を読み込み、完了となります。1277)を使いたいと思います。小さめで表示して、拡大表示されるように設定します。・ページ名:fancyBoxtest・ページID(URL):fancybox_test・レイアウト選択:【テンプレート】汎用にしました。testフォルダ内に画像を格納します。fancyboxの中身を確認する筆者がダウンロードしたときは、v2.1.5でした。利用するのは、source>jquery.fancybox.csssource>jquery.fancybox.jsとなります。javascriptとcssをユーザーJSならびにユーザーCSSに入力するサイト管理>ユーザーCSSの『共通』の一番下に、jquery.fancybox.cssを挿入します。サイト管理>ユーザーJSの一番下に、jquery.fancybox.cssを挿入します。それぞれを保存してください。・パーツ名:【test】fancyBoy・パーツID(クラス名):t-fancyboxにしました。画像をオーバーレイ表示するために、機能パーツ内に画像のリンクを設定します。src="<#サイトURL>img/test/test.jpg"></a></li></ul>a要素に対してクラスfancyboxを適用させます。画像へのパスは、img/test/となっています。静的ページに機能パーツと本体を追加する先ほど作成した静的ページ(ページ名:fancyBoxtest)に機能パーツ(パーツ名:【test】fancyBoy)を入れます。追加したら『保存』してください。{$(".fancybox").fancybox();});})</script>追加したら、『保存』してください。jQueryの本体の挿入すでに入っていると思いますが、jQuery本体を確認します。src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>上記ソースコードがあれば成功です。ない場合は、上記ソースコードを内に読み込んでください。DEMOページ:http://dayafter-test.aispr.jp/fancybox_testいかがでしたか?とてもシンプルなjQueryプラグインで、初心者でも簡単に設置することができたと思います。*メールアドレス(公開はされません。