このブログはwordpressを使っていて、2008年から書いています。
今回テンプレートのリニューアルをしてレスポンシブ対応したんですが、画像の表示で詰みました。

.postBody img {
	width: 100%;
	height: auto;
}

これで本文画像（<div class="postBody">内の画像）がサクッとメインブロックの幅100％になると思ったら全然ダメ。
詰んだ理由は2つ。

• ショートコード[caption]～[/caption]にCSSでwidthが直接書かれているため「width:100%;」が効かない
• 2008年ごろ写メ投稿した画像サイズが240×320pxしかない

[caption]～[/caption]を手作業で削除

wordpressの「メディアを追加」機能を使うと強制挿入されるショートコード[caption]～[/caption]にはCSSでwidthが直接書かれています。
なので「width:100%;」が効きません。

画像サイズもバラバラなので置換で消すこともできません。

これはもうひたすら手作業で消すしかありませんでした。
がんばりました。

以降は[caption]～[/caption]が挿入されないようにする

この邪魔な[caption]～[/caption]、挿入されないようにする方法がありました。
wordpressのテンプレートファイル「functions.php」に以下を追加します。

<?php
	define('CAPTIONS_OFF', true);
	add_filter('disable_captions', create_function('','return true;'));
?>

これでwordpressの「メディアを追加」機能を使用しても[caption]～[/caption]が挿入されません。
もっと早く知りたかった。

小さい画像はimgタグに直接「style="max-width:●px;"」を記載

2008年ごろ写メ投稿した画像は、サイズが240×320px程度しかありません。
ガラケー時代は画像つき投稿をする場合、WPにプラグインを入れて専用メールアドレスに写真を添付したメールを送信するのが主流でした。
写メ投稿というやつです。
しかもパケット代的に240×320px程度の画像サイズが限度。

このころ投稿された画像に「width:100%;」が適応されてしまうと、めちゃくちゃ拡大されて画質がガビガビになります。

なのでimgタグに直接「style="max-width:●px;"」を記載しました。
●は画像の横幅と同じ数字を指定します。

これで小さい画像は、原寸以上には拡大されなくなりました。

これもひたすら手作業でマークアップしました。
不勉強でよくわからないんだけど、CSS3の条件分岐とかでなんとかなるのかもしれない。

縦画像を縮小

縦画像に「width:100%;」が適応されてしまうと圧迫感がすごかったです。
なので縦画像はimgタグに「class="tate"」を追加。
デカめのスマホ以上で表示の場合は横幅66.6%に。

@media only screen and (min-width: 450px) {
 	 .postBody img.tate {
		 width: 66.6%;
	}
}

これもひたすら手作業で「class="tate"」を追加しました。
同じくCSS3の条件分岐とかでなんとかなるのかもしれないけど……。

画像をセンタリング

横幅が100％じゃない画像はセンタリングした方が見栄えがよさそうだったので、imgタグ全体への指定を下記に改良しました。

.postBody img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

「display: block;」で画像をブロック要素に変換し「margin: 0 auto;」でセンタリングしています。

これで画像のレスポンシブ対応が完了しました。

ついでにLightboxにさようなら

ついでにLightboxにさよならしました。
今どきはスマホで見る人がほとんどなので、拡大したければピンチアウトすればいいし。
画像のサムネイルも1000px四方以内に変更したので、拡大しなくても見えるかなと思って。

原寸画像へのリンクも削除しました。
手作業で。
がんばりました。