ネットショップ運営担当者のブログ

楽天GOLDでcssが読み込みされない!アップロードの方法が間違ってる?

  • 2021年3月12日
  • 2021年3月15日
  • 楽天GOLD
  • 150view
  • 0件

 

新米店長
楽天GOLDでページ作成してたら
レイアウトが崩れちゃいました、、!
EC博士
もしかしたらcssが読み込まれてないのが
原因かもしれませんよ!

こんにちは!楽しいECです
10年以上、ネット販売に携わる仕事をしています

楽天などのページを作っていたら、
cssが読み込まれない(反映されない)ことはありませんか?

この記事では
楽天GOLDでcssが読み込みされない時の対処方法
について解説いたします

楽天市場やネットショップじゃなくても
cssが読み込まれない場合は共通して、対処できるかもしれません

楽天GOLDでcssが読み込みされない場合の原因と対処法

では思いつく限りの原因を対処法と合わせて書いていきます

その前に初めて楽天GOLDを使っている方は
楽天GOLDへのアップロードの方法を確認しておきましょう

楽天GOLDページの更新・編集の方法【初心者向け】

cssの記述が間違っている

まず一つめに多いのがこちらですかね

プロパティ名の記述ミスや; が抜けるなどで
要素にcssが読み込まれてない場合があります

デベロッパーツールなどで
要素に記述したcssがかかっているか見てみましょう

またほかのcssが優先されていて
読み込ませたいcssが打ち消されている場合もありますよね

消されている場合、
デベロッパーツールでは適用させたい記述に打消し線が入っています

cssファイルの楽天GOLDへのアップロードした場所が間違っている?

こちらも原因として多いと思います

cssを読み込ませるためには、htmlファイルの<head>要素内に<link>要素を記述しないといけません。

<head>
<link rel="stylesheet" type="text/css" href="〇〇〇.css">
</head>

〇〇〇の書き方が間違っていたり
楽天GOLDの上記の場所にcssをアップロードしていないことが考えられます

例えば
href=”css/styles.css” と記述した場合には
cssというファルダを作るその中にcssファイル(styles.css)を入れて
楽天GOLDにアップロードする必要があります

cssの反映が遅い?

次にブラウザはキャッシュがのこっていて、最新の画面になっていない可能性があります。

その場合、リロードをしてみましょう
windowsだとCtrlキーとF5キーを同時押しとリロードできます

今回は楽天GOLDでcssが読み込みされない場合の対処の方法
というテーマで書かせていただきました!
何かの参考になれば、幸いです