wordpress　テーマ　twenty　fourteenでPCでアイキャッチ画像を非表示、スマホではアイキャッチ画像表示の設定方法

wordpress テーマ twenty fourteenでPCでトップページ、記事ページでアイキャッチ画像を非表示、

スマホではアイキャッチ画像表示の設定方法を探しています

style.cssをどのように記述すれば上記の設定になりますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

PC表示とスマホ表示でアイキャッチを表示するかしないかの切替を行うcssと解釈しました。

html
1<div class="post-thumbnail"><?php the_post_thumbnail('thumbnail'); ?></div>

css
1/* PC用(min-widthの値はターゲットデバイスにより適当に書き換えてください) */
2@media screen and (min-width:768px){
3    .post-thumbnail{ display:none; }
4}
5/* スマホ用(max-widthの値はターゲットデバイスにより適当に書き換えてください) */
6/* こっちは特に書かなくてもいいと思います。 */
7@media screen and (max-width:767px){
8    .post-thumbnail{ display:block; }
9}