カラーミーショップに自作ファイル(css / JavaScript)を読み込ませる方法

カラーミーショップに外部ファイルを読み込ませる

カラーミーショップにはFTPオプション(レギュラープラン以上は基本機能、フリープランでは別途料金で利用可)が用意されていますが、誠に残念ながら基本的に画像ファイルのアップロード以外できません。(cssやjsファイルもアップロードできる という意見もあるのですが未確認です)

今では画像やCSS、JSファイル以外にもpdfやmp3など様々なタイプのファイルをアップロードできます。

CDN配信されますがキャッシュNoneです。

cssやJavaScriptぐらいならインラインで直接記述してしまえば良いと思うのですが、どうしても外部から読み込みたい(HTMLコードを汚したくないとかとてつもなく長いとか)という需要もあるので、そういう方向けに書きます。

先に、「外部ファイルなしで済むことも多いよ?」という話から書くのでご了承ください。

カラーミーでは様々なJavaScriptが用意されている

たとえば ”クイックカートイン機能”や”お気に入り機能”実装に必要なJavaScriptファイルは全てのショップに配信されています

実際のショップページでもデザイン編集のプレビューでも構わないですが、ソースコードを見ていただくとheadタグと末尾にカラーミーショップのオリジナルJSファイルがいくつも差し込まれているのが分かります。

必要ないのに読み込まれている迷惑なファイルもありますが、1つずつコードを読んでいると結構使えるものに巡り会えたりします。

よーく探すとスライダー系jQueryプラグインは2種類入っています。担当が違ったんでしょうか。

これは余談なのですが、カラーミーの「共通」HTMLファイル末尾には、viewport設定(レスポンシブデザインに必須)を書くためだけのJavaScriptコードがあります。

こんなもの直接書いておけば済む話なので、下のコードを直接「管理画面」 => 「集客」 => 「検索エンジン対策」 => 「headタグ内フリースペース設定」に書いておき、テンプレートのJSコードは消しておきましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

なお、「オプション」HTMLテンプレートにも同じものがありますが、そっちは触らずで。

headタグ内フリースペースやテンプレートファイルには文字数制限がある

「headタグ内フリースペース設定」を使うと、直接で<head>タグ内に追記できるのですが、残念なことに文字数上限が定められており、ある程度がっつり書いてしまうと文字数オーバーでエラーが出ます。

これはテンプレートファイル(HTML / CSS)も同様で、たとえばWEBアイコンフォント(FontAwesome ・ icomoon)に必要なcssを追記してみるとあっという間に65,000文字オーバーでエラーです。

その対策には2種類あって、1つは

別サーバーにCSSやJSファイルを用意してそれをカラーミーショップに読み込ませる方法

もう1つは「使い回し部分をフリーページで作る」です。

別サーバーに自作ファイルを用意する方法

FTPオプションなり、すでに契約しているレンタルサーバーなり、どこでも良いのでファイルをアップロードする場所を用意します。

無ければ安いレンタルサーバーでも契約しましょう。

外部に置くとしたら、cssファイルと jsファイル、あと画像ファイルぐらいでしょうから、余程でなければ大した容量は必要ありません。
ロリポップ [PR]一番安いプランぐらいで十分です。

nginxや lightspeedサーバーの登場で、Apache(ロリポップ)が時代遅れみたいに言われることもありますが、最近のロリポップは結構良いスペックですよ。

割とおすすめ。

なんならロリポップでもLightspeedサーバーが使えるプランがあります。→ エコノミープラン 詳細| ロリポップ!

head タグ内にlink 追記

別サーバーにファイルを用意したらあとはカラーミーで読み込むだけです。
先述のとおり、「検索エンジン対策」タグ内からhead部分に追記できるフリースペース編集ができるので、そこでファイルへのパスを通すだけです。

例として、ファイルの置き場所が sample.com 直下のstyle.cssなら、

<link href=”https://sample.com/style.css” rel=”stylesheet” type=”text/css”>

です。

カラーミーのFTPオプションは大丈夫だったと思いますが、それ以外の場所にアップロードするとき、文字コードがUTF-8のままだと、文字化けすることがあるので注意してください。

カラーミーショップは時代錯誤なEUC-JPなので、ファイルをEUC-JPで保存するか、charset=”UTF-8″を明示して読み込む必要があります。

なお、カラーミーは安全対策としてSSL通信に対応していないサーバー(https化していない)のファイルは読み込みませんので注意。

一部ブラウザでfont faceを読み込まない問題

アイコンフォントを導入するときにはまったトラブルですが、Firefoxなどブラウザによっては他サイト/他ドメインからCSSを読み込む際に、@font faceを拒否する仕様になっているそうです。

cssを読み込んでいるのにカラーミー側でWEBアイコンが表示されない場合は、ファイルをおいているサーバーに.htaccessファイルを用意し、アクセス許可をしてやれば問題解消します。

フリーページを使って自作ファイルを用意する方法

これは昔あった「お助け掲示板」で知ったのですが、目からウロコ的な方法でした。フリーページに空きがあればご活用ください。

フリーページをincludeで利用する

カラーミーはsmarty 2.6で作られていますので、smartyのタグも大体使えます(使えないものもある)

他のテンプレートファイルを読み込む「include」タグを使えば、フリーページに書いたコードをテンプレートで呼び出すことも可能です。方法や解説は下のリンク先に詳しく書いてます。

上部へスクロール