【WordPress】 TwentyTwelveのアイキャッチ画像の影を消す

TwentyTwelveのデフォルト設定では全ての画像に影が付いています。

アイキャッチ画像にも影が付いていますが、←のような丸いアイコンを使っているために影があると違和感を感じてしまいます。
アイキャッチ画像だけ影をとってしまいましょう。

現状はこんな感じになっています。

eye_catch_shadow_01

四角い影があるため見栄えがよくありません。

スポンサーリンク

1.まずアイキャッチ画像のCSSを調べる。

このアイキャッチ画像のCSSはどのように設定すればよいのでしょうか。

ブラウザからコードを見てみると、以下のようになっています。

eye_catch_shadow_02c

画像のこの箇所で設定され、classは2つ付いています。

attachment-thumbnail : サムネイルサイズのアイキャッチ画像用クラス
wp-post-image : アイキャッチ画像用クラス

attachment-thumbnailクラスはアイキャッチで指定したサイズで-mediumや-largeなどに変化します。
アイキャッチのサイズごとに装飾を変えたい場合に使うようです。
デフォルト状態では親テーマのstyle.cssでも使っていませんでした。

次にwp-post-imageクラスを親テーマのstyle.cssで検索してみると

img.wp-post-image {
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

という角丸と影付けのコードが見つかりました。

これを子テーマで打ち消してやればよさそうです。

2.子テーマのstyle.cssで角丸と影を打ち消す

子テーマのstyle.cssに以下のコードを追加します。

img.wp-post-image{
border-radius: 0;
box-shadow: none;
}

念のため角丸も一緒に消してしまいます。

結果はこの通り。

eye_catch_shadow_03

アイキャッチ画像の影が消えました。

これで完成です。

3.まとめ

WordPressはCSSで柔軟に対応出来るようにclassやidが細かく生成されるようです。
CSSがどのような構造になっているかは、ブラウザからコードを表示して逆に追いかけていく方法が分かりやすいと思います。

classやidの一覧があればもっと楽なんですが、見つけられませんでした。
どこかにありそうな気はするのですが。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA