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

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

 

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

 

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

カラーミーショップだけで何とか対応できないか思案してみたのですが、何をどうしようと無理のようです。
となると、「別サーバーにファイルを用意してそれをカラーミーショップに読み込ませる方法」が最善だと思われます。

別サーバーにファイルを用意する

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

 

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

 

→ エコノミープラン 詳細| ロリポップ!

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ファイルを用意し、アクセス許可をしてやれば問題解消します。
具体的には「カラーミーにアイコンフォントを導入」をご参照ください.