엠원리액트 댓글에 프로필사진 보이게 하기

수성비전자방입니다. 티스토리 스킨 중 '엠원리액트'라는 스킨이 있습니다. 지금 수성비전자방 스킨도 엠원리액트 기반입니다. 엠원리액트 스킨에는 단점이 있는데, 그것은 바로 댓글을 단 사람의 프로필사진이 보이지 않는다는 것입니다.

제가 단 댓글인데 제 프로필사진이 보이지 않습니다. 오늘은 엠원리액트 스킨에서 댓글 프로필사진이 보이게 수정해 보겠습니다.

1. index.html에서 주석 코멘트 리스트 s를 찾습니다.(Ctrl+F를 이용하면 편하겠죠?)

2. <span class="name"></span>이 있을텐데 <span class="name">과 사이에 아래 소스코드를 추가해 줍니다.

<img src="" alt="댓글 프로필 사진"/>

(alt 태그 내용은 임의로 작성하셔도 됩니다.)

3. style.css에서 주석 댓글 보기를 찾습니다.

4. 아래 소스코드를 추가합니다.

.comment_in img {width: 64px; height: 64px; object-fit: contain;}

3~4번 주의사항: '댓글 보기'가 PC화면 소스코드와 모바일 화면 소스코드에 각각 있으므로 둘 다 수정해 주어야 합니다. Ctrl+F를 이용하실 때 주의하여 잘 찾으시기 바랍니다.

5. images 폴더 안에 필자의 프로필사진을 넣습니다.

6. style.css에서 주석이 변수 인 곳과 변수 인 곳을 찾습니다. .rp_admin의 background url만 수정해 줄 것입니다. 3~4번과 마찬가지로 PC, 모바일 각각 수정해야 하므로 총 4번의 수정을 하겠군요. .rp_admin 부분만 아래와 같이 바꾸어 줍니다.

.guest_admin { background: url(./images/본인프로필사진파일명.확장명) no-repeat; }

본인프로필사진파일명.확장명은 5번 과정에서 업로드 하신 파일의 이름과 확장명을 쓰시는 겁니다.

7. 수정한 스킨을 적용합니다.

이제 댓글에 프로필사진이 보입니다!

제 글을 읽어 주셔서 감사합니다. 다음에 만나요!

수성비의 2in1 노트북은 갤럭시 북 Flex2입니다.(Windows 11)