티스토리 댓글 이름 앞에 블로그 프로필 이미지 넣기 (스퀘어 스킨)

간단한 방법으로 댓글 이름 앞에 작은 크기의 블로그 프로필 이미지를 넣어 보았다. (square 스킨)

1. 수정방법

스킨 편집(HTML)에서 두 군데 [##_rp_rep_name_##] 앞에 <img src="[##_rp_rep_logo_##]" />를 넣는다.

  • 두 군데 [##_rp_rep_name_##] 중에서 위는 댓글, 아래는 대댓글 부분이다. 두 군데를 다른 사이즈로 설정하면 댓글은 큰 이미지, 대댓글은 작은 이미지로도 설정 가능
  • 이미지와 이름 사이가 딱 붙어 있으면 안 예뻐 보이기 때문에 img 태그와 뒤따라 오는 치환자 사이에 공백 하나 정도 줌 (스페이스바 또는 &nbsp;)
  • 이미지 세로정렬이 필요하면 style="vertical-align: middle;" 적용
  • 이미지를 둥근 모서리의 사각형 혹은 원형으로 만들고 싶으면 style에 border-radius 값을 추가. 원형의 경우 style="border-radius: 50%;"
<span class="name"><img src="[##_rp_rep_logo_##]" style="vertical-align: middle; border-radius: 25%;" width="35" height="35" alt="profile image" /> [##_rp_rep_name_##]</span>
HTML editting
편집 위치 참고용. 댓글(위), 대댓글(아래)

2. 적용 전후 모습

before and after
적용 전후 댓글 모습

size adjustment
댓글은 큰 이미지, 대댓글은 작은 이미지로 설정해 본 모습

rounded edge version
둥근 모서리의 사각형 버전 (border-radius: 25%)

카테고리의 다른 글

  1. 티스토리 본문 하단 페이지 번호 글자 크기 변경하기 (square 스킨)
  2. 워드프레스 전화번호 자동 링크 해제하기 (클릭 방지)
  3. 워드프레스 클라우드웨이즈 PageSpeed Insights 속도
  4. 클라우드웨이즈 호스팅 서버에서 워드프레스 이메일(SMTP) 설정하기 (feat. Gmail)
  5. 워드프레스 발행일과 최종 수정일 글자 스타일 변경을 위한 CSS class

댓글 남기기