カラーミーショップに自作 css js などを読み込ませる方法

カラーミーカスタマイズ

カラーミーショップにはFTPオプション(レギュラープラン以上は基本機能、エコノミープランは別途料金で利用可)が用意されていますが、誠に残念ながら基本的に画像ファイルのアップロード以外できません

ですので、「共通」ページあたりにインラインで直接記述してしまえば良いのですが、どうしても外部からcssファイルなりjava scriptファイルなりを読み込みたい方向けに書きます。

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

スポンサーリンク

カラーミーでは勝手にいろんなjava scriptが読み込まれている

たとえば、カラーミーSEO Plusテンプレートに実装している、”クイックカートイン機能”や”お気に入り機能”はjava scriptで制御していますが、そのjava scriptは元々あったものをそのまま使っています。

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

必要ないのに読み込まれている迷惑なファイルもありますが、1つずつコードを読んでいると結構使えるものに巡り会えたりします。よーく探すとslick.jsもあります(カラーミーから読み込むよりCDNの方が速いかもしれませんが)。トップページのスライダーはbxsliderなんですけどね。

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

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

なお、「オプション」のHTMLファイルにも同じものがありますが、そっちは触らずで。

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

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

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

これは元々用意されているHTMLファイルやCSSファイルに追記する場合も同様で、たとえばWEBアイコンフォント(FontAwesome ・ icomoon)に必要なcssを追記しようとするとあっという間にエラーです。

そうなってしまうと、「別サーバーにCSSやJSファイルを用意してそれをカラーミーショップに読み込ませる方法」が最善だということになります。

別サーバーにカラーミーショップ用のファイルを用意する

すでにFTP接続できるレンタルサーバーを契約していて空き容量があるならそこに。無ければ安いレンタルサーバーでも契約しましょう。

外部に置くとしたら、cssファイルと jsファイル、あと画像ファイルぐらいでしょうから、余程でなければ大した容量は必要ありません。
ロリポップ一番安いエコノミープランでも月額110円で容量20Gなので、そのぐらいで十分です。

nginxや lightspeedサーバーの登場で、Apache(ロリポップ)が時代遅れみたいに言われることもありますが、最近のロリポップは結構良いスペックですよ。割とおすすめ。→ エコノミープラン 詳細| ロリポップ!

head タグ内にlink 追記

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

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

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

です。

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

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

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

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

ミフネWEB
タイトルとURLをコピーしました