こんにちは。
頑張ってCSSをコピペしたのに、プレビューしたら、スマホにしか反映されてなくて困ってますね??
吹き出しやボックス、見出しのカスタマイズなどのCSSが、スマホには反映されているのに、PCには反映されていない場合、コピペの順番が間違っている場合があります。
CSSには、優先される順番があり、やみくもにコピペしていけば、全てが反映されるわけではありません。
心当たりのある方は、ちょっと読んでみてください。
意外とすぐに直るかもよ??
コピペに慣れてきたころのミス
最近、少しブログをカスタムしたりして、自己満足に浸っているかたせうみです。
やっと自分のブログにも吹き出しを設置できるようになったので、週末はちまちま会話形式のブログのお手入れしてました。
しかしスムーズに進んでいたかと思いきや、途中でバグ(-_-;)?
どうやっても直らない・・・・!
今日は、ちょっとできるようになった頃襲ってきた、ありがちかつ、基本的なミスをブログにしたいと思います。
CSSに詳しい方には『ばっかじゃないの??』という内容ですが、こんなの知らない人いるんだ、という気持ちで読んでいただけたらな~、と思います。
そう、本当はバグではありませんよォ。
それは突然起こった
開設してから、少しづつカスタマイズしてきたこのブログ。
まずは、シェアボタンのカスタマイズで、綺麗に見栄え良くなった、いぇ~い。
カエレバも導入し、レビュー記事のクオリティもアップ!
見出しの色も、少し変えてみよう。
おおっ!できた。
全部コピペだけど、私やるじゃん!と自画自賛。
と、その日もブロガーさん達が公開してくれている有難いCSSを貼りつけていました。
因みに、カスタマイズのコピペは、新しいものはどんどん下にコピーして、入れ替えるものは、既に記述してあるCSSを削除して、同じ場所にコピペしてました。
ある日、カスタマイズ部分が、PCだけ反映されなくなる。
そして、数日がたち、記事もいくつか更新した頃、ブログに吹き出しを導入しようと試みたのです。
ブログに吹きだしを設置したら、プレビューがこんなに!!!
このレビューは、編集画面だけのはずです。
本当は、こうなるはずなの。
テスト画像
テスト画像
・・・・おかしい・・・。
何度やってもダメだけど、スマホプレビューだけは、ちゃんと吹きだしになっている。
もはや、バグだバグだとハードのせいにして、PCを買い替える所でした。
原因は、CSSの並び順。スマホサイズにのみデザインが反映されるように指定していた。
友人に助けを求めた所、CSSの並び順が間違っている事を指摘して頂き、今に至ります。
以下、コメントのやり取りの抜粋です。
(友人は遠くに住んでいる。)
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に条件がついていることがあるので、確認してみてください。
それでは。