티스토리 공감 버튼 수정 및 삭제방법

티스토리,스킨편집,공감,추천,버튼,숨기기,수정,삭제,CSS,HTML

티스토리 공감버튼 이 글 하나면 수정 및 숨기기 끝!

티스토리를 운영하는 분들에게 중요하게 생각할 수 있는 공감 버튼을 없애거나 수정을 할 수 있는 방법에 대해서 알아보도록 하겠습니다. 사실 기본적으로 제공이 되는 모습은 눈에 띄지않다보니 클릭율이 좋지않고 상위에 올라가지도 않습니다. 물론 티스토리에 공감을 많이 받는다고 크게 혜택이 있는건 아닙니다만 블로그 운영을 하는 분들이라면 기본적으로 공감이라는 것이 낮은것보단 높은게 더 좋다보니 어떻게 하면 공감버튼을 없애거나 수정을 할 수 있는지에 대해서 간단하게 설명하도록 하겠습니다.

목차

1. 공감버튼 숨기는 방법

공감 버튼을 삭제하는 방법에 대해서 알아보겠습니다 우선 블로그 관리자화면에서 [꾸미기] > [스킨 편집]을 누른 오른쪽 화면에서 CSS를 누르고 맨밑에 아래의 소스를 추가하면 공감버튼이 없어진 것을 확인을 할 수 있습니다.

/* 공감버튼 삭제 */
div[id*=reaction\-] {
	display:none;
}

2. 공감버튼 수정

공감 버튼의 수정을하는 것은 기본적으로 CSS에 대해 이해도가 있어야합니다. 그래서 간단하게 수정을 할 수 있는 방법에 대해서 알려드리도록 하겠습니다. 기본 공감버튼의 경우 밋밋하기도 하고 눈에 잘 들어오지 않아 움직일 수 있는 방법으로 한번 만들어보겠습니다. 적용하는 방법은 아까 똑같이 [스킨 편집]에 들어가 CSS에서 추가를 하면 됩니다.

/* 공감 강조 */
.ico_like
{
    animation-duration: 3s;
    animation-name: heartBling;
    animation-iteration-count: infinite;
}

@keyframes heartBling
{
    0% { transform: scale( 2.6 ); }
    33% { transform: scale( 1.4 ); }
    66% { transform: scale( 2.6 ); }
    100% { transform: scale( 1.4 ); }
}

적용을 하고 확인을 하면 조금 더 눈에 띄는 공감을 사용을 하실 수 있습니다. 중간 transform: sacle 부분에서 숫자 부분을 조금씩 수정을 하면 움직이는 부분을 수정을 할 수 있습니다.

마무리

간단하게 공감 버튼을 수정을 할 수 있는 방법에 대해서 알아보았습니다. 다음에 조금 더 디자인 부분으로 신경 써서 수정을 할 수 있는 방법에 대해서 알려드리도록 하겠습니다. 혹시나 궁금하신 사항이나 질문이 있다면 댓글을 남겨주시면 답변드리도록 하겠습니다.