WordPress アバターの形丸く作成

たまに特定のサイトからのユーザープロファイルなどのアバターが丸い円形で表示されている場合を見たことがあるでしょいます。

上の図のようにアバター（他の画像も同様）を円形に変更]をご希望の場合は、次のCSSコードを使用することができます。

webkit-border-radius: 50%;
-moz-border-radius: 50%; 
-ms-border-radius: 50%; 
-o-border-radius: 50%; 
border-radius: 50%;
/* Source : http://premium.wpmudev.org/ */

例えば、一般的なアバターの場合は、次のようなコードを WordPress テーマのスタイルファイルに追加するだけです。 （WordPress CSSコードをスタイルシートファイルに追加する方法は、 ここを参照してください。）

.avatar {
webkit-border-radius: 50%;
-moz-border-radius: 50%; 
-ms-border-radius: 50%; 
-o-border-radius: 50%; 
border-radius: 50%;
}

テーマに沿って、上記のコードでは、 .avatar 代わりに。avatar imgを使用する必要があります。 このコードがうまく動作しない場合 .avatar部分を現在のテーマのアバターを表す要素に変更する必要があります。 要素を確認する方法は、ブラウザの開発者ツールで確認できます。 たとえば、クロムを使用している場合は、アバターにマウスを置いて右ボタンをクリックした後要素の検査「を選択します。これにより、アバター画像の要素を確認できます。

上の図では、アバターの要素は.avatarです。 もし形を変える アバターの範囲を制限するするには、上記の例では、次のような要素を使用するようにします。

.avatar-container .avatar

その後、コメント領域のアバターのみコードが適用されます。

参考までに WordPressから get_avatar（$ comment、サイズ） 部分の数を調整してアバターのサイズを調整することができます（get_avatarについて ここ を参照）。

場合によっては、若干の変更だけで大きな違いを生むことができます。 アバターの形を長方形でウォンに変えただけなのにコメントセクションが色別の方法で見えますね。

参照

• プロファイルにアバターを追加しよう - WP User Avatars
• コメントでは、ユーザーのアバターのサイズを変更する