wordpressの画像の角を丸くする

wordpress-imageradius

wordpressでは記事に画像を添付した場合、画像は四角く表示さる。

こういう感じだ。

wordpressの画像の角を丸くする

この画像の角を丸くしてみようと思う。

画像の角を丸くする準備をする

画像の角を丸くするにはstyle.cssを使用する。style.cssの下部に次のコードを追加しよう。

/* 画像の角を丸くする */
.image img{
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

これで画像の角を丸くする準備は完了だ。

画像の角を丸くする

実際に記事に画像を追加してみよう。新しい記事を投稿して”メディアを追加“ボタンを押して、記事に画像を追加しよう。

そして”テキストエディタ“にて画像を表示させているコードを

<div class="image">
画像を表示させているコード
</div>

というように”image”というクラス属性を持たせたdivタグで囲む。

するとこのように画像が表示される。

wordpressの画像の角を丸くする

これで画像の角を丸くする事ができた!