WordPressの記事で縦長の画像がくそでかになるのを防ぐCSS

WordPressで記事を書いているときに、縦長の画像を入れたら、横幅いっぱいに広がり画像がくそでかになって困ることはありませんか？ PCの場合は良いんですけど、スマホで見たときにその画像だけで画面が埋まってしまう……ということがあって、毎回「こうじゃないよなあ」と思っていたんです。

画像を入れる時に大きさを調整すれば良いんですけど、毎回調整するのはダルいですよね。というわけで、WordPressの「外観」→「カスタマイズ」→「追加CSS」に以下のようなおまじないを入れましょう。

.type-post img {
	max-height: 720px;
	width: auto;
	display: block;
	margin: 0 auto;
}

やっていることは単純。

• max-heightで画像の最大の高さを決めてあげる
• width: auto;を指定し、heightに応じて横幅が決まるようにする

これで画像の大きさはいい感じになるんですけど、画像が左寄せで表示されてしまいます。これを防ぐために、imgをblock要素にし、margin: 0 auto;で中央寄せします。

これは余談ですが、記事内の画像に角丸を入れ、上下にmarginを入れるとさらに見た目が良い感じになります。たとえば以下のように。

.type-post img{
	max-height: 720px;
	width: auto;
	display: block;
	margin: 0 auto;
    border-radius: 4px;
    margin-top: 80px;
    margin-bottom:100px;
}

なお、今回はtype-postクラスの中にあるimg要素全てに適用するようにしています。僕が触っているWordPressテーマで記事ページにはこのクラスが振られていますがが、もし違うクラスが振られている場合は、それに応じて書き換えてみてください。