티스토리 공감, 공유 버튼 가운데 정렬 및 버튼 삭제

티스토리 블로그는 본문의 가장 하단에 있는 하트 모양의 공감, 공유 버튼이 좌측 정렬을 기본 설정으로 하고 있습니다.

그런데 이러한 정렬 방식이 마음에 들지 않아 가운데 정렬로 변경하고 싶은 분들이 많으시리라고 생각합니다.

이하의 내용에서는 아래의 그림처럼 좌측 정렬되어 있는 공감, 공유 버튼을 중앙 정렬시키는 방법과 공감 버튼의 아래에 있는 SNS 글 보내기 버튼 및 페이스북 좋아요 버튼의 삭제에 대하여도 설명하고자 합니다.

 

 

 

1. 가운데 정렬을 위한 text-align 속성 적용 코드

.container_postbtn .postbtn_like { float: none !important; display: inline-block; }

2. 가운데 정렬 속성 적용 코드

.container_postbtn { text-align: center; }

3.  공감 버튼과 구독하기 버튼의 높이를 맞춰주는 코드

.container_postbtn button { vertical-align: top !important; }

4. 전체 코드

.container_postbtn .postbtn_like { float: none !important; display: inline-block; }
.container_postbtn { text-align: center; }
.container_postbtn button { vertical-align: top !important; }

위의 전체 코드를 복사하여 티스토리 html편집의 CSS에 추가하도록 합니다.

어디에 넣어도 별 상관 없으나, 제일 밑에 추가하는 게 사후에 관리하기 편합니다.

 

5. 기타 공감 버튼 삭제 코드

추후에 아예 공감 버튼을 삭제해 버리고 싶은 분들은 아래의 코드를 CSS탭의 최하단에 추가해 주시면 됩니다.

 .container_postbtn {display: none;}

 

 

4번에 있는 전체 코드를 마우스로 드래그하여 복사한 다음 CSS 하단에 붙여넣기한 결과물은 아래의 그림과 같습니다.

 

 

이제 공감, 공유 버튼은 정앙 정렬이 되었습니다.

그런데 아직 좌측 정렬로 남아있는 SNS 공유 버튼은 그 기능을 공감 버튼의 하트 옆에 있는 보내기 모양을 클릭해서 하는 기능과 동일하므로 중복되는 아이템입니다.

이 버튼은 티스토리 블로그 관리의 플러그인중 SNS 글보내기 플러그인을 해제하면 간단히 해결됩니다.

 

 

 

이제 페이스북 좋아요 버튼만 남아 있습니다. 페이스북의 좋아요 기능이 불필요하신 분들은 이 역시 페이스북 소셜이라는 플러그인을 해제하면 됩니다.

아래의 이미지 처럼 공감 버튼을 중앙 정렬시키고 기타 버튼들은 모두 해제하였습니다.

 

 

jb 팩토리 스킨을 사용하고 있는데 스킨과 너무 부조화 스럽던 공감, 공유 버튼 등을 정리하고 나니 한결 깔끔해진 느낌입니다.