Works埼玉のWebコンサルタントABOUT事業内容WORKS制作実績BLOGブログCONTACTお問合せContentsABOUT事業内容WORKS制作実績BLOGブログCONTACTお問合せCategoryツールカスタマイズテクニックトラブルTagCSSDropboxExceliPhonejQueryMAMPWordPressKeywordBLOGブログPCとスマホで表示する画像を変える方法あれこれ(投稿日:2018年01月21日)レスポンシブサイトを制作する際、PCとスマホで違う画像を表示したいときってありますよね。方法はありますが、簡単にできる方法をいくつか紹介します。}}PC用、スマホ用の両方を併記しておいて、画面サイズにあわせて一方だけを表示にします。簡単な方法ですが、一旦両方の画像を読み込んでいるのでちょっとスマートじゃないような。その2:wp_is_mobile()関数を使う方法WordPressの場合はそれ用の条件分岐タグが用意さています。?>ただし、デフォルトではwp_is_mobile()はタブレットをモバイル端末として扱います。タブレットにはPC用のデータを表示したい場合が多いですよね。そんなときは関数を追加して対応します。最後はjQueryを使って条件に応じて表示する画像を入れ替える方法です。画像ファイル名前の末尾にPC用は”_pc”、スマホ用は”_sp”を追加します(画像両方同じディレクトリに保存してください)。次に、入れ替える画像にclass="toggleImg"を追記します。src="smaple_pc.jpg">最後に次のコードを追加すればOKです。PCとスマホで表示する画像を変える方法あれこれCategoryツールカスタマイズテクニックトラブルTagCSSDropboxExceliPhonejQueryMAMPWordPressKeyword埼玉(新座市)を中心に活動するフリーランスのWebコンサルタント。WordPressを使ったサイト制作を得意としています。お気軽にご相談ください。「ブランド食器買取のセレクターズ」を運営してます。