【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
ブログとFacebookのOGPに最適なサムネイル画像サイズ比率
ブログ等のメディアに記事を書くときに、画像は非常に重要な役割を果たします。 記事の内容を理解してもらうのに役立つと同時に、一見して記事内容のイメージを持ってもらうことで、この記事を読み進めようかという気にさせることができます。 そして、特に重要な役割を果たすのが、その記事に遷移する前の状態、つまり記事一覧やSNS上でのシェア画面から、その記事にクリックしてもらう場面です。 ここでのサムネイル画像・アイキャッチ画像が魅力的であることによって、より多くの人に記事を読んでもらうことができます。 この画像の最適なサイズ・縦横比について検討します。 Facebookのシェアに最適な画像サイズまず、非常に重要になるのが、Facebookでシェアされるのに最適なサイズ。 過去に数回変更がありましたが、現在FBで推奨されている画像サイズは、縦630×横1200です。このサイズ・比率の画像であれば、FB上で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
