最近、コメントレイアウトのスタイル設定方法とコメントフォームのスタイル設定方法を紹介しました。ユーザーの一人から「グラバター画像を丸くするにはどうすればいいですか？グラバター画像をローカルに保存して丸くしているのですか？」という質問がありました。この記事では、WordPressで丸いグラバター画像を表示する方法を紹介します。CSS3のborder-radiusプロパティを使用して、円形のグラバター画像を作成します。
まず、テーマのstyle.cssファイルを編集する必要があります。FTPプログラムを使用するか、WordPress管理画面の外観 » エディターに移動して行うことができます。次に、CSSファイルに以下のコードを追加します。
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
これはほとんどのWordPressテーマで機能するはずです。ただし、お使いのテーマで機能しない場合は、おそらく何らかのプラグインまたはテーマの機能が、WordPressのGravatarに使用されているデフォルトのクラスを妨害している可能性があります。お使いのテーマでGravatar画像がどのCSSクラスを使用しているかを見つけるには、コメントがあるブログ投稿を開く必要があります。コメントセクションまでスクロールし、Gravatar画像を右クリックして「要素を検証」を選択します。これにより、Gravatarのソースコードが表示されます。次のようになります。
gravatar画像がavatar以外のものになっている場合は、上記のCSSコードの**avatar**の代わりにそれを使用してください。
この記事がWordPressブログに円形のGravatar画像を表示するのに役立ったことを願っています。以下にコメントを残して、質問やフィードバックがあればお知らせください。
Rex
タイムリーです。本当にありがとうございます。
WPBeginnerサポート
You’re welcome
管理者
pujara
コメントシステムのように、コメント画像を自動的に追加するにはどうすればよいですか？
Nataly
こんにちは、うまくいきました、ありがとう、しかし、説明が少し高すぎるように見えます。写真の上に、写真の横に表示させる方法を知っていますか？
Therese
I can’t make it work.
I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.
WPBeginnerサポート
テーマのスタイルシートにCSSを追加しましたか？
管理者
ERFmama
はい、しました。Twenty Twelve テーマを使っています。
特定の場所に入れる必要がありますか？ style.css に
Edit: Never mind it suddenly worked now!
アバターのサイズを変更する方法を教えていただけますか？それとも、どこかにすでに書き留めましたか？
本当にありがとうございます！
Daniel
うまくいきました、ありがとうございます
Chrissy
素晴らしい！まさに探していたものでした！皆さん、最高です！
Jacky
これ本当にありがとうございます。達成するために何時間も費やしました。最も簡単な解決策を提供してくれました！
アブドゥル・サマド
ブラザー、このコードをありがとう。WP初心者ですが、あなたのブログを本当に楽しんでいます。ありがとう、そしてすべてのチュートリアルをありがとう…。
Richie
このヒントを伝えようと思って、もちろんまず自分のサイトの1つで試してみました。
うまくいきました。ボーダーのmozとwebkitのCSSをpxから%に変更しただけです。
ここで興味深いことが起こりました。
別のサイトに行って同じ調整をしましたが、うまくいきませんでした。少し頭を悩ませた後、うまくいったサイトにはWP User Avatarプラグインがインストールされており、うまくいかなかったサイトにはインストールされていなかったことを思い出しました。
プラグインをインストールしたら、うまくいきました。
両方のサイトで、Pressworkフレームワーク上に構築されたカスタムテーマを使用しています。
要するに、プラグインを使えば機能させることができました。
何かアイデアはありますか？
編集スタッフ
テーマが.avatarというCSSクラスを使用しておらず、プラグインがそれを追加した可能性があります。
管理者
Richie
I’ll check it out. Thanks
Roselle Celina
こんにちは、このチュートリアルをありがとうございます！ChromeとFirefoxでは正常に動作していますが、Safariでは同じ問題が発生しています：http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
編集スタッフ
Safariでは、境界線の幅が問題の原因となっているようです。
管理者
RW
同意します。私はIEを約4%しか使用しませんが、顧客の多くはまだ8を使用しています。
ありがとうございます。
ボブ
Martin
If somebody uses IE8 does not deserve for round image
RW
素晴らしいヒントです。IE8はネイティブでは角丸（border-radius）をレンダリングしないことに注意してください。これにはJavaScriptやpieなどが必要になりますが、それだけの価値はありません。幸いなことに、IE9は現在の標準を認識しています…
ありがとう。
ジム・バーネット
IE6のサポートを維持しようとしていた日々を覚えています。今度は角丸のためにIE8です。幸いなことに、IE9が普及しています。
また、FF 3.0はHTML 5をサポートしていません。*悲しい顔*
でもクールなCSSトリックですね！