monograph

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

0
36
28
77

   

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

142

share!

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

Monograph goods in bag23 teaparty

  関連記事

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

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

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

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

server (mini).png
試行錯誤の上Sixcoreへサーバーを移転!そして新しいPC用ブログテーマを作成しました!!

ご無沙汰!PITE.です。 久しぶりの記事更新!(照 なぜこの一週間まともに記事 …

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

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

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

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

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

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

FOLLOW ME.png
5分、いや3分でできるオリジナルのTwitterのフォローボタンをブログに設置する方法。

ブログのデザインを少しづつ少しずつ変えています。PITE.です。 ちょっとでも毎 …

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

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

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

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

ブログ上にソースコードをわかりやすく表示する方法!WordPressプラグイン「SyntaxHighlighter Evolved」紹介!

今回はWordPressのブログの記事中にHTMLやCSSなどのソースコードを見 …