monograph

【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを縮小・拡大できます。

54
34
28
75

   

IMG_6011-1-1_2 (mini).png
オハヨーゴザイマス!PITE.です!

今月の頭にWP touchを卒業し、オリジナルのスマートフォン用テーマに切り替えたのですが、その時に役に立ったTipsが色々とあったのでこれからスマホ用テーマを作ろうと思っている方の手助けになれば、ということで使えそうなやつは記事にして紹介しておきます。

今回はPCとスマホ上での画像の表示サイズの調整方法です。

画像のサイズが合わない…


Number333 2013-01-25 9.50.55_2 (mini).png
多くの場合、PC用とスマホ用のテーマでは記事部分の大きさが違います。

なので、PC用のテーマに合わせて画像のサイズを設定するとスマホ用テーマでは記事からはみ出してしまいます。これは(・A・)イクナイ!!

IMG_6011_2 (mini).png
という訳で方法を調べ、実際に最適化した状態がこちらです。
しっかり画像が記事の中に収まっていますね。

結構これのやり方がお手軽簡単だったので軽く解説を。

「max-width」を使えば一発!


最初これをやろうとした時、

「テーマに合わせて画像のサイズを変えるのか…きっとjQueryとか使ってメンドクサイんだろうな…」

と思いましたが、調べてみたら超簡単!

なんとCSSのプロパティに「max-width」を加えるだけ!


img { 
	max-width: 100%; 
	height:auto;
}




このように「max-width」を100%に設定することによって画像のサイズを囲んでいる要素のいっぱいまで広げることができるんです。これは便利。

「height」をautoにすれば縦横比もそのままで縮小できます。

IMG_6011-1_2 (mini).png
これでスッキリ。やはり見やすさは正義です。

PITE.

 - WordPress

total

192

share!

シェアしてくれるとめっちゃよろこびます。

Monograph goods in bag23 teaparty

  関連記事

sidebar (mini).png
ブログのサイドバーを左に変えただけでまさかこんなに訪問別PVが増えるとは思いませんでした。

5月も半ば、GWがはるか昔の事のようです。長期休暇とは儚いものですね。PITE. …

feedburner.png
簡単な設定で定期購読者を増やそう!フィードバーナー(Feedburner)の登録とRSS登録ボタンの設置方法。

実はこのNumber333、最近までWordPressの不具合でRSSフィードが …

WordPress.png
MarsEdit使用者、いやWordPress使用者必見!!勝手にアイキャッチ画像を設定してくれる超便利プラグイン「Auto Post Thumbnail 」!

僕はMarsEditというブログ更新に超便利なアプリを使ってWordPressの …

Number333 2012-07-08 16.43.41.jpg
【jQuery】Webページ上の要素をガクガクブルブルさせちゃうおもしろプラグイン「jrumble」を試行錯誤の上、ついに導入!

どーもPITEです。 今日の午前中、アスファルトの道路に不注意で愛機MacBoo …

【Blog】やったー!!「覚醒する @CDiP」で記事が紹介されたよー( ;∀;)!しかも2つも!

あのiPhoneブログ界のおまとめ役とも言えるサイト「覚醒する @CDiP」でN …

WordPressで続きを読む(more)をクリックしたときに記事の先頭から表示させる方法!

WordPress使っているブログではトップページに記事の見出しがあって、「続き …

[WordPressメモ] div要素の角を丸くする方法!

自分への備忘録として書いておきます。 記事の中にコメントなどを入れたいとき、di …

rss-icon.png
WordPress上でGoogle ReaderなどのRSS購読者数を計ることができるプラグイン「FeedLogger」

久々のWordPress記事ですね! やっとサイトのレイアウトやら何やらが落ち着 …

Number333 2012-04-03 17.05.32.jpg
「MAMP」を使ってMacにWordPressをローカル環境にインストールする方法を解説します!

僕は基本的にワードプレスの管理はFirefoxのアドオンFirebugを使って管 …

WP高速化.jpg
たった数分でWordPressのサイト表示を劇的に高速化してくれるWPプラグイン4つを紹介。WP使いなら必ずチェック!

ども!PITE.です! 昨日いつものように何気なくGoogle Adsenseの …