ヒデヒデノート

思った事や出来事を書いてるweblogです

画像の表示の仕方について考える

前回の記事は、人気ブログランキング経由で見つけた記事を読んで思った事を書いたが、今回もそんな記事だったりします。

昨日、『パソコンとスマホで「文字と画像の並びが見やすい」のはどれ?【ツイッターアンケートで調査】』と言う記事をたまたま読んで、文字と画像の並びではないけれど、「うちのブログの画像の表示の仕方、変えた方がいいんじゃないかな?」と思ったり。

今までは複数の画像を同時に表示する時は、WordPressのグーテンベルク(エディタ)で、「ギャラリー」を選んで表示させてました。すると下記のように表示されます(画像は過去記事に載せた写真です)。

最初は「PCで見た場合はスッキリしていいかな?」と思ってこうしたんだが、スマホだと小さく表示されて見づらいかもと思ったり。クリックすれば大きく見れるが、そもそもクリックできる事に気付かない可能性もあるし。しかも、画像が白っぽいと説明文も読みづらいし(下の画像の最下部参照)。

Chrome(ブラウザ)のデベロッパーツールでスマホ表示にしたうちの記事のスクリーンショット
Chrome(ブラウザ)のデベロッパーツールでスマホ表示にしたうちの記事の一例

ちなみに、複数ではなく1枚だけ画像を表示する時(上の画像もそれですね)は、WordPressのグーテンベルクで、「画像」を選んで表示させてます。…こっちの方がスマホで見た時そこまで小さくならないし、説明文も読みづらくないし、複数表示させる時も「画像」を連続の方がよかったりするかな?

そんな訳で最初に表示させたサンプル写真を、今度は「ギャラリー」ではなく「画像」で連続で表示させてみる。ちなみにこちらは、クリックで大きく見れません。

サンプル写真(その1)
サンプル写真(その1)
サンプル写真(その2)
サンプル写真(その2)

…どっちの方がいいですかね?ちなみに書く側としては、「ギャラリー」より「画像」の方が個人的に楽だったりするので、今後は「画像」で表示に統一もいいかなと思ったり。今までの「ギャラリー」も、「画像」に変更しようかなぁ(気が向いたらだけど)。

追記(16日)

この記事以外の「ギャラリー」を、全て「画像」に変更しました。



コメント

  1. ふじやん より:

    ちなみにうちでは、比較画像などでどうしても横並びにしたい(配置を固定したい)時だけ CSS の grid layout という技を使って表示させてます(例: https://fujilogic.blogspot.com/2021/11/compress-jpg-image.html)。
    スマホのように画面幅が狭くても常に横並びになるので、小さくなってしまうのはやむを得ないですけど。
    そちらの「ギャラリー」は flex-box を使ってるのかな?

    私は通常(特に写真記事)はなるべく大きなサイズで縦並び(そちらで言うところの「画像」)にするのが好みですね。

  2. ヒデヒデ より:

    >ふじやんさん
    あー、確かに比較画像とかは、横並びの方がいいですね。
    grid layout 、CSSの本でよくわからなかったやつだったりします(^_^;)

    「ギャラリー」はWordPressの本で確認したところ、display:flexで設定って書かれてますね。「ギャラリーブロックのレイアウトはフレキシブルボックスレイアウトの機能で実現されている」そうです。
    (あまりよくわかってないけど、とりあえずグリッドレイアウトじゃなくて、フレキシブルボックスレイアウトなのは、なくとなくわかりました。)

    やっぱり比較画像とかでない場合は、大きなサイズで縦並びの方がよさそうですね。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれないコメントは無視されます(スパム対策)