#SnapArt

写真撮影を承ります(名古屋・愛知・岐阜・三重・全国)

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

DSCF8566


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

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

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

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

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

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

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

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


撮影カメラ


撮影地