티스토리 공감 버튼 디자인 바꾸기

개요

[이미지 1-1] 공감 버튼

티스토리의 기본 공감 버튼은 정말 못생겼습니다.

 

게시글의 최하단에 존재하고 버튼이 생각보다 작아서(?) 사용자 경험 측면에서 보자면 공감 버튼을 누르기 싫어집니다. 😓

 

[이미지 1-2] 변경할 공감 버튼

이미지 1-2는 본 블로그 스킨에 적용되어 있는 공감 버튼입니다. 구글 검색을 통해 얻은 이미지를 적용한 것인데, 트위터에서 사용되던 방식으로 보입니다.

하트

[이미지 1-3] heart.png의 모습

heart.png

0.01MB

 

하트 이미지는 위 다운로드 버튼을 통해 내려받으실 수 있습니다. 한 프레임 당 100x100의 크기를 갖는 스프라이트 형식으로 되어있는 이미지라 총 2900x100의 크기를 갖고 있습니다.

 

CSS에서 background 속성에 url 함수를 통해 이미지를 불러오고 transition 속성을 통해 효과를 적용시키면 이미지1-2와 같은 공감 버튼을 만들 수 있습니다.

파일 업로드

[이미지 1-3] heart.png 업로드

블로그 관리에서 스킨 편집을 클릭해 heart.png 파일을 업로드해주세요.

 

CSS

.container_postbtn .btn_post.uoc-icon .uoc-icon .ico_postbtn.ico_like {
    background: url('./heart.png') no-repeat;
    width: 100px;
    height: 100px;
    margin: 0 !important;
    transition: background 1s steps(28);
}
.container_postbtn .btn_post.uoc-icon .uoc-icon.empathy_up_without_ani.like_on .ico_postbtn.ico_like {
    background-position: -2800px 0 !important;
}

url 함수를 통해 ./heart.png을 작성하면 본인 블로그 스킨에 업로드한 heart.png 파일을 선택하여 불러올 수 있습니다. no-repeat를 추가하여 이미지가 반복되지 않도록 합니다.

 

한 프레임 당 100x100의 크기를 갖고 있으니 공감 버튼도 100x100 크기를 갖도록 width와 height 속성을 추가합니다. transition 속성도 추가해 버튼 클릭 시 1초 동안 프레임 이미지를 이동하여 애니메이션처럼 보이도록 합니다.

 

공감을 취소할 수 있으니 취소했을 때 이미지의 반대 방향으로 진행하도록 합니다.

 

위 CSS 코드를 기본으로 적용하고 본인 블로그 스킨에 맞게 간격 등을 조절하면 예쁜 공감 버튼을 만들 수 있습니다.