【THE THOR】メインビジュアルのシャドー削除のカスタマイズ

INDEX

WordPressテーマ THE THOR（ザ・トール）

運営するブログサイトのうちのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

今回は、WordPressテーマ THE THOR（ザ・トール）の「メインビジュアルのシャドー削除」のカスタマイズについてまとめてみました。

これまでメインビジュアルに関するカスタマイズは、過去実施してきました。

現在のメインビジュアルのスタイルは、次のようになっています。

今回メインビジュアルの画像のサイズを大きくしたときに、メインビジュアル画像の下側のシャドー（影）とその下のお知らせの左右にシャドー（影）が設定されているのが気になってしまいました。

そこで、このシャドー（影）を無くしたいと思います。

今回のエントリー記事では「メインビジュアルのシャドー削除」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）での「メインビジュアルのシャドー削除」のカスタマイズを行います。

「メインビジュアルのシャドー削除」のカスタマイズ内容は、下記の通りです。

このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。

/*メインビジュアルの標準で表示されているシャドー（影）を消す*/
.swiper-container-cube .swiper-cube-shadow {
	background: transparent;
}
.pickupHead {
	box-shadow: none; 
}

今回のカスタマイズによってメインビジュアルのスタイルは、次のようになりました。

実際のカスタマイズ後のメインビジュアルについては、ZMASAa.blogでご確認ください。

メインビジュアルのシャドー（影）が無くなると立体感は無くなってしまうのですが、その分スッキリとして良い感じなります。

特にメインビジュアル下のお知らせの背景色を明るい色に設定していると特に効果が現れます。