ホームページ制作

カラーミーでrespond.jsが動かない

業務でGMOグループの「カラーミーショップ」の構築を行いました。
既存のテンプレートを使うのではなく、ゼロからレスポンシブ対応のコードを書いて制作しました。一通りコーディングが終わり、さぁ動作確認しようと思い、respond.jsを読み込ませてIE8で動作確認しようとしたのですが、どうやってもレスポンシブにならない。

respond.jsというのはIE6~IE8にもメディアクエリを有効にするためのJavaScriptで書かれたポリフィルのことです。scriptタグで読み込むだけで、CSSファイルに記述されたメディアクエリを有効にさせることができます。

カラーミーショップでも自由にscriptタグを書くことはできるので動作できるはず、と思ったのです無理でした。そこでrespond.jsの動作条件についていろいろ調べてみると、resond.jsにはいろいろと制約があることがわかりました。

・HTML内のstyle要素は対象外
・CSSファイル内の@importは無効
・link要素に rel=”stylesheet” を記述すること
・属性セレクタの記述をすると無効になる
・ローカルでは動作しない
・CSSファイルはHTMLと同一のサーバーに置く
・media属性はHTMLかCSSどちらかだけにする
・BOM付きのUTF-8だとダメ

などなど。これまであまり意識してなかったのですが、こんなに条件があるんですね。

さて、このrespond.jsがカラーミーでは動作しないという問題ですが、カラーミーの仕様上、以下の点に問題がありそうです。

・CSSファイルはHTMLと同一のサーバーに置く

カラーミーでは同じページだったら、管理画面の同じページでHTMLとCSSを設定できるのですが、記述したCSSファイルの設置されるサーバーがカラーミーのホームページとは違うサーバーに設置されてしまいます。

CSSファイルは、

http://imgXX.shop-pro.jp/***********************

のようなドメインのサーバーにおかれています。このドメインとショップのあるサーバーのドメインが異なるため、respond.jsが動作しないというのが原因です。

ということで、カラーミーショップでレスポンシブ対応のショップを作る場合には、IE6~IE8をメディアクエリに対応させることはあきらめるしかなさそうですね。やれやれ・・・

お仕事のご相談・ご依頼をお待ちしております

コレカラウェブでは、Webライティング・SEO・メディア運営・障害者支援のお仕事を承っております。専門知識が豊富な村上英輝が直接担当いたします。ご相談・お見積もりは無料です。まずはお気軽にお問い合わせくださいませ。

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:認定SEOコンサルタント・SEO検定1級・Webライティング実務士・ウェブ解析士・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA