THE THORのブロックエディター (Gutenberg) でギャラリーを使用した際に、画像に付いてしまう丸を削除するCSSです。
※画像周りの灰色の枠線は、アップデートによるギャラリーブロックの改変によって対処不要になりました
/*** ギャラリー画像横の〇を削除 ***/
.content ul.blocks-gallery-grid > li::before {
content: none;
}
/*〇のための空白を消す*/
.content ul.blocks-gallery-grid > li{
padding-left: 0px !important;
}
エディターには反映されないので、プレビューで確認してください。
CSSの解説
THE THORはリストの横に疑似要素 (::before) で丸を付けるようなスタイルになっているのですが、ギャラリーブロックはリストタグ (ul, li) によって作成されています。そのため、ギャラリーもリストとみなされて丸が付いてしまうのです。
上記CSSでは、ギャラリーの疑似要素 (::before) をcontent: noneで削除して、疑似要素のために空けられた余白padding-left: 1.7remを消すという作業を行っています。
Easy Fancy Boxとの併用がオススメ
THE THORには画像クリックによる拡大機能がないので、ギャラリーブロックは画像が小さくて見にくいという欠点があります。
"Easy Fancy Box" というプラグインを使えば「画像クリックで拡大」というアクション(ポップアップ)を実装できるので、気になる方は導入してみてください。