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

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

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

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

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

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

１．画像の大きさが揃わない

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

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

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

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

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

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

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

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

使いづらい点の対策

１．画像の大きさが揃わない　の対策

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

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

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

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

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

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

１．画像の大きさが揃わない　の活用法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ご相談・お問合せはこちら