monograph

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

54
34
28
74

   

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

191

share!

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

teaparty

  関連記事

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

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

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

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

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

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

NewImage.png
Google AnalyticsとGoogleカスタム検索を関連付ける(リンクさせる)方法を解説いたします!

以前書いた、「WordPressにGoogleカスタム検索バーを導入してみたので …

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

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

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

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

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

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

pocket (mini).png
「pocket」のWordPressブログへのボタン設置方法。そしてわかった衝撃の事実。これは無視できない。

今日も優雅で怠惰な毎日を送っております。PITE.です。いいのかこれで。 さっき …

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

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

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

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