Lightbox2をカラーミーショップに設置する

※常時SSL化対応されている方は外部サーバーもSSL化しておかないと動作しません。ご注意ください。(2017.02.09加筆)

カラーミーショップでjQueryが使えなくなった -常時SSL化編

 

以前同じような記事を公開したのですが、古いバージョンでの手順なので、現時点(2016.7.6現在)で最新バージョンの設置手順を公開してみます。

まずLightboxとは?という方はこちらの公式サイトの「Examples」を参照してください

ざっくりと手順の流れを説明すると、以下ステップになります。

  1. Lightboxのダウンロード
  2. Lightboxの設置
  3. ソースコードの編集
  4. Lightboxの呼び出し

それでは、詳しく説明していきましょう。

【事前準備】

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

【手順】

1. Lightboxをダウンロードする
こちらの公式サイトの「Download」からダウンロードしてください。ダウンロードしたzipファイルを開き解凍すると「lightbox2-master」というフォルダが現れます。
2. Lightboxを設置する
解凍したフォルダの「dist」フォルダ内の「css」「js」「images」という3つのフォルダをFTPサーバーにアップする。
1
3. ソースコードの編集
カラーミーショップ管理画面から「集客」→「検索エンジン対策」→「headタグ内フリースペース設定」→「PCショップ用設定」、もしくは「スマートフォンショップ用の設定」に以下ソースをコピペし「更新」ボタンを押す。
※●●●の部分はご自身のFTPサーバーのパスに書き換えてください。

2

もう一度カラーミーショップ管理画面に戻り「ショップ作成」→「デザイン」→「利用中のテンプレート」→「デザイン編集」でテンプレートの編集画面へ。「共通」→「htmlcss編集」で出てきた編集画面の「HTML編集」内の一番最後の行に以下ソースをコピペ。
※●●●の部分はご自身のFTPサーバーのパスに書き換えてください。

3

4. Lightboxの呼び出し
Lightboxを呼び出したい箇所の<a>タグに data-lightbox=”△△△” と data-title=”XXX” を追加。△△△は画像ファイル名と同じ名前、XXXはキャプション(画像のタイトルなど)を入れてあげてください。

以上で完了です。リンクをクリックして表示される画像にLightboxが適用されているか確認してみましょう。

おわかりかもしれませんが、今回実際使用しているファイルは「lightbox.css」「lightbox.js」「imagesフォルダ内の画像たち」だけです。それ以外のファイルはアップロードしなくても構いません。極力手順をやさしく説明したかったので、フォルダ毎アップするよう説明しています。
また、パスの概念が理解できるのでしたらファイルの保存場所も自由に移動してもらって構いません。その場合lightbox.css内のソースを書き換える必要がありますのでご注意ください。

jQueryのライブラリ本体ですが、カラーミーショップではデフォルトでver1.7.2が読み込まれるようになりましたので、設置の必要はありません。

以上参考になれば幸いです。

 

 

Lightbox2.7をカラーミーショップに設置する

!!ご注意!!
こちらの記事は公開されてからだいぶ時間も経ち、古い情報になっています。

最新バージョンについての記事はこちらをご覧ください。

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

Lightboxってこんなの↓↓

DSCN0346

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

【事前準備】

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

【手順】

  1. Lightboxをダウンロードし解凍する
    ダウンロードはこちらから>>
  2. 画像ファイルをアップロードする
    【1】で解凍したファイルの「css/img」フォルダをFTPサーバーにアップロードする
  3. cssを書き換える
    【1】で解凍したファイルの「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. ヘッダーの書き換え
    【1】で解凍したファイルの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=”~” を埋め込めば画像と一緒に説明文も出ます

意外と簡単にできますね。これカラーミーじゃなくてもこの手順っぽくやればできます。javascriptとcssがいじれればビジュアルも自分好みに変えてあげることもできます。

1つだけ気になるのは、IEでの表示。IE8以下のバージョンだと背景が透過されないので真っ黒になっちゃうんです。色々やってみたつもりだけど、どうにもできなかったのが心残り。なんでだろうな~(泣)