WordPressのテーマはデフォルトの「Twenty Twelve」を今も使用している、ローカルブロガーのメモ帳です。
このTwenty Twelveで画像を表示すると、画像の周囲にうっすらと影が付くのですが、この影をなくしたいと思い調べてみました。
画像の影を消す
普通の写真の場合は特に気にならないのですが(なくてもいいですし)、スクリーンショットや背景の白を生かしたい時などは、この影が邪魔になるんですよね。
(下の写真は、影つき画像が表示されてい状態をスクリーンショットで撮ったものですが、既に対応しているので、実際の影はなくなってます)
スタイルシートを弄ればいいのだろうとは何となく分かるので、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; }
これで、影がなくなっているはずです。
※上の画像の影がすでになくなっているので、設定は上手く行ったようです。
改めて、変更前後の別のスクリーンショットを比較してみると、
影がなくなってますね。