워드프레스 아바타 모양 둥글게 만들기
간혹 특정 사이트에서 사용자 프로필 등의 아바타가 둥근 원 모양으로 표시되어 있는 경우를 본 적이 있을 것 있습니다.
위의 그림과 같이 아바타(다른 이미지도 마찬가지)를 원 모양으로 바꾸기를 원하는 경우 다음의 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/ */
예를 들어, 일반적인 아바타의 경우 다음과 비슷한 코드를 워드프레스 테마의 스타일 파일에 추가하시면 됩니다. (워드프레스 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
그러면 댓글 영역의 아바타에만 코드가 적용됩니다.
참고로 워드프레스에서 get_avatar( $comment, 크기 ) 부분의 숫자를 조정하여 아바타 크기를 조정할 수 있습니다(get_avatar에 대해서는 여기 참고).
경우에 따라 약간의 변경만으로도 큰 차이를 만들어낼 수 있습니다. 아바타 모양을 사각형에서 원으로 바꾸었을 뿐인데 댓글 섹션이 색다르게 보이네요.
