티스토리 댓글 프로필 사진 오류! 찌그러진 이미지 원형으로 변경하기

 

고요 속 외침처럼 고독한 포스팅을 해 온 지난날들...

언젠간 반응해주는 분들이 나타나실거야...

하고 바래온 나들이 지나 드디어 댓글이 달렸다!

🙊🙈🙊🙈

 

호다닥 답댓글 쓰려고 신나서 댓글창을 봤는데, 댓글 프로필 사진에 오류가 있는걸 발견했다.

프로필 이미지가 찌그러져 보이고 있었음!

 

 

▲ 프로필 사진이 찌그러져 있다.

 

이렇게 댓글 달아주신 분들의 프로필 이미지가 가로, 세로로 쭉 늘어져 이상하게 보였다.

내 프로필도 마찬가지로 찌그러져 있었다.

 

첫번째로 왜 건드린적 없는 댓글 프로필 이미지가 찌그러져 있는건지 슬펐고...

두번째로 여태 댓글 달린 적이 없어서 이걸 이제야 발견했다는게 슬펐다...(또르륵)

ㅋㅋㅋㅋㅋㅋㅋ

 

아무튼 눈에 거슬리니까 바로 수정하는걸로!

(댓글 달아주신 분들 넘 감사드려요 🥰)

 

 

 

 

1. 내 댓글 프로필 이미지 수정하기

 

 ① 수정할 코드를 검색한다. 

티스토리 관리 페이지에서 스킨 편집 → html 편집 → CSS 탭으로 진입한다.

코드창 내부를 한번 클릭해 커서를 넣어준 후 Ctrl+F를 눌러 검색창을 켠 다음,

.comment-list ul li ul li .author-meta .avatar 를 입력해 검색한다.

내 현재 북클럽 스킨 기준으로 1758번째 줄에 해당 코드가 들어가 있었다.

 

 

---

 

 ② height 값을 추가한다. 

검색해보면 괄호 { } 안에 width(너비) 값만 42px로 잡혀 있는 걸 확인할 수 있다.

width: 42px; 👈 이 줄 아래로 엔터를 친 후

height: 42px; 👈 이 태그를 추가해준다.

 

그리고 [적용] 버튼 클릭!

 

▲ height 값 추가

 

 

 

 

2. 다른 사람의 댓글 프로필 이미지 수정하기

 

 ① 수정할 코드를 검색한다. 

마찬가지로 다른 사람이 단 댓글의 프로필 이미지도 수정해준다.

내 프로필 이미지 코드를 수정할 때와 똑같이 태그 창 내부를 한번 클릭해서 커서를 넣어준 후 Ctrl+F를 눌러 검색창을 켠다.

그 다음 .comment-list ul li .author-meta .avatar 를 입력해 검색!

 

이 때 주의할 점은, 

이 코드는 1번의 내 댓글 프로필 이미지와 다르게 2개의 코드가 검색된다.

아래의 이미지를 참고!

 

 

▲ 수정할 코드 찾기

 

이렇게 스크롤 부분에 내가 검색한 태그가 적혀있는 부분이 표시가 되는데, 표시된 것과 같이 2개가 검색된 것을 확인할 수 있다.

(왜 하나로 묶지 않고 따로 코딩했는지는 잘 모르겠다... 코알못임)

여기서 위 이미지 상에 '하나' 부분, 첫번째 검색결과 영역의 코드를 수정해줘야 한다!

 

 

---

 

 ② width와 height 값을 수정한다. 

1678번째줄 .comment-list ul li .author-meta .avatar 태그 괄호 { } 안을 보면,

여러 태그 중 크기에 관한 태그는 너비만 46px로 잡혀있는걸 확인할 수 있다.

 

앞서 내 댓글 프로필 이미지를 수정할 때 높이와 너비를 모두 42px로 수정했으니 여기서도 크기를 맞춰준다.

 

width: 46px; 👈 46을 42로 바꿔주고,

height: 42px; 👈 아랫줄에 이렇게 태그를 추가해준다.

 

이렇게 수정했다면 [적용] 버튼 클릭!

 

width와 height 값 수정

 

여기까지 완료했다면 다시 댓글 프로필 이미지을 확인하러 고고!

문제없이 제대로 반영이 되었다면 아래의 이미지처럼 내 댓글과 다른 사람의 댓글 프로필 이미지가 모두 동그랗게 바뀌어 있다.

 

 

▲ 문제 해결 완료!

 

훨어얼씬 깔끔 😎

좀 어렵긴한데 그래도 하나 하나 손보는 재미가 쏠쏠하긴하다.

다른 부분들도 조금씩 고쳐봐야겠다 :)