며칠 전 공감 버튼이 변경되었습니다. 공감 버튼과 공유 버튼 그리고 신고 버튼이 하나로 묶여 버리면서 왼쪽으로 위치까지 변경되었는데요. 어떤 분은 더 좋다고 말씀하시지만 제 경우에는 위치도 마음에 들지 않고 공유 버튼은 별개로 사용하기에 조금 수정해보았습니다. 참고로 신고버튼은 삭제 하면 정책 위반으로 알고 있습니다.
가운데 정렬과 공유 버튼 삭제 입니다. 보통 가운데 정렬를 하려면 넓이 값을 정하고 마진값을 오토로 해서 정렬를 합니다. 그런데 새로운 공감 버튼은 넓이 값이 가변적이라 이렇게 할 수가 없습니다. 만약 넓이 값을 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에 넣으시면 됩니다.
다음글:
