IT테크/블로그소스

[공감 버튼] 티스토리 새로운 공감 버튼 가운데(중앙) 정렬시키기 공유버튼 삭제

며칠 전 공감 버튼이 변경되었습니다. 공감 버튼과 공유 버튼 그리고 신고 버튼이 하나로 묶여 버리면서 왼쪽으로 위치까지 변경되었는데요. 어떤 분은 더 좋다고 말씀하시지만 제 경우에는 위치도 마음에 들지 않고 공유 버튼은 별개로 사용하기에 조금 수정해보았습니다. 참고로 신고버튼은 삭제 하면 정책 위반으로 알고 있습니다.

가운데 정렬과 공유 버튼 삭제 입니다. 보통 가운데 정렬를 하려면 넓이 값을 정하고 마진값을 오토로 해서 정렬를 합니다. 그런데 새로운 공감 버튼은 넓이 값이 가변적이라 이렇게 할 수가 없습니다. 만약 넓이 값을 width:150px; 으로 하고 margin: 0 auto; 이렇게 하면 아래 그림 같은 현상이 나타납니다.



티스토리에서 글을 쓰고 주제를 선택하지 않으면 공감버튼은 나오지 않습니다. 두번째 그림처럼 오른쪽에 빈 공간이 생기죠. 저 빈 공간 때문에 가운데 정렬 하지 못 하게 됩니다. 그리고 세번째 그림처럼 공감수가 천을 넘으면 신고 버튼이 위치를 벗나 아래쪽으로 가버립니다. 넓이 값을 넉넉하게 width:250px; 정도 주면 되는데 이렇게 하면 또 정확이 가운데 정렬이 안되죠. 수정한 예제 입니다. 테스트는 티스토리 #1스킨과 #2 스킨에서 확인 했습니다.


공감 버튼 가운데 정렬

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


공감 버튼 가운데 정렬 부트스트랩4 사용자

.container_postbtn{text-align:center;}
.container_postbtn .postbtn_like {float:none !important; display:inline-block;}
.container_postbtn .postbtn_like label{margin-bottom:0}


공감 버튼 상하 간격을 줄일경우(padding:8px 에서 숫자만 조정)

.container_postbtn{text-align:center; padding: 8px 0 !important;}


저는 부트스트랩4을 사용 하기에 아래와 같이 사용 합니다.

.container_postbtn{text-align:center; padding: 8px 0 !important;}
.container_postbtn .postbtn_like {float:none !important; display:inline-block;}
.container_postbtn .postbtn_like label{margin-bottom:0}


가운데 공유 버튼 삭제 하고 가운데 정렬 하기

.container_postbtn{text-align:center;}
.container_postbtn .postbtn_like {float:none !important; display:inline-block;}
.container_postbtn .postbtn_like label{display:none;}
.container_postbtn .postbtn_like label:last-child {display:inline-block;}
.container_postbtn .postbtn_like label + .ico_bar{display: none;}

가운데 공유 버튼 삭제시 공감 버튼이 없는 경우에는 신고 버튼만 혼자 가운데 떡하니 있어 보기에는 안 좋습니다.


참고로 우측에 CCL 저작권 표시 삭제 입니다. 플러그인으로 설정 하신분들이나 글 쓸때 이미 저작권 표시하신분들은 필요 할 것 같아 참고로...

.container_postbtn .postbtn_ccl{display:none;}


적용: 블로그 관리 HTML/CSS 편집에서 CSS에 넣으시면 됩니다.


다음글:


8
  • 프로필사진
    영포티 수정/삭제 |  댓글쓰기

    잘 봤습니다^^ 즐거운 하루되세요~

    2017.12.26 07:44 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    네~ 감사합니다.

    2017.12.26 10:46 신고
  • 프로필사진
    예스투데이 수정/삭제 |  댓글쓰기

    저는 신고버튼이 아래쪽으로 가버리게 공감이 1000 넘어봤으면 좋겠네요. ㅎㅎ 유용한 자료 잘 보고 갑니다.

    2017.12.26 19:18 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    저도 그렇습니다.ㅎㅎ

    2017.12.26 19:53 신고
  • 프로필사진
    Bible Story 수정/삭제 |  댓글쓰기

    감사합니다.
    그런데 핸드폰에서 봤을 때도 중앙정렬이 되도록 할수 있는 방법은 없을까요.
    운영진에서 무조건 고정시켜 놓는 것 같습니다만.

    2017.12.27 01:02 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    Bible Story님 스킨은 반응형이라 PC든 핸드폰 화면이든 똑같이 보입니다.
    Bible Story님이 말씀하시는 핸드폰 화면이란 티스토리 자체 모바일 웹 버전 말씀하시는 것으로 이해됩니다.
    방법은 있습니다. 설명이 좀 길어 질 것 같아 잠시 후 새로운 글로 설명해 드리겠습니다.

    2017.12.27 11:57 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    추가 설명 입니다.
    http://boogong.tistory.com/37

    2017.12.27 13:21 신고
  • 프로필사진
    Bible Story 수정/삭제 |  댓글쓰기

    소중한 답변 무척 감사합니다.
    저도 블로그주소/m 해서 보고나서 질문을 드린 것이었습니다.
    지금도 여전히 왼쪽에 있는 걸로 나옵니다.
    하여튼 시간 날 때 일러주신 대로 한번 해보겠습니다.

    2017.12.31 22:12 신고