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

  関連記事

onpiece100kan (mini).png
ONE PIECEは何巻で完結する?100巻説と120巻説2つの予想。

ふぇぇ…暖かいよう… 春の訪れに誰よりも敏感。PITE.です。 実は僕、このブロ …

Number333 2013-03-03 14.13.01 (mini).png
【完全版】これでもう迷わない!WordPressのブログをサーバー移転(引越し)する詳しい手順・方法を解説します。【ロリポップからSIXCOREへ】

長い道のりだった… 先日当ブログNubmer333のサーバー移転がやっと完了しま …

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

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

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

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

レスポンシブ (mini).png
僕がブログにレスポンシブデザインを採用しようと思わない理由。スマホ専用テーマ作成のススメ。

一日に3時間以上は電車に乗っています。PITE.です。 いい加減一人暮らしでもし …

NewImage.png
【WordPress】バックアップは超大事!簡単にブログのバックアップを作成してくれるプラグイン「WP-DBManager」がめちゃめちゃ使える!導入&使い方紹介

メンドクサイしよくわかんないし…ってことでずっと遠ざけていたWordPressの …

WordPressで関連記事を自動的に表示させる方法:YARPP

WordPressに関連記事を表示する方法(YARPPを使ってみた) ブログ記事 …

wordpress-article-adsense001.png
意外と盲点。高速化キャッシュプラグイン「W3 Total Cache」をWPtouchやモバイル用テーマと併用する方法。

昨日に引き続きブログの中身をゴニョゴニョしております。PITE.(@infoNu …

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

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

Number333 2013-01-31 14.33.23_2 (mini).png
画面スクロールにあわせてついてくるSNSボタンetcを設置しました!簡単に方法などを。

いよぉ〜!ポン!PITE.です! やっとテストが終わってひたすらテンションが高い …