WordPress標準のギャラリーは見た目パットしないですが、記事内から画像を追加できるのが非常に楽です。プラグインでギャラリー系を探しても、殆どの場合は管理画面で一度アルバムを作成してから記事にショートコードを埋め込むのでひと手間面倒。ということでプラグインを使わずにCSSだけでレスポンシブルなギャラリーを作ってみました。

実例

• 

• 

• 

• 

早速出来たものがこちら↑（画像は牧場です。意味はありません。）

ブラウザの幅によって表示の仕方が変わります。

PC等では4枚横１列で、スマホ等のモバイルでは１枚表示になって横スクロールになります。PCの方はぜひ、ブラウザの横幅を縮めてみてください。スマホの方も横にするとPC表示になるかも。

この動きCSSだけで上書きしています。

CSS

基本的には標準ギャラリーの書き出すクラスを調べて適宜!importantで上書きし、Flexboxでコントロールします。

@media screen and (max-width: 720px) {}でモバイル表示を指定。

個々の画像を　.blocks-gallery-item{width:100vw!important;height:auto!important;}で画面幅いっぱいにし、大枠を.wp-block-gallery{overflow-x:auto;}でX方向のみスクロールバーが出るようにしています。

もともとはよくあるギャラリーのように進む、戻るの三角マークをポチポチ押すように考えていたのですが、今のブラウザってスマートスクロールが標準なんで、１回のフリップですい～っと進むこっちの方がタップが少なくて済むなとこのような形に落ち着きました。

なのでスマホでこのサイトを見る場合、ページのスクロールは縦方向に、ギャリーは横方向のフリップ操作となります。ちょっと気持ちよくないですか？

更に今回は思い切って、ページ全体のスクロールバーの表示をなくしています。PCの方はホイールボタン付きのマウスの使用、もしくはキーボードのカーソルキーを使用してください。

クリック時の動作

画像をクリックすると大きなスライド表示なりますが、こちらは素直にプラグインに頼っています。散々ためして結局落ち着いたのがJetpackの標準機能です。なかなか丁度いいんですよね。コメントをつけることも出来ますが、それはオプションでオフにしています。

まとめ

重いプラグインを導入しなくても、標準ギャラリー＋CSSで個性的なギャラリーを作ることが出来ました。標準のパーツを活かすやり方は一番汎用性が高く、過去の記事にも反映しやすくておすすめです。

これで写真も見やすくなったので、しっかりカメラ撮っていこうと思います。