😊

WP Media Category Managementで改行を縮める方法

2023/05/04に公開

WordPress

gallery

tech

大量の画像を一ページに掲載する必要があり、従来のギャラリーでは画像が混じってしまい大変なため、画像をカテゴリで分けることができるWP Media Category Managementを使いました。

でもWordPress標準のギャラリーのショートコードをディフォルトで無効にしてしまう影響なのか、画像と画像の縦の隙間が通常の文字の改行と同じになってしまい、隙間が大きく困っていました。
できるだけ隙間を小さくしたいと調べていたら、下記のようにHTMLのidとクラス名を見つけましたので、解決できました。

ただキャプションのスペースを無くすことができないみたいで、隙間を完全に0にすることができないようです。

#gallery-1 .gallery-item {
    margin-bottom: 0 !important;
}

#gallery-1 .gallery-caption {
    display: none !important;
}

WordPressの投稿ページにショートコードで設定したギャラリーのidが、gallery-1でした。
そして、画像は、クラス名gallery-itemで指定されたDIV要素で囲まれていました。
そして、marginの下を0にすることで、下の余白を無くしました。
またキャプションを使っていないので、 display: none !important;　で非表示設定しました。

私は、これをテーマのCSSの最後に追加しています。
今回idでギャラリーを指定しているので、他のギャライーには影響しないと思います。

今回投稿記事に掲載したショートコードは、こちらです。

[wp_mcm category = "カテゴリ名" size = "medium" columns = "4" order = "ASC" orderby = "post_date" link="file" ]

このショートコードの書き方は、こちらの記事を参考にしました。

Discussion