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

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

반응형

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

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

로그인을 하지 않고 댓글을 작성하면 프로필이 랜덤으로 설정된다. 나는 이 기본 프로필이 별로 마음에 들지 않다. 그래서 이것을 css나 jquery로 바꿔볼 수 있지 않을까 생각을 해봤다. 웹 개발은 거의 안 해봐서 그나마 쉬워 보이는 css로 댓글 프로필을 바꾸는 코드를 짜봤다.

목차

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

    게스트 댓글 기본 프로필

    블로그에 로그인하지 않은 상태로 댓글을 작성하면 아이콘이 티스토리의 기본 아이콘으로 설정된다. 기본 아이콘은 총 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)!important
    }

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

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

    사용할 아이콘 업로드
    사용할 아이콘 업로드

    스킨 편집에서 아이콘으로 지정할 사진을 업로드하고 링크 주소를 복사해 사용할 수 있다. 속도를 위해 블로그에 업로드하는 것이며 별로 신경 쓰지 않는다면 그냥 외부의 링크를 사용해도 된다.

    html 편집 > css탭에 추가

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

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

    관련 글

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

     

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

    티스토리 애드센스 상단 광고 2개 다는 방법 수익을 더 얻기 위해서나 여러 이유로 모바일에선 상단 광고를 한 개 두고 화면의 폭이 넓은 컴퓨터에선 상단 광고를 두 개 두시는 분들도 있습�

    minikupa.com

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

     

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

    티스토리 블로그 평점 댓글 리뷰 등 위젯 모음, 달기 - widgetpack 예전부터 블로그의 스마트폰이나, 앱, 사이트, 프로그램 등 리뷰글에 간단한 평점 위젯 같은걸 달아서 미리 간단하게 평점을 볼 수

    minikupa.com

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

     

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

    변환하기 alt 태그 추가 alt태그란 우선 alt태그란 이미지의 대체 문구(alternative text)를 뜻하며, 이 alt태그는 이미지가 깨졌을 때 대체하여 보여지는 설명용 텍스트입니다. 네이버 웹마스터 가이드�

    minikupa.com

    반응형