レスポンシブデザイン、スマホ画像差し替え

Question

###前提・実現したいこと
ワードプレスにてレスポンスデザイン対応はできているのですが、スマホ環境時、PCでの画像とは変更したいと思っております。

###発生している問題・エラーメッセージ
色々とサイトを検索するとhtmlとcssのコードを記入して対応するようですが
cssは
ワードプレス→ダッシュボード（管理画面）→外観→テーマの編集
に記載するのはわかるのですが

htmlはどこに記入すれば良いかわかりません。

また、スマホだけ変更したいので、パソコン用は記入しなくても良いのでしょうか？

###該当のソースコード
HTML側の記述

<img class="pc" src="../img/forPc.png" alt="パソコン用の画像"> <img class="sp" src="../img/forSp.png" alt="スマートフォン用の画像">

CSS側の記述

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

PCのほうも751ピクセル以上の条件で括りましょう。
!importantは要らないと思います。

@media only screen and (min-width: 751px) {
.pc { display: block; }
.sp { display: none; }
}
@media only screen and (max-width: 750px) {
.pc { display: none; }
.sp { display: block; }
}

Comments

[退会済みユーザー]

お忙しい中、ご回答頂きましてありがとうございます。アドレスのおかげでCSSの方は理解できました。ありがとうございます。

以下の、HTMLを、どこに記入すればよいかわからないのですが、、、
<img class="pc" src="../img/forPc.png" alt="パソコン用の画像">
<img class="sp" src="../img/forSp.png" alt="スマートフォン用の画像">

どうぞよろしくお願い申し上げます。

[mnnEditor]

ごめん。
WordPressはよくわからないです…。

[8-0_nyan5]

どのページに表示したいかわからないと、どこに記入すればいいか答えられませんよ。