티스토리 비 로그인자의 댓글 기본 프로필, 아이콘 바꾸기

티스토리 댓글 아이콘 바꾸기

티스토리 비 로그인자의 댓글 기본 프로필, 아이콘 바꾸기

로그인을 하지 않고 댓글을 작성하면 프로필이 랜덤으로 설정된다. 나는 이 기본 프로필이 별로 마음에 들지 않았다. 그래서 이것을 css나 js로 바꿔볼 수 있지 않을까 생각을 해봤다.

기존의 코드는 댓글 아이콘을 div 태그로 표시하는 내 스킨을 기준으로 만들어졌었다. img 태그로 아이콘을 사용하는 경우엔 제대로 작동하지 않는 듯하다. 따라서 코드를 조금 수정했다.

😀 티스토리 게스트 댓글 아이콘

게스트 댓글 기본 프로필

블로그에 로그인하지 않은 상태로 댓글을 작성하면, 댓글의 아이콘이 티스토리의 기본 아이콘으로 설정된다. 기본 아이콘은 총 8개 있으며 닉네임에 따라 랜덤으로 설정된다. 서로 다른 사람이, 같은 닉네임으로 댓글을 단다면 같은 아이콘으로 표시될 것이다.

그럼 한 번, F12를 눌러 개발자 도구를 실행해 댓글 아이콘의 구조를 살펴보자.

댓글 아이콘 구조

개발자 도구의 좌측 상단(빨간색 박스)을 클릭하고 댓글 아이콘을 클릭해보자. 단축키는 ctrl + shift + c다. 그러면 클릭한 위젯에 해당하는 부분이 html 코드 상에서 보일 것이다.

html 코드 또는 styles에서 댓글의 기본 아이콘 주소가 https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_02.png 이런 식으로 되어있다는 것을 알 수 있다.

기본 아이콘들

위가 게스트의 기본 댓글 아이콘이다. 주소는 https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_0?.png 이며 ?에는 0부터 7까지 총 8개 숫자가 들어갈 수 있다.

내 스킨은 div태그의 style 속성에서 background-image을 통해 댓글 아이콘을 보여주고 있다. 이는 스킨마다 다를 수 있으며 대부분의 스킨은 div태그 등의 style 속성 또는 img태그의 src 속성을 통해 아이콘을 설정한다.

🔧 댓글 아이콘 변경하는 법

댓글 프로필 교체

[src*=profile_default_00],
[style*=profile_default_00] {
	background-image:url("link");
	content:url("link");
}

나는 위 코드로 게스트의 프로필을 다른 사진으로 바꿨다. src 속성이나 style 속성에 profile_default_00(기본 프로필 주소)가 포함돼있으면 사진을 link 사진으로 바꾸는 코드다.

위 코드를 스킨의 css탭에 추가해서 적용해봤다. 댓글 아이콘이 구글 로고로 정상적으로 바뀌는 것을 확인할 수 있다.

html 편집 > css탭에 추가

[src*=profile_default_00],
[style*=profile_default_00] {
	background-image: url("link0");
	content: url("link0");
}
[src*=profile_default_01],
[style*=profile_default_01] {
	background-image: url("link1");
	content: url("link1");
}
[src*=profile_default_02],
[style*=profile_default_02] {
	background-image: url("link2");
	content: url("link2");
}
[src*=profile_default_03],
[style*=profile_default_03] {
	background-image: url("link3");
	content: url("link3");
}
[src*=profile_default_04],
[style*=profile_default_04] {
	background-image: url("link4");
	content: url("link4");
}
[src*=profile_default_05],
[style*=profile_default_05] {
	background-image: url("link5");
	content: url("link5");
}
[src*=profile_default_06],
[style*=profile_default_06] {
	background-image: url("link6");
	content: url("link6");
}
[src*=profile_default_07],
[style*=profile_default_07] {
	background-image: url("link7");
	content: url("link7");
}

아까 코드를 복사 붙여넣기 해서 총 8개의 기본 아이콘을 바꿀 수 있게 했다. 여기서 link 부분에 바꿀 다른 아이콘 링크를 입력하면 된다. 그리고 스킨 편집에서 html 편집을 클릭하고 css 탭에 추가해 적용하면 된다.

만약에 모든 게스트의 아이콘을 일괄적으로 변경하고 싶다면, 아래 코드를 사용하면 된다.

[src*=profile_default],
[style*=profile_default] {
	background-image: url("link");
	content: url("link");
}

변경할 사진은 티스토리의 스킨 편집으로 들어가, 파일 업로드 탭에서 아이콘으로 지정할 사진을 업로드해도 된다. 이렇게 할 경우에는 업로드 할 아이콘을 우클릭 한 후, 링크 주소 복사를 눌러서 사용하면 된다.

그냥 다른 사이트에 있는 아이콘을 사용할 경우에는, 그냥 우클릭해서 주소를 복사해서 사용하면 된다. 하지만, 이런 경우에는 해당 사이트에서 사진을 내릴수도 있고, 속도가 느릴 수도 있다.

🪁 관련 글

티스토리 애드센스 상단 광고 2개 다는 방법

티스토리 애드센스 상단 광고 2개 다는 방법

티스토리 블로그 평점 댓글 리뷰등 위젯 모음, 달기 - widgetpack

티스토리 블로그 평점 댓글 리뷰등 위젯 모음, 달기 - widgetpack

티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴