縦写真のブログレイアウト

ブログで縦写真を使うときに困るのはレイアウトだ。

今回の記事のように、縦構図の写真を一枚だけ載せるなら、PCの画面で縦が収まるように「width="480"（height="720"）」で指定すればいい。問題は、横構図の写真を一緒に載せるときだ。

普段と同じように横写真を「width="100%"」で指定すると、縦写真が相対的に小さくなって目立たなくなる。かといって縦写真を大きくすると、画面からはみ出してしまう。

そこで行き着いたのが、横写真の「width="780"」だ。

このブログは横幅が900pxのため、少し縮めた「width="780"」を横写真で指定する。そうすると、「width="480"」の縦写真と組み合わせたときにバランスが良くなる。

作例は先日書いた不動滝の記事を。

写真はセンタリングする。スマホは横幅に余裕がないので諦める。文章は先の記事のように短文なら文章もセンタリングする。長文なら普通に左に揃える。

これで縦写真も横写真も、同じようにインパクトが出る。ブログの横幅によるので「width="780"」は万能な数値ではないが、横写真を「ブログの横幅より少し小さく、縦写真の長辺より少し大きく」することで、上手くはまるはずだ。

撮影カメラ

撮影地