WordPress のギャラリーブロックを使いやすくするやり方

こんにちは、魚沼情報サービス代表の対馬です。

WordPress の ブロックエディター Gutenberg に徐々に慣れつつある今日この頃ですが、いざというときにはクラシックエディターにまだ頼ってしまう私です。

最近、ギャラリーブロックを使いやすくするやり方を見つけましたので紹介します。

この記事は「WordPress の新しいギャラリーって使いづらいなぁ・・・」と感じている方に適した内容になっています。ギャラリーブロックの基本的な使い方は他のサイトをご覧いただくようお願いいたします。

ギャラリーブロックの使いづらい点

私が使いづらいと感じていた点が2つあります。

1.画像の大きさが揃わない

ギャラリーのカラム数を 4 にして、画像を6枚並べると、ギャラリーはこのような見た目になります。

画像の大きさが揃わない

4で割った余りの5枚目と6枚目がこのように拡大表示されます。空きスペースがなくて見た目がいいのですが、私はすべての画像が同じ大きさになってほしいです。

このケースではカラム数を 3 にすれば画像の大きさが揃いますが、画像が11枚、13枚のような場合には対応できないので、根本的な対策にはならないです。

2.画像をクリックしてもリンク先が開かないことが多い

メディアファイルを画像のリンク先に設定して、拡大表示しようとしたら、なかなか表示できないことに気がつきました。

画像の上の部分をクリックしないとリンク先が表示されない

画像のかなり上の部分だけでリンクが有効になっていて、中央付近をクリックしても何も起きないんです。

画像にキャプション(文字)を重ねなければこの問題は起きませんが、文字を重ねたいこともありますよね。

ということで、上記の使いづらい点を解決するやり方を紹介します。

使いづらい点の対策

1.画像の大きさが揃わない の対策

スタイルシートに以下の行を追加します。

.wp-block-gallery .blocks-gallery-item {
flex-grow: 0;
}

すると、ギャラリーはこうなります。

画像の大きさが揃っている

ギャラリーブロック標準の5枚目・6枚目が拡大表示されるスタイルを残しておきたい場合には、まずギャラリーブロックに 追加 CSS クラス を指定します。

ギャラリーブロックに 追加 CSS クラス を設定

上記の例ではクラス fg-0 を指定しています。その上でスタイルシートに以下の行を追加すると、クラス fg-0 を指定したギャラリーだけ画像の大きさを揃えることができます。

.fg-0 .blocks-gallery-item {
 flex-grow: 0;
}

1.画像の大きさが揃わない の活用法

特定の画像を大きく表示して目立たせたいときには新しいギャラリーブロックはたしかに役に立ちます。

しかし、目立たせたいのは最後の画像ではなく先頭の画像であることが多いはず。

そこで、スタイルシートに以下の行を追加します。

.wp-block-gallery {
 flex-flow: row wrap-reverse;
}

この結果、ギャラリーはこうなります。

先頭に大きな画像を置く方法

ちょっと裏技的なやり方ですが、使えそうです。

この場合も 追加 CSS クラス を使って特定のギャラリーだけ先頭に大きな画像を配置するのがいいですね。

2.画像をクリックしてもリンク先が開かないことが多い の対策

スタイルシートに以下の行を追加します。

.wp-block-gallery .blocks-gallery-item figcaption {
 padding: 0 10px;
}

これにより、リンク先を開ける領域がいっきに広くなります。

リンク先を開ける領域がいっきに広くなります

更新情報を受取る

ホームページでお困りのこと、お気軽にご相談ください

効果が出るホームページを格安料金で制作いたします。スマホ対応、SNS連携、SEO対策、常時SSL化もおまかせください。ホームページのちょっとしたデザイン変更や不具合の修正、更新作業のお手伝いもしています。

お困りのこと、なんでもお気軽にご相談ください。