【ワードプレス】パソコンとスマホで画像表示を切り替えるCSS

【CSS】の知識が必要です

 

とりあえず以下のコードを【追加CSS】に貼り付けます。

/* パソコンだけで表示【pcクラス】 */
.pc {
display: block !important;
}

.sp {
display: none !important;
}

/* スマホだけで表示【spクラス】*/
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important;
}
}

 

パソコンだけで表示させたい画像には【pc】のCSSクラスを与える。

スマホだけで表示させたい画像には【sp】のCSSクラスを与える。

 

もしフランシスコザビエルが日本出身だったらどんな名前になっていたのか?