STINGER PLUSでサムネイルが丸くならない？！

2016年10月12日2016年11月1日

wordpressのテーマをSTINGER PLUSに変更したのですが、丸いサムネイルにしようとすると楕円っぽくなってしまう現象が直らずはや1ヶ月・・・。

ついに直す方法が見つかりました！！

CSSだけでサムネイルなどの画像を丸く見せる方法 | delaymania

上記サイト様の記事を参考にさせていただきました。

設定⇒メディア⇒サムネイルの幅と高さを変更しても丸くならずに楕円になっていたので、大変困っていたのですがなんとか対処法が見つかってよかったです。

 STINGER PLUSのサムネイルを楕円から円形にしよう！

色々とWEB作成に俄然弱い私ですが、chromeの右クリック⇒「検証」でstyle.cssのサムネイルの場所を突き止めることができました。どうやらサムネイルは「.kanren dt img」で管理されているようです。（もし間違っていたらお教えください！！）

早速やってみましょう！

外観⇒テーマの編集⇒style.css　を開いて「Ctrl＋F」で「.kanren dt img」を検索します。

「.kanren dt img」の｛　｝内に

もしくは

となるように追記します。

※（2016.10.12追記）

border-radiusは書かなくても、STINGER管理⇒投稿・固定記事設定⇒投稿一覧⇒「一覧のサムネイルを丸くする」にチェックを入れてsaveボタンで保存すれば丸くなるので特に書かなくても問題ありませんでした。border-radiusを記載した場合、STINGER管理で「一覧のサムネイルを丸くする」のチェックを外してもそのまま丸いサムネイルのままになるのでご注意を。

ちなみに、height:高さ、 width: 横幅、border-radius:角丸の半径　を表しています。

heightとwidthの数値を変更した場合、border-radiusはheightとwidthの半分の値のpxに設定しましょう。border-radiusを50％にしておけばheightとwidthの値を変更しても円形が崩れることはないです。

終わりに

STINGER　PLUSご使用の方で同じ悩みの方がなかなかおらず（できる方はこんなの悩みのうちにもなっていなかったのかもですが；；）直すまで時間がかかってしまいましたが、もし参考になれば幸いです。