うみブログ

主に旅行記や、映画の感想などの雑記ブログ

CSSがスマホにしか反映されない!!CSSの落とし穴【カスタム初心者・コピペブロガー限定】

🔸本サイトには、アフィリエイト広告が含まれます🔸 ※案件は一切ありません

こんにちは。

 

頑張ってCSSをコピペしたのに、プレビューしたら、スマホにしか反映されてなくて困ってますね??

 

吹き出しやボックス、見出しのカスタマイズなどのCSSが、スマホには反映されているのに、PCには反映されていない場合、コピペの順番が間違っている場合があります。

CSSには、優先される順番があり、やみくもにコピペしていけば、全てが反映されるわけではありません。

 

心当たりのある方は、ちょっと読んでみてください。

意外とすぐに直るかもよ??

 

コピペに慣れてきたころのミス

 

最近、少しブログをカスタムしたりして、自己満足に浸っているかたせうみです。

 

やっと自分のブログにも吹き出しを設置できるようになったので、週末はちまちま会話形式のブログのお手入れしてました。

 

しかしスムーズに進んでいたかと思いきや、途中でバグ(-_-;)?

どうやっても直らない・・・・!

f:id:kataseumi:20171129204333p:plain

 

 今日は、ちょっとできるようになった頃襲ってきた、ありがちかつ、基本的なミスをブログにしたいと思います。

  

CSSに詳しい方には『ばっかじゃないの??』という内容ですが、こんなの知らない人いるんだ、という気持ちで読んでいただけたらな~、と思います。

そう、本当はバグではありませんよォ。

 

それは突然起こった 

 

開設してから、少しづつカスタマイズしてきたこのブログ。

まずは、シェアボタンのカスタマイズで、綺麗に見栄え良くなった、いぇ~い。

カエレバも導入し、レビュー記事のクオリティもアップ!

見出しの色も、少し変えてみよう。

おおっ!できた。

全部コピペだけど、私やるじゃん!と自画自賛。

 

と、その日もブロガーさん達が公開してくれている有難いCSSを貼りつけていました。

因みに、カスタマイズのコピペは、新しいものはどんどん下にコピーして、入れ替えるものは、既に記述してあるCSSを削除して、同じ場所にコピペしてました。

      f:id:kataseumi:20171201184045j:plain

 

ある日、カスタマイズ部分が、PCだけ反映されなくなる。

 
ある日、私は気がつきました。
カスタマイズしたはずの、見出しの色やフォントの色が元に戻っている事に。
ん?おかしいな・・・いつからだろう・・・?
 
デザインCSSを見てみても、ちゃんと色は指定されていました。
 
スマホ版の方は、カスタマイズした色がしっかり反映されています。
 
??????
色々見てみたけど、分からず。
閲覧されているのは8割がたスマホみたいだし、これはこれで
 
『・・・ま、いっか・・・。』←ばか?
 

   f:id:kataseumi:20171128004911j:plain

 

 そして、数日がたち、記事もいくつか更新した頃、ブログに吹き出しを導入しようと試みたのです。

 

ブログに吹きだしを設置したら、プレビューがこんなに!!!

 
会話形式のブログに、吹きだしをつけるため、アイコンを準備。
さて、またしてもCSSをコピペしてから、HTLMを記述すると・・・。
 
レビュー画面で こんな感じに。
あれ?あれ?
 

f:id:kataseumi:20171130003352j:plain

写真は、編集画面です。

このレビューは、編集画面だけのはずです。

 

本当は、こうなるはずなの。

 

テスト画像

 

 

テスト画像

 

 

・・・・おかしい・・・。

 

何度やってもダメだけど、スマホプレビューだけは、ちゃんと吹きだしになっている。

もはや、バグだバグだとハードのせいにして、PCを買い替える所でした。

 

原因は、CSSの並び順。スマホサイズにのみデザインが反映されるように指定していた。

  

友人に助けを求めた所、CSSの並び順が間違っている事を指摘して頂き、今に至ります。

 

以下、コメントのやり取りの抜粋です。

(友人は遠くに住んでいる。)

CSSの並び順が違うって、なんぞ?

 

これが、答えです。

  

前略

  1. CSSのPC版の部分がダメなんじゃないかと思うよ

  2. screen and (max-width: 480px)

  3.  

    確かこっから下がスマホ版

  4.  

    ちょっと待って

  5.  

    あれ?

  1.  

    ??

  2. 画面サイズが680px以下にしか出ないようになってるよ?

  3.  

    PC版がコピペされてない

  4.  

    そんなばかな

  5. screen and (max-width: 680px) {

  6. これの前にコピペしないと、いわゆるPC版には反映されないよ

  7.  

    680px以下の画面の場合は、以下のCSSを使うって意味だから

 

じゃあ、ナビメニューとか、見出しのCSSも上に持ってこないとダメかな・・。

 

 

なんと、既に書いてあるCSSを削除して、その場所に新しいCSSをコピペしたんですが、新しいCSSの中に、『ここから下の記述はスマホに適用する』という内容が含まれていたのです。

 

なので、@media screen and (max-width: 680px) { より下に書かれているCSSは、全てPCでは反映されない事になっていたのです。

 

私が使用しているテーマはレスポンシブデザインなので、PCとスマホのCSSは兼用。同じ場所に記述されているのです。

 

画面サイズが違うので、美しくディスプレイされるために必要不可欠なCSSでしたが、私は全く知らなかったので、その後ろにどんどん新しくCSSをコピペしてたのです。

 

以前は、その問題のCSSが一番最後だったり、レスポンシブを解除して、PCとスマホ用でCSSを別々に分けてたりしたので、見出しのカスタマイズも上手く行っていたのだと思います。

 

 
その上スペルミスまで・・

 

 

とりあえずできたぞ。今、カスタムCSSの@media screen and (max-width: 680px) { の直前にところに680px のところにあった内容ぶち込んだ。

 

 

わー!ありがとう!

 

 

 

(中略)

(くわしいCSSの内容は消してあります。)

 

195行目のこれでエラー出てる、これは、; が最後にない事と、コメントの前に全角のスペースが入ってる

 

 

えっ?!

 

 

205行目のこれの全角スペース入ってる、222行目も全角スペース。232行目も全角スペース。あと一番最後に } が抜けてる。こんなとこじゃないか? 多分それで動くよ

 

 

ひいっ!

 

 

多分、コメント入れた時に全角モードでスペースしちゃったんだね。結構あるあるだから

 

 

おみそれしました。ありがとう。

 

 

すごく困っているのに、何て能天気な私のアイコン・・・

 

こんな感じで、スペルミス等のCSSエラーのチェックをしてもらった上、更に正しく書き直して頂き、今のブログに至っています。

持つべきものは友達・・・・ていうか、勉強しろよ私って感じですね。

 一応、友人はプロなので、付け届けを送っておきました。

 

コピペなのにスペルミスとか・・・。

恥ずかしい・・・。

 

かたせうみは、反省したので、ちゃんと勉強すると誓いました。

明日からね・・・・。

 

もしも、せっかくコピペしたCSSが、一部にしか反映されていない場合、上のCSSに条件がついていることがあるので、確認してみてください。

 

それでは。