ColorMe!ShopProでLightboxを使う

カッコイイ写真表示の代名詞といったらLightbox系のAjaxライブラリですけど、
ColorMe!ShopProはヘッダが操作出来ないので、Usage通り<script>をヘッダに入れて~ということは出来ない。

なので一見使用不可能に見えるけど、結構あっさり使えます。



ポイントは3つ。

  1. ヘッダに挿入するJavascriptファイルへのリンクは、Body内に記述する。
  2. スタイルシートは使用するページのテンプレートCSSにコピペする(上級者モード)
  3. テンプレートのアンカータグにrel属性入れる

一番大きなポイントはCSS。
外部ファイルにしたCSSはヘッダにリンク入れないと反映されないので、scriptと同様にbody直下にリンクしても使えない。

ColorMe!ShopProはヘッダの操作が出来ないものの、テンプレートの各ページ(商品詳細画面やカテゴリ画面)ごとに使用するCSSをテキストエリアから記入出来るようになっているので、
そこに直接コピペで入れてしまえば外部リンクするのと同じことになる。
画像は外部サーバから呼び出すということが出来るから、CSSのリンク先を画像が置いてある場所のパスに変更すればOK。
共通のCSSに@import書いて呼び出すということも可能だけど、各ページのCSSエリアに特に何も書いてないなら直接コピペしてしまう方が早いと思われる。

この方法で他のフレームワークも使用可能になるので、ギャラリーとか使ってみると面白いかも。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください