wordpressでスマホ用のCSSが適用されない時の対応方法

個人の備忘録です。

CSSでブログをカスタマイズする時にスマホ用にCSSを書く時には

こんなコード書くんですけど

@media screen and (max-width: 480px) {
スマホ用css
}

でくくる。だけど何故か囲ったのに上手く行かなかったので対応方法をメモします。

自分が使っているのはワードプレスの『simplicity』というテーマです。

写真の回り込みが解除されない

回り込んじゃった画像

回り込んじゃった画像

スマホで見ると写真に記事が回り込むととても読めたもんじゃありません。

アイキャッチ画像をfroatで右に寄せて左に記事を寄せているんですけどスマホで見ると縦書きみたいになってしまうんですよね(汗)

だからスマホで表示する時は中央にアイキャッチがあってその下から本文が始まるようにしたいわけです。具体的にはスマホ用とPC用でCSSを分けます。

そもそもスマホ用のCSSって?

スマホ用って言ってますが何で判断しているかと言えば画面の大きさです。

上のコードの場合は

画面の大きさが480pxまでの時はこのCSSを適用しなさいよって事です。

@media screen and (max-width: 480px) {
スマホ用css
}

この赤くなっている所にスマホの時に適用するCSSを書きましょう。

アイキャッチ画像を小さくして右に寄せる

PC用に僕が書いたのは

.eye-catch {
       width: 300px;
       height: auto;
       margin-left: 10px;
       float: right;
      }

です。

ざっくり説明すると小さくして右に寄せてねって書いてます(笑)

このままでも良かったんですけどこのままでは画像の左の狭いスペースに頑張って文字が回り込みしてしまいます。

スマホではアイキャッチを回り込みしないようにする

書いたコードはコチラ

@media screen and (max-width: 480px) {
.eye-catch {  float : none ;   } 

です。

画面がスマホくらいの時はアイキャッチの回り込みを解除してねって書いてあります。

これで無事にスマホの画面の時は大きいアイキャッチが出てきて、その下から記事が始まるわけです。

そのCSSが適用されないという謎の事態に

なぁんだ簡単じゃん♫って思っていたのに

『適応されてないじゃん(汗)』

書き方は問題無いしなぁ。何でだろうと思っていたらありましたよ!

設定がダブっているからじゃない?PC用にCSS書いてみたら?

そうです。今回は設定がダブっていたからっぽくこれで解決しました。

@media screen and (min-width: 501px) {

.eye-catch {
       width: 300px;
       height: auto;
       margin-left: 10px;
       float: right   }
}

ようするにスマホ以外の画面の時はこのCSSを適用してねって事です。
これで無事に完了しました。
 

PC用

PC用

スマホ用

スマホ用

あとがき

スマホはこっちにしてねっていうCSS

@media screen and (max-width: 480px) {
スマホ用CSS
}
だけでも解決するのがほとんどだと思いますがもしそれだけで解決しなかったら
スマホ以外はこっちにしてねっていうCSS
 
@media screen and (min-width: 501px) {
スマホ以外のCSS
}
 
も合わせて記入してあげると解決するかもです^_^