monograph

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

   

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

teaparty

  関連記事

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

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

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

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

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

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

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

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

Number333 2012-04-14 2.02.30.png
WordPressに関連記事表示プラグイン「LinkWithin」を導入してみた!

こんにちは!PITEです! この間購入した最強のブロガー本を読んで、サイトの中で …

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

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

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

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

Number333 2012-10-04 1.40.28-1.png
【サイト表示高速化】PNGを透過を残したまま大幅に圧縮してくれる無料Macアプリ「ImageAlpha」がメチャクチャ使えて泣きそう。

はいー…!PITE.です! 現在このブログ、Number333の高速化に取り組ん …

NewImage.png
【アップデートには要注意!】WordPress3.4でプラグイン「Auto Post Thumbnails」を使う方法!

こんにちはー!PITEです! 色々データベースのバックアップ関連が片付いたのでや …

Number333 2012-06-17 15.58.18.jpg
【jQuery】WordPressにマウスオーバーで画像の色が変わる「トップに戻るボタン」を設置してみた!

最近ちょっとずつですがjQueryの勉強を始めました!PITEです。 まだまだ始 …