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以下のバージョンだと背景が透過されないので真っ黒になっちゃうんです。色々やってみたつもりだけど、どうにもできなかったのが心残り。なんでだろうな~(泣)

5 thoughts to “Lightbox2.7をカラーミーショップに設置する”

  1. 詳しく教えて欲しい個所があるのですがよろしいですか?

    1. >swさん

      申し訳ないです。諸事情でサイトを離れておりました。
      もうだいぶ時間が経っているのでアレですが、もし何かありましたらお知らせください。私でお答えできることでしたらお力になりますので。

  2. サイトを構築中なのですが、自分のレベルが低い事もあり中々ライトボックスを設置する事が出来ません。
    お力をお借り出来ませんでしょうか?

    1. ≫ma5aさん
      私で力になれるか分かりませんが、よろしければ詳細をメールでご連絡ください(^^)

      1. ありがとうございます。
        確認が遅くなってしまい申し訳ありません。
        メールを送信する場所が見当たらないのでここにコメントしておりますがよろしいでしょうか?
        アドレスを記入してありますので、御返事をアドレスあてに頂けますでしょうか?

        ここを見ながらやっているのですが、3.のCSSを書き換えるところでつまづいてしまっております。

        お手数おかけします。
        よろしくお願い申し上げます。

コメントは受け付けていません。