「スマホからアクセスしてきたユーザにはスマホ用の画像を、PC（パソコン）からアクセスしてきたユーザにはパソコン用の画像を表示したい！！」
そういう時って結構ありますよね。
例えば、登録手順などを解説する時は、スマホとPC（パソコン）で登録フォームが若干違ったりする時。スマホでスクショした画像を載せたほうがいいのか？PCでスクショした画像を載せた方がいいのか？悩んでいる方も多いと思います。
スマホでのアクセスが多ければ、スマホの画像を載せてしまえばいいのですが、スマホの画像を記事に載せってしまうと、PCで登録したいと思っている人にもスマホ用の登録手順が表示されて、PCユーザにとっては嬉しくない…。
できれば、スマホでアクセスしてきたユーザにはスマホでスクショした手順を、PCでアクセスしてきたユーザにはPCでスクショした手順を表示したいところです。
で、私もそんなことできるのかな？と思って調べてみると、意外とめっちゃ簡単にできました(笑)
かかる時間は、5分くらい。
これはイイ！と思ったので、このページでは、スマホでアクセスしてきた人にはスマホの画像を、PCでアクセスしてきた人にはパソコン用の画像を表示させる方法を共有します。
スマホとPCで表示する画像を変える簡単な方法
手順１：cssに追記
まずは、cssに以下を追加します。
/* 画像の大きさに合わせて表示、非表示を切り替える。はパソコン用のクラス、[sp]はスマホ用のクラス*/
.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
手順２：記事の編集画面で切り替えたい画像にclass属性を付ける
あとは、PCだけで表示したい画像、スマホだけで表示したい画像にclass属性を付けます。これだけ書くと意味がわからないと思うので、具体的にやってみた手順を見てみましょう！
まずは、PCだけで表示したい画像と、スマホだけで表示したい画像を用意します。
（今は２つとも表示されているはずです。）
この画像たちをワードプレスの「テキスト」表示で見るとこんな感じ↓。ピンクで囲んだ部分が「パソコンで表示したい画像のソースコード」でオレンジで囲んだ部分が「スマホで表示したい画像のソースコード」です。それぞれにclass属性があることがわかります。（赤で囲んだ部分。画像によっては、class属性がない場合もありますが、今時点でなくても大丈夫です。）
このクラス属性に、PCで表示した画像の場合は「pc」を、スマホで表示したい画像の場合は「sp」を付けます。（pc,scの後ろにはスペースが必要）class属性自体がない場合は、imgの後に「class=”pc”」、「class=”sp”」を付けてください。
で、それぞれの画像にクラス属性を付けると、下ようになります。PCでアクセスしている場合は、「パソコンで表示したい画像」だけが、スマホでアクセスしている場合は、「スマホで表示した画像」だけが表示されているはずです。
これで、完成です☆
簡単ですよね♪
ただ、簡単なのはいいですが、やってみると大変とわかるのが、PC用の画像とスマホ用の画像を両方用意することです…！
簡単にPCとスマホのスクショの画像をスクショする方法をまとめたので、是非下も読んで見てくださいませ～！
スマホ用の画像をPCでスクショする方法
登録手順の場合、PCでスクショをとって、スマホでもスクショを取ると、2回登録することになるし、時間がかかります(><)
それを避けるため、ここでは、PCでスマホのスクショを取る方法をまとめておきます。
必要なのは、ブラウザのChromeのみ。
クロムのデベロッパーツールを使います。
手順１：Chromeのデベロッパーツールを起動
- 画面右上の「…」を押します。
- その他のツールを選択。
- デベロッパーツールを選択。
手順２：デベロッパーツールの表示の切り替えボタンを押す
デベロッパーツールを起動したら、スマホ表示への切り替えボタンを押すだけです。
これでPC表示とスマホ表示を切り替えていけば、PCのスクショとスマホのスクショを同時に取得することができます。
このページもデベロッパーツールで切り替えると、こんな感じになりますよ♪
PCの場合。（PC用の画像が表示されています）
スマホ表示の場合。（スマホ表示の場合）
まとめ
このページでは、
- PCでアクセスしてきた場合と、スマホでアクセスしてきた場合で表示する画像を変える方法！
- PCでスマホ画面のスクショを取得する方法！
をまとめました。
最後までお読みいただきありがとうございました♪
コメントを残す