!!ご注意!!
こちらの記事は公開されてからだいぶ時間も経ち、古い情報になっています。
最新バージョンについての記事はこちらをご覧ください。
カラーミーショップ未経験の私。そんな私でもいいですよ、とカスタマイズのご依頼をいただけました。本当にありがたいことです。いつも以上に張り切っちゃいます。
さて、今回ご依頼いただいたお店さんはスポーツ系なんだけど、とてもファッショナブル。お洒落なイメージを出したかったのでLightboxを導入することにしました。
Lightboxってこんなの↓↓
カラーミーショップにLightbox導入。備忘録として記事にしておきます。ちなみにLightboxのバージョンは2.7.1でした。
【事前準備】
css&jsファイルを設置するFTPサーバーが必要です。カラミーのFTPオプションに申し込むか、他にFTPサーバーを用意しておいてください。通常はプロバイダからいくらか無料スペースが提供されていると思うので、それを活用するのが良いかと。
【手順】
- Lightboxをダウンロードし解凍する
ダウンロードはこちらから>> - 画像ファイルをアップロードする
【1】で解凍したファイルの「css/img」フォルダをFTPサーバーにアップロードする - 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行目も要書き換え - ヘッダーの書き換え
【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”>
それぞれパスはご自身の環境に合わせて書き換えてください - 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以下のバージョンだと背景が透過されないので真っ黒になっちゃうんです。色々やってみたつもりだけど、どうにもできなかったのが心残り。なんでだろうな~(泣)