Simplicityのカスタマイズ時にスタイルシートが反映されない時の注意

Simplicityで良くハマることがスマホ用のスタイルシートが反映されない時の為にメモ書きします

mobile.css

responsive.css

style.css

と３つあるかと思いますがそれらの役割を纏めてみました。

mobile.css

モバイルで呼び出されるCSSファイルです。

mobile.cssファイルは、Simplicityデフォルト設定状態のモバイル表示で利用されます。

「外観→レイアウト（全体・リスト）」の「完全レスポンシブデザインにする」が無効になっている場合のみに読み込まれます。

responsive.css

完全レスポンシブデザインが有効になっているとき読み込まれるCSSファイルです。

「外観→レイアウト（全体・リスト）」の「完全レスポンシブデザインにする」が有効になっている時のみに読み込まれます。

完全レスポンシブ機能を利用するときだけ使用するCSSを書いたりすると良いかもしれません。

この2つが少し混乱してしまう事がよくあるんですよね。。。

これでもダメな時は私は最後のstyle.cssにMedia Queriesを使います

例えばこのような感じで書きます

@media screen and (min-width : 768px){ /* 画面幅768px以上に適用されるスタイル */ }
@media screen and (min-width : 1024px){ /* 画面幅1024px以上に適用されるスタイル */ }

@media screen and (max-width: 979px) { /* 979px以下に適用 */ }
@media screen and (max-width: 767px) { /* 767px以下に適用 */ }
@media screen and (max-width: 479px) { /* 479px以下に適用 */ }

Media Queries とは

Media Queries はCSS3から使いされた機能で、レスポンシブデザインを行うのに利用されます。

レスポンシブデザインとは

レスポンシブデザインとは、PCやスマホ、タブレットなどの画面サイズが異なる複数のデバイスに対して、それぞれの画面サイズに適したデザインを、それぞれ全く別のCSSファイルで書くのではなく一つのCSSファイルでまとめて行うものです。

後たまにあるトラブル

Simplicityテーマで右側に余白が出来る

wordpressで急にログイン画面が真白になった