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

最近は楽天市場やYahoo!ショッピングのご依頼が多く、カラーミーショップはご無沙汰しておりました。ちょっとテストをしておきたい事がありまして、jQueryのプラグインを設置。

 

・・・動かない。

 

動いている気配がまったくない。

久しぶりのカラーミーショップだし、ケアレスミスをしているに違いないと再確認するも問題が見当たらない。あれれ??

 

あれこれ切り分けしている途中で、デベロッパーツールからひっそり「mixed contents」のエラーが出てることに気づく。

 

読み進めていくとhttpsでhttpコンテンツが混ざってるからブロックしといたよ!ですって。
え?カラーミーショップ常時SSLになったの?いつのまに。

 

私のレンタルサーバーは確かにhttps化されてません。
おそるおそる共有SSLを使って読み込ませてみると・・・・・あっさり動きました!

 

自分を疑うより先にchrome先生に相談するべきでした。
だいぶ時間を潰してしまったorz

 

常時SSL化、最近毎日のように考えていた事のはずなのに。
Yahoo!ショッピングの切り替えが間近に迫りソワソワ、楽天はスケジュールすらはっきりしない事にヤキモキ、毎日のように最近の私を悩ませている事のはずだったのに、まさかここでも悩まされるとは。

1つ勉強になりました。

 

安全でSEO効果も期待出来る常時SSLに切り替えましょう:カラーミーショップ

 

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が読み込まれるようになりましたので、設置の必要はありません。

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

 

 

Lightbox キャプションに外部リンクが貼れるようになっていた件

はい。表題の通りです。Lightbox系のjQuery を設置しようとなり、そのサイトの性格上キャプションにリンクが貼れたら便利になるなぁ、と。

capture

Fancyboxでも良かったのですが、久しぶりにLightboxをいじってみようと思い、最新バージョンをダウンロードしてきて設置してみたら・・・

あれれ?普通にできました(汗)

どこかのバージョンアップで対応したのでしょうか。以前はできなかったと記憶しているのですが・・・ ともかく嬉しいバージョンアップです。

1点だけhtmlの書き方に注意があります。

キャプションは data-title=”” で設定できるのですが、その中では<a>タグの属性値は ”(ダブルコーテーション) ではなく ’(シングルコーテーション)でくくることです。

通常なら <a href=”http://xxx.com”> と設定するところを <a href=’http://xxx.com’> と書いてあげるだけです。

以上でキャプションにリンクが貼れます。Lightboxは最新バージョンをダウンロードしてくるのをお忘れなく。私が試したバージョンは v2.8.2です。

capture3

Yahoo!ショッピングで商品画像を一括登録する方法について

最近Yahoo!ショッピングへのお引越しや開店準備関係のお仕事が増えています。
なので、Yahoo!ショッピングネタを少し残しておきます。
※Yahoo!クリエイターproにお申し込みの方を対象に説明しています。

まずは商品画像&商品詳細画像を一括登録する方法について。

 

Yahoo!ショッピングでは商品画像&商品詳細画像は画像ファイル名を見て判断されています。
つまり、商品画像をアップロードする際に決められたファイル名にしておけば後は勝手に紐付られていきます。とても便利ですね。具体的なファイル名は以下の通りです。

 

例:商品コード:aaaの場合

  • 商品メイン画像: 商品コード.拡張子 (aaa.jpg)
  • 商品詳細画像(1~5): 商品コード_1~5.拡張子 (aaa_1.jpg)

 

たったこれだけです。後はこれらのルールに沿って名づけられた画像ファイルたちをzipファイルにまとめて、「ストアクリエイターpro」→「画像管理」から「追加」をするだけでいいのです。

注意点は、先に商品登録を済ませておくこと。画像ファイルは1点あたり2MB以下、zipにまとめたものは25MB以下に抑えなければエラーになってしまうという事ぐらいでしょうか。
あ、あと商品画像はアップロードの際に大文字は小文字に勝手に変換されます。商品コードに大文字を使われている場合は注意が必要です。商品画像名はすべて小文字に変換してあげてください。

 

画像数が多くて25MBに抑えるのも大変だよ!という方は「FTPサービス」に申し込んでおきましょう。申請に時間はかかりますが、FTP経由なら分割させる必要もないでしょう。

 

画像ファイルを商品コードにリネームさせるのが大変だよ!という方は、ファイルリネームツールなどを使われると便利だと思います。

すでにファイル名にある程度の規則性があるのなら「Flexible Renamer」 というソフトを使っています。まったく規則性もないのなら「x_rename」というソフトでリストファイルから変換させています。もちろん、使い勝手は人それぞれなので、ご自身にあったものを探されても良いかと思います。

 

参考になれば幸いです。

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