【The Thor】ギャラリーブロックを修正するCSS|枠線と丸を削除

色々と高機能で便利なWordPressテーマ「The Thor」ですが、微妙にデザインが書き換えられておかしくなっていることがありますよね?

たとえば、ギャラリーブロック。クラシックエディターではグレーの枠線が付き、ブロックエディターでは勝手に丸が付与されます。

ということで、今回はCSSを使用してギャラリーの枠線と丸を削除していきます。

目次

ギャラリーの枠線をCSSで変更する

まずはクラシックエディター使用時の灰色の枠線を削除していきます。

The Thorのギャラリーの灰色の枠線
この灰色フレームです

調べたところ、どうやらギャラリーには灰色の背景色が設定されているようです。枠線で覆われている訳ではなく、灰色の四角形の上に画像を載せているようですね。

それなら、一番簡単な解決法はギャラリーの背景色を記事の背景色と同じにすることです

ということで、以下のCSSをスタイルシートに貼り付けてやりましょう。
貼り付け場所:外観 > テーマエディター > style-user.css

/*** ギャラリーの背景色を変更 ***/
.content dt{
	background-color:#fff; /*fffの部分に記事の背景色*/
}

“#fff”の部分は自分の記事の背景色を入れてください。メインカラムにフレームを設定しているなら白(#fff)、当ブログのようにフレームを設定していなければブログの背景色です。

スタイルシートに貼る付けたら作業は終了。エディター上ではCSSが適用されず分からないので、プレビュー機能を使うか一度公開して枠線が消えているか確認してみてください。

ギャラリーの丸を削除する

続いて、ブロックエディター(Gutenberg)使用時のギャラリーの丸を削除していこうと思います。

The Thorのギャラリーの丸
The Thorを使っていると色んな所で見かける丸です

以下のCSSをスタイルシートに貼り付けます。
貼り付け場所:外観 > テーマエディター > style-user.css

/*前の〇を削除*/
.content ul.blocks-gallery-grid > li:before {
	content:none;
}
/*〇の分だけ左にずらす*/
.content ul.blocks-gallery-grid > li{
	padding-left:0px !important;
}

丸を非表示にするだけだとその分の空白が生まれてしまうので、左にずらすことで位置の調整を行っています。

貼り付けたら、記事のプレビューなどで確認します(エディター上では分かりません)。以下のようにギャラリーに枠線も丸も付いていなければOKです。

CSS適用後のThe Thorのギャラリー

Easy Fancy Boxとの併用もオススメ

Easy Fancy Box

ギャラリー機能は画像が小さく表示されるのが欠点ではありますが、”Easy Fancy Box” というプラグインを組み合わせることで「画像クリックで拡大」というアクション(ポップアップ)を実装することができます。

当ブログでは使用していないので、気になる方は実際に導入してみてください。
(導入方法はテックアカデミーさんが詳しく解説してくれています)

まとめ

The Thorはカスタマイズが豊富ですが、色々と修正が必要な箇所が多いのが難点ですよね。

ツイッターでは普段からこんな感じでブログ・デザインに関することなんかをつらつらとツイートしてますので、よければ絡んでください。それでは、お疲れさまでした。

その他のThe Thorの関連記事

目次
目次
閉じる