WordPressテーマSANGOの質問

サイドバープロフィールのアイコン画像が丸形状にならない

アバター
りょじん

こちらのサイト記事を参考にさせて頂き、ウィジェット設定でカスタムHTMLを使用しサイドバーにプロフィールを設定しました。
しかしながら、アイコン画像の形状が潰れた丸になってしまい見本のようになりません。
こちらのコメントやweb上で情報を検索しいろいろと試してみたのですがどうしても解決に至らず、大変お手数ではございますがご助力いただけると非常に助かります。
すべてのプラグイン停止も検証済みです。
背景画像は消し、アイコン画像のみを丸形状で拡大して表示させたいと思っております。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/08/28

使用している画像の形状がもともと長方形であるため、そのようになっています。
デモサイトのように表示したい場合は、正方形の画像のURLを入力する必要があります。

SANGOの場合、画像をアップロードすると、自動で160×160にトリミングされた画像が生成されるため、こちらを使用するのが良いと思います。
具体的には画像のURLが
https://○○/example.jpgとなっている場合、こちらをhttps://○○/example-160x160.jpgというように書き換えると、正方形の画像になります。
(画像の拡張子の前に-160x160を入れるイメージです)

よろしくお願いします。

アバター
りょじん
2019/08/29

ご丁寧にご教示頂き大変助かりました。
どうもありがとうございます。
画像の拡張子の前に”-160×160″を挿入したところ、PC上では無事に正常な丸形状になりました。
しかしながら、スマホで確認するといまだにつぶれた丸形状でした。
本件、今一度アドバイス頂けないでしょうか。
(キャッシュは削除して確認しております)
また、丸形状のアイコン画像を拡大表示する方法も併せてご教示頂ければ大変助かります。
お手数おかけして申し訳ございません。

サルワカくん
サルワカくん
2019/08/29

私の環境(iOS)から見た場合、スマホでも問題なく表示されているようです。
ブラウザのキャッシュは削除されていても、Autoptimizeのキャッシュ、キャッシュプラグイン(WP Fastest Cache)のキャッシュが残っていたのかもしれません。

アバター
りょじん
2019/08/30

サルワカ様
時間をおいて確認したところ、スマホでも問題なく表示されていました。
どうもありがとうございます。
アイコン画像の拡大ですが、以下を子テーマCSSへ追加してみましたが、アイコンの位置が左上へズレるだけで拡大表示がされません。
アドバイスご教示いただけないでしょうか。
.yourprofile .profile-img {
width: 150px;/*幅*/
height: 150px;/*高さ*/
margin: -75px auto 0;/*75pxの部分はwidthの半分の値に*/
}
.yourprofile .profile-img img {
border-radius: 50%;
}

サルワカくん
サルワカくん
2019/08/31

記載のあるCSSに加えて、以下のCSSを追加すると大きく表示されると思います。

.yourprofile .profile-img img {
    width: 100%;
}

よろしくお願いします。

アバター
りょじん
2019/09/02

サルワカ様
本件ご丁寧どうもありがとうございます。
希望のレイアウトにすることが出来ました。