使用している画像の形状がもともと長方形であるため、そのようになっています。
デモサイトのように表示したい場合は、正方形の画像のURLを入力する必要があります。
SANGOの場合、画像をアップロードすると、自動で160×160にトリミングされた画像が生成されるため、こちらを使用するのが良いと思います。
具体的には画像のURLが
https://○○/example.jpg
となっている場合、こちらをhttps://○○/example-160x160.jpg
というように書き換えると、正方形の画像になります。
(画像の拡張子の前に-160x160
を入れるイメージです)
よろしくお願いします。
ご丁寧にご教示頂き大変助かりました。
どうもありがとうございます。
画像の拡張子の前に”-160×160″を挿入したところ、PC上では無事に正常な丸形状になりました。
しかしながら、スマホで確認するといまだにつぶれた丸形状でした。
本件、今一度アドバイス頂けないでしょうか。
(キャッシュは削除して確認しております)
また、丸形状のアイコン画像を拡大表示する方法も併せてご教示頂ければ大変助かります。
お手数おかけして申し訳ございません。
私の環境(iOS)から見た場合、スマホでも問題なく表示されているようです。
ブラウザのキャッシュは削除されていても、Autoptimizeのキャッシュ、キャッシュプラグイン(WP Fastest Cache)のキャッシュが残っていたのかもしれません。
サルワカ様
時間をおいて確認したところ、スマホでも問題なく表示されていました。
どうもありがとうございます。
アイコン画像の拡大ですが、以下を子テーマCSSへ追加してみましたが、アイコンの位置が左上へズレるだけで拡大表示がされません。
アドバイスご教示いただけないでしょうか。
.yourprofile .profile-img {
width: 150px;/*幅*/
height: 150px;/*高さ*/
margin: -75px auto 0;/*75pxの部分はwidthの半分の値に*/
}
.yourprofile .profile-img img {
border-radius: 50%;
}
記載のあるCSSに加えて、以下のCSSを追加すると大きく表示されると思います。
.yourprofile .profile-img img {
width: 100%;
}
よろしくお願いします。
サルワカ様
本件ご丁寧どうもありがとうございます。
希望のレイアウトにすることが出来ました。
WordPressテーマSANGOの質問
サイドバープロフィールのアイコン画像が丸形状にならない
こちらのサイト記事を参考にさせて頂き、ウィジェット設定でカスタムHTMLを使用しサイドバーにプロフィールを設定しました。
しかしながら、アイコン画像の形状が潰れた丸になってしまい見本のようになりません。
こちらのコメントやweb上で情報を検索しいろいろと試してみたのですがどうしても解決に至らず、大変お手数ではございますがご助力いただけると非常に助かります。
すべてのプラグイン停止も検証済みです。
背景画像は消し、アイコン画像のみを丸形状で拡大して表示させたいと思っております。