投稿者: Keiko

！！ご注意！！
こちらの記事は公開されてからだいぶ時間も経ち、古い情報になっています。
最新バージョンについての記事はこちらをご覧ください。

カラーミーショップ未経験の私。そんな私でもいいですよ、とカスタマイズのご依頼をいただけました。本当にありがたいことです。いつも以上に張り切っちゃいます。
さて、今回ご依頼いただいたお店さんはスポーツ系なんだけど、とてもファッショナブル。お洒落なイメージを出したかったのでLightboxを導入することにしました。

Lightboxってこんなの↓↓

カラーミーショップにLightbox導入。備忘録として記事にしておきます。ちなみにLightboxのバージョンは2.7.1でした。

【事前準備】

css＆jsファイルを設置するFTPサーバーが必要です。カラミーのFTPオプションに申し込むか、他にFTPサーバーを用意しておいてください。通常はプロバイダからいくらか無料スペースが提供されていると思うので、それを活用するのが良いかと。

【手順】

1. Lightboxをダウンロードし解凍する
   ダウンロードはこちらから＞＞
2. 画像ファイルをアップロードする
   【１】で解凍したファイルの「css/img」フォルダをFTPサーバーにアップロードする
3. cssを書き換える
   【１】で解凍したファイルの「css/lightbox.css」をメモ帳かなんかで開き画像パスを書き換える
   3行目： content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
   ここを先ほどアップロードした自分の画像パスに書き換える
   相対パスではなく絶対パスで記述すること3行目以外にも82、113、131、195行目も要書き換え
4. ヘッダーの書き換え
   【１】で解凍したファイルのcssフォルダとjsフォルダの中身をFTPへアップロードし以下記述をヘッダーに記載
   カラーミーでは「検索エンジン対策」→「検索エンジン対策」→「headタグ内フリースペース設定」→「PC用設定」に書き込む
   <script src=”js/jquery-1.11.0.min.js”>
   <script src=”js/lightbox.min.js”>
   <link href=”css/lightbox.css” rel=”stylesheet”>
   それぞれパスはご自身の環境に合わせて書き換えてください
5. Lightboxの呼びだし
   例<a href=”img/image-1.jpg” data-lightbox=”image-1″ data-title=”My caption”>Image #1</a>
   data-lightbox=”～” をタグに埋め込むことでLightboxの呼び出しをします
   “～”は適当でOK、ただ他にかぶらない名前にしなければいけないようなので、普通に画像名をつければ良いと思います
   もし画像にキャプションをつけたかったら　data-title=”～”　を埋め込めば画像と一緒に説明文も出ます