アフィリエイター御用達WordPressテーマの中からGush2を選び、十分満足しているのですが、「Stinger5 forLadys」のかわいらしさに心残りがありまして(^^ゞ、丸いサムネイルをマネしてみました。

トップページやカテゴリーページの大きいサムネイル、サイドバーや関連記事の小さいサムネイル、どれも丸くしてます。

テーマ選びの経緯はこちら→WordPressテーマはアフィリエイト向けのを素直に選べばよかったんだと実感したよ。

カスタマイズ方法

Enjiさんが、やり方を書いてくださってるので、それをGush2に応用します。
ENJIOUT：女性ブロガー向けWordPressテーマ 「Stinger5 forLadys」を配布開始しました。

style.css に丸いサムネイル用記述を追加

Gush2のサムネイル表示のクラス名を探して、丸くする記述を追加します。

スマホ用とPC用で5箇所に追加します。「thumb」で検索すれば見つかります。
水色が追加行です。

background-colorを指定しているのは、背景透過画像でも丸さを感じられるようにするためです。

悩んだところ

radiusの値

Enjiさんのページでは、radiusの値はwidthと同じになっています。
だけど、CSSで円を表現するときはwidthの半分を指定するのが普通のようです。
試してみるとどちらも円になりました。
違いを解明できなかったので、一般的なほうにしました。

参考：
W3Q：覚えておいて損はない、CSSのみで画像を円形や三角形に切り抜く方法
CSS-TRICKS：The Shapes of CSS
HTMLクイックリファレンス：border-radius－CSS3リファレンス

ベンダープレフィックス

ベンダープレフィックスは、IE用やOpera用も入れるほうがよいのかな？とか思ったり、今はもういらないかも？とも思ったりしたのですが、Enjiさんのと同じままにしました。
こういうことは、経験値の高い方のマネをしとくのがよいだろうと思ったので。

参考：
HTMLクイックリファレンス：ベンダープレフィックス－CSSの基本

まとめ

わかってみれば簡単な修正なのですが、cssの意味とかすっかり忘れているので、調べたり悩んだり、けっこう時間かかってしまいました。
ヘッダー画像も壁紙もデフォルトのままなので、少しずつ変えて、自分らしくしていきたいなと思います。