質問: wordpressにてレスポンシブサイトを構築中です。 個別ページでPCとスマホでcssの設定を出し分けたい箇所が複数あり PC表示用のclassとスマホ表示用のclassを作り、 classの出し分けをショートコードで行いたいと思っています。 is_mobileを使い、functions.phpにショートコードを登録しました。 PC表示時は[PCview]、スマホ表示時は[SPview]で登録しています。 ■個別投稿ページ [PCview] test [SPview] test ■style.css .aaa{background-color:red;} .bbb{background-color:blue;} 上記は問題なく動くのですが(PC、スマホにあわせ正しい方が表示される) htmlの中にショートコードを挿入すると 公開したページの途中でショートコードが表示されてしまいます。 動作はしています。 ※分岐が正常に動いているか確認するために分岐の後ろに数字を入れています。 ■個別投稿ページ sample [PCview] 1 [/PCview] [SPview] 2 [/SPview] test ■style.css .aaa{background-color:red;} .bbb{background-color:blue;} ■結果 sample[SPview]2[/SPview]test 上記のように作成したページにショートコードが表示されてしまいます。 個別ページのhtml途中でショートコードを挿入しても [SPview]等が表示されなくなる方法はないでしょうか? classの分岐が出来るのでしたらショートコードでなくとも構いません。 どうぞよろしくお願いいたします。
回答: CSSをPCとスマホで切り分けるだけなら**メディアクエリ**を使った方が楽です。 例: ``` @media screen and (min-width: 641px) { // ここにPC用のCSS .aaa { background-color: red; } } @media screen and (max-width: 640px) { // ここにスマホ用のCSS .aaa { background-color: blue; } } ``` クラス名を絶対に変えなければならない、という場合にはjQueryでウィンドウの横幅を見てクラスを付け替えてやると良いと思います。