wordpress製の古いブログをレスポンシブ対応したら画像の表示で詰んだ

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

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

これで画像がサクッとメインブロックの幅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]が挿入されません。
もっと早く知りたかった。

小さい画像が拡大されるのを防ぐ

2008年ごろ写メ投稿した画像は、サイズが240×320px程度しかありません。

ガラケー時代は画像つき投稿をする場合、WPにプラグインを入れて専用メールアドレスに写真を添付したメールを送信するのが主流でした。
写メ投稿というやつです。

しかもパケット代的に240×320px程度の画像サイズが限度。

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

なのでCSSをもう少し改良します。

img {
	max-width: 100%;
	height: auto;
}

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

縦画像を縮小

縦画像にmax-width:100%;が適応されてしまうと圧迫感がすごかったです。

なので縦画像はimgタグにclass="tate"を追加。
横幅66.6%に。

img.tate {
	max-width: 66.6%;
}

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

画像をセンタリング

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

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

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

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

ついでにLightboxにさようなら

ついでにLightboxにさよならしました。

今どきはスマホで見る人がほとんどなので、拡大したければピンチアウトすればいいし。

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