テーマをCocoonに変更しました!

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

20170711084633

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

mobile.css

responsive.css

style.css

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

mobile.css

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

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

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

responsive.css

20170711091941

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

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

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

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

これでもダメな時は私は最後のstyle.cssMedia 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で急にログイン画面が真白になった

wordpressのヴァージョンやPHPのヴァージョンとかでも色々と変わってくるんですね。

次から次へと新しいものが出てくるのでついていくのに死にものぐるいです!

だけど

時が経つのが早いものでもう夏ですよwww

コメント

ブログ管理者などによく売れてる本です