スマートフォン用に違う画像を表示させたいそんな時には、レスポンシブで画像サイズを切り替え(メモ) 

おすすめ記事ピックアップ

レスポンス対応のランディングページを作っていて、どうしても画像を切り替えたい部分が出てきました。下記サイトがとても参考になりました。他にもいくつかのサイトがあったのですが、これがclass指定だけで使えるので、一番便利でした。
引用元 jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html

このサイトの通り設定したのですが、なぜか動きません。jquery1.7.1見落としていました。。。jquery1.7.1が動作に必要です。サイトにはサンプルのファイルもあります。説明を見てそれをダウンロードすれば、設定できるでしょう。簡単にどのような機能か説明します。

特定の画面サイズ以下になった場合、Javascriptによって、画像のファイル名を書き換えてくれます。予めスマホ用に画像を用意しておけば、切り替えることができます。例えば横長の画像を、スマホでは縦長にするってことが可能です。すごい便利。

画像の一部に「_pc」と「_sp」と入れて、HTML上で画像にclass「switch」指定すれば、対象画像は、対象条件のときに「_sp」の画像に切り替わります。1ピクセルの透過画像とかにしておけば、特定の条件の時に画像を表示させることも可能でしょう。

という感じで、いろいろ便利な小技なのでメモです。他のjqueryとjquery1.7.1が、動作に影響しそうな気もしますけど、とても便利でした。


あと自分メモとして、switchのjavascriptを外部ファイルにして、そのなかにjquery1.7.1も入れちゃって、外部リンクして、cssのvisibility設定を忘れずに。




いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : スマートフォン用に違う画像を表示させたいそんな時には、レスポンシブで画像サイズを切り替え(メモ) 
スマートフォン用に違う画像を表示させたいそんな時には、レスポンシブで画像サイズを切り替え(メモ) 
レスポンス対応のランディングページを作っていて、どうしても画像を切り替えたい部分が出てきました。下記サイトがとても参考になりました。他にもいくつかのサイトがあったのですが、これがclass指定だけで使えるので、一番便利でした。
http://2.bp.blogspot.com/-X_jfEEwbzMQ/ViJTKaEQSXI/AAAAAAAAfIQ/YEIQ5UDsMkU/s640/jQuery%25E3%2581%25A7%25E3%2583%25AC%25E3%2582%25B9%25E3%2583%259D%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%2596%25E5%25AF%25BE%25E5%25BF%259C%25E3%2581%25AE%25E9%259A%259B%25E3%2581%25AB%25E3%2582%25A6%25E3%2582%25A3%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A6%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%25AB%25E3%2582%2588%25E3%2581%25A3%25E3%2581%25A6%25E8%25AA%25AD%25E3%2581%25BF%25E8%25BE%25BC%25E3%2582%2580%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E5%2588%2587%25E3%2582%258A%25E6%259B%25BF%25E3%2581%2588%25E3%2582%258B%25E5%25AE%259F%25E9%25A8%2593%2B%2B%2BBlackFlag.png
http://2.bp.blogspot.com/-X_jfEEwbzMQ/ViJTKaEQSXI/AAAAAAAAfIQ/YEIQ5UDsMkU/s72-c/jQuery%25E3%2581%25A7%25E3%2583%25AC%25E3%2582%25B9%25E3%2583%259D%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%2596%25E5%25AF%25BE%25E5%25BF%259C%25E3%2581%25AE%25E9%259A%259B%25E3%2581%25AB%25E3%2582%25A6%25E3%2582%25A3%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A6%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%25AB%25E3%2582%2588%25E3%2581%25A3%25E3%2581%25A6%25E8%25AA%25AD%25E3%2581%25BF%25E8%25BE%25BC%25E3%2582%2580%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E5%2588%2587%25E3%2582%258A%25E6%259B%25BF%25E3%2581%2588%25E3%2582%258B%25E5%25AE%259F%25E9%25A8%2593%2B%2B%2BBlackFlag.png
ふりむけばコウホウ
http://www.furimuke.com/2015/10/gazou-kirikae.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/10/gazou-kirikae.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy