Twenty Twelve では、記事内に画像を貼ると必ず画像周りに枠(影)が表示されます(以下を参照)。

Twenty twelve で画像の枠を削除する方法

個人的に思うのは、この画像につく枠(影)が見栄えが悪い。3D感を出しているのか、はたまた目立たせようとしているのかその真意がわかりませんが、スクリーンショットなどを掲載する際はかなりジャマな枠(影)となります。

というわけで今回は、Twenty Twelve の画像の枠(影)を削除する方法を紹介していきます。

Twenty Twelve の画像の枠を削除する手順

Twenty Twelve の画像の枠を削除する手順はとても単純です。

まず、ワードプレスの管理画面から外観、テーマ編集、スタイルシート (style.css)を選択します。

外観 > テーマ編集 > スタイルシート (style.css)

アクセスしたら以下の記述を探し、その中にあるタグ(赤い部分)をカスタマイズしていきます。

.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」を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;

カスタマイズしたら更新します。すると画像の枠(影)は消えました(以下参照)。

Twenty twelve で画像の枠を削除する方法2

以上で、Twenty twelve で画像の枠を削除する方法は終了です。

今回のカスタマイズは記事内の画像だけじゃなく、アイキャッチ画像にも適用されるカスタマイズ方法です。その辺を考慮して、カスタマイズを行っていきましょう。

SPONSORED LINK