WordPress

画像が多い投稿の場合はJetpackのスライドショーやギャラリー表示が便利

WordPressプラグインJetpackを使っています。表示系だと画像の遅延読み込み、関連記事表示、シェアボタンを利用してきましたが、最近になって画像のスライドショーやギャラリー表示ができることに気づき、いろいろ試してみました。

試した結果、画像が多い場合は、普通に画像を追加するのではなく、Jetpackを使った方が便利と感じました。


(2019/4/24追記)この記事はブロックエディタを使う前に書いたものです。クラシックエディタでJetpackのギャラリーを使う場合に参照してください。ブロックエディタのJetpackブロックを使う場合については下記の記事を参照してください。

Jetpackブロックのスライドショーやギャラリーは従来のものとどう違うのか


以下は、AUDIO ARCHITECTURE展の投稿でスライド表示した19枚をギャラリー表示(指定:正方形タイル+8カラム)にしたもの。いきなりスライドショーよりも、ギャラリーの方がいいかもしれませんね。スマホだと見にくいですが、画像クリックで全画面カルーセル表示可能なので、全貌を見て欲しい場合はこれでもよいのかなと。

これまでギャラリー表示を使わずにスライドショーにしていたのは、ギャラリーだとスマホで見た時に画像が縦積みされると思い込んでいたため。こちらのブログ記事に『Jetpackのタイルギャラリーではこんな感じに、3カラムのまま表示できます』とあり、さっそく試してみました。上のギャラリーもスマホでもコンパクトに表示されますよね。試行錯誤の結果を以下にまとめます(詳しい使い方は上記に紹介したブログ記事を見てください)。

試行錯誤の見た目はテストページ「Jetpackメディアギャラリーの検証」で確認できます。

ギャラリーのタイプ

タイプ 感想
サムネイルグリッド カラム指定可能なので簡単に画像一覧を作る際には便利。難点は画像の下にキャプションが表示されるので、キャプションの長さがマチマチだと見にくく感じることも。画像間の溝は担保されないのでスマホ表示で画像がくっついて見えることも。
タイルモザイク 画像の数に応じて、横2、3、4カラムの組み合わせでモザイク表示。全体的に大きめで、タイルカラムの面積より広くなる。
正方形タイル カラム指定可能で、割り切れない場合は大きい正方形で表示。カラム数を大きくすれば全体的な画像面積は小さくなる。
丸型 (未調査)
タイルカラム タイルモザイクよりも面積は小さい。画像の表示順序が横に表示されないので、時系列を考慮しないものであれば使えそう。
スライドショー

カラム指定

サムネイルグリッド、正方形タイルはカラムを指定可能。
タイルモザイク、タイルカラムはカラムを指定しても表示結果に反映されませんが、編集画面上では指定されたカラムで画像が並びます(編集画面がコンパクトに。やり方は、サムネイルグリッドに一旦しておいてカラムを指定した後に、タイプをタイルモザイクに選び直す)。

サイズ

指定可能なサイズは、ワードプレス標準なサイズの他に、テーマ準拠サイズ、プラグインで使ってるサイズ(sow-carousel-defaultというSiteOriginのサイズ)が出てきました。
どの種類でもサイズを指定できますが、サイズが効いているのはサムネイルグリッドだけな気が?
スライドショー、タイルモザイク、タイルカラムだとサムネイルでも中サイズでも同じ結果になります。

画像の表示順序

サムネイルグリッドは横展開(1枚目の右隣に2枚目)
正方形タイルは横展開
タイルモザイクは横展開(1枚目の下に2枚目)
タイルカラムは縦展開

まとめ

種類 カラム 画像の大きさ 画像キャプション
サムネイルグリッド ・指定されたカラム数で折り返す ・指定されたサイズ 画像の下に表示
タイルモザイク ・カラムを指定しても結果に反映されない
・横に3カラム、2カラム、4カラムのパターンでモザイク表示
・サイズを指定しても結果に反映されない
・全て同じサイズにはしない
・1行12グリッドで言うと、4,4,4、8,4、6,6、3,3,3,3のパターン
画像マウスオーバーで表示
正方形タイル ・指定されたカラム数で折り返す行が必ずある
例)8枚で5カラム指定→3カラム+5カラム
画像マウスオーバーで表示
丸型 (未検証)
タイルカラム ・カラムを指定しても結果に反映されない
・4枚以上指定した場合は、横に3カラムのパターンは必ずあり
・3枚だと横に3カラムとはならない
・サイズを指定しても結果に反映されない
・1行12のグリッドシステムに収めていない
・6、9枚だと画像サイズが全て同じサイズになる(12枚だとそうではない)
画像マウスオーバーで表示
スライドショー ・サイズを指定しても結果に反映されない
・スライドショーコンテナは親要素の幅一杯になる
画像の下に表示