エンジニアが学んだことをお伝えします

2017-09-10 Blog

トップページで各投稿のサムネイル画像の角を丸くしたい(WordPressカスタマイズ)

さて、wordpressのオリジナルテーマ作成も色々楽しくなってきた今日この頃。

一つ簡単なカスタマイズを実行してみたので備忘録的にメモしておく。

トップページに表示される各投稿のサムネイル画像の角を丸くしたい

角が鋭角なのもかっこ悪くはないのだけど、iPhoneのアプリなんかも角が取れているし、ちょっと雰囲気変わるかなと思って実行してみた。

使用するコードはborder-radius:というもの。

index.phpには、サムネイル画像表示をしている行を囲うように<div class=""></div>を書き込む。(class名はここでは、thumbnail-imageとしてみた)

<div class="thumbnail-image"><!-- トップページサムネイル画像の編集 -->
<?php the_post_thumbnail(array(280, 200)); ?>
</div>

style.cssには以下のように書き込む。border-radiusのpx数は左上、右上、右下、左下の順で指定する。数字をひとつだけにすれば、全ての角が同じようにカットされる。

.thumbnail-image img {
border-radius: 20px 10px 20px 10px;
}

うむ、いい感じになったぞ。

border-radiusで%指定も可能

ちなみに、border-radiusは%指定も可能。正方形に50%指定すれば円になるようだ。

試しに30%で実行してみよう。

.thumbnail-image img {
border-radius: 30%;
}

どうやら30%と一つだけ指定すると、横幅x30%+縦幅x30%で丸くしてくれるらしい。ということで縦横幅が異なる画像の場合、きれいな円で切り取ってくれない。

一つ勉強になった。

HOME

RELATED POST

   

NEW POSTS

CATEGORY



Yo
30代エンジニア。日々の生活や読書、仕事や海外での経験から学んだことをまとめるブログ。
好きなものはApple製品、コーヒー、革製品、デニム。旅とカメラも。Less is More.な生活に憧れる。
Profile詳細

© Yo 2017