今さら聞けない、WordPress「Twenty Twelve」の画像の影をなくしたいんですが

WordPressのテーマはデフォルトの「Twenty Twelve」を今も使用している、ローカルブロガーのメモ帳です。

このTwenty Twelveで画像を表示すると、画像の周囲にうっすらと影が付くのですが、この影をなくしたいと思い調べてみました。

画像の影を消す

普通の写真の場合は特に気にならないのですが(なくてもいいですし)、スクリーンショットや背景の白を生かしたい時などは、この影が邪魔になるんですよね。
(下の写真は、影つき画像が表示されてい状態をスクリーンショットで撮ったものですが、既に対応しているので、実際の影はなくなってます)

no_shadow_2014-06-21_10_15_17

スタイルシートを弄ればいいのだろうとは何となく分かるので、box-shadowで検索してみると、何カ所かが該当するのですが、どうやら次の箇所のようです。

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

ここの下の「border-radius」が角丸で、「box-shadow」が影の指定なんですね。

ということで、ここを削除すると、影はなくなるようですが、当ブログは子テーマを使っているので、子テーマのスタイルシートにここの指定をなしにする記述を追加します。

実は、この段階で、こちらのサイトを参考にさせていただきました。ありがとうございました。
Twenty Twelveで画像に付加される角丸の影を消したい

「border-radius」を0pxに、「box-shadow」をnoneに指定します。

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border-radius: 0px;
	box-shadow: none;
}

これで、影がなくなっているはずです。
※上の画像の影がすでになくなっているので、設定は上手く行ったようです。

改めて、変更前後の別のスクリーンショットを比較してみると、

こちらが変更前。
no_shadow_2014-06-21_11_19_56

こちらが変更後。
no_shadow_2014-06-21_11_20_49

影がなくなってますね。