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에 넣으시면 됩니다.


다음글:


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

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

    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 신고
  • 프로필사진
    레몬왕자 수정/삭제 |  댓글쓰기

    우와! 정말 정말 감사해요 !!! 좋은 정보 공유해주셔서 많은 도움이 되었어요 !!

    2018.03.18 20:20 신고
  • 프로필사진
    콘룡 수정/삭제 |  댓글쓰기

    저는 왜 모바일만 적용되고 웹에서는 적용이 안되는 걸까요 ㅠㅠ

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

    저 코드를 어디에 넣으셨나요? 제가 못 찾겠네요.

    2018.04.25 11:34 신고
  • 프로필사진
    콘룡 수정/삭제 |  댓글쓰기

    '공감버튼 가운데정렬' 부분을 복사해서 CSS 맨아래에 넣고 편집페이지에서 왼쪽상단 글 을 눌렀을 때는 가운데정렬이 잘 되어 있는데, 직접 페이지로 들어가보면 가운데정렬이 안되어있더라구요 ㅠㅠ

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

    css 맨아래에서 4번째 줄 /* 공감버튼 조절용 */
    .container_postbtn { width:210px; margin:auto;  padding: 24px 0 24px 68px !important; }

    이분분 삭제해 보세요.

    2018.04.25 11:47 신고
  • 프로필사진
    콘룡 수정/삭제 |  댓글쓰기

    그부분을 전체 삭제해봤는데도 안되길래요... 이건 어떤 문제가 있길래 이렇게 나오는걸까요 .. 흑...

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

    콘룡님 css코드 어딘가에 문제가 있어 보입니다. 우선 임시적으로 css 최상단 @charset "UTF-8"; 이부분 밑에 넣으시면 적용 됩니다.

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

    헉 ... 바로 적용이 되네요!!!
    정말정말 감사합니다 ^^
    제 css코드는 왜 이런걸까요 흑흑...
    끝까지 신경써서 해결해주셔서 정말 감사합니다!!

    2018.04.25 12:00 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    css 한단에 보시면 /*왼쫀 메뉴바*/ 이부분 맨 아래에 @media only screen and (max-width:820px) { #left_menu{display:none;}
    이부분 닫기 태그가 "}" 빠졌습니다.

    @media only screen and (max-width:820px) { #left_menu{display:none;}}
    이렇게 수정 하시면 정상적으로 적용 됩니다.

    2018.04.25 12:05 신고
  • 프로필사진
    콘룡 수정/삭제 |  댓글쓰기

    진짜 감사합니다.
    끝에 "}" 삽입해주니 바로 적용 되네요..ㅠㅠㅠㅠㅠ
    제CSS가 갖고 있는 문제까지 발견해서 해결해주셔서 정말 감사합니다 !!!!!

    2018.04.25 12:53 신고
  • 프로필사진
    인생베팅CGV 수정/삭제 |  댓글쓰기

    덕분에 더 예쁘게 공감버튼이 표현됭ㅆ어요 감사합니다!

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

    감사 합니다. 좋은 하루되세요!

    2018.06.01 18:01 신고
  • 프로필사진
    루-Lou 수정/삭제 |  댓글쓰기

    감사합니다! 덕분에 잘 적용했습니다.
    혹시, 공감버튼과 신고 버튼을 가운데 하는 방법 아시나요?
    전체적으로는 가운데정렬이 되었는데 뭔가 맞지 않는다고 해야할까...한번 방문해주시면 감사하겠습니다;;
    참고로 부트스트랩4 스킨을 사용하고 있습니다.

    2018.06.09 10:26 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    추가하신 스크립트 2번째 줄 에서 마지막 > .like_btn 이부분 삭제 합니다.

    그리고 CSS에 아래 코드 추가 합니다.

    .recommendation {display: inline-block; border-radius: 1px; border: 1px solid #959595; border-color: rgba(149,149,149,0.25);}
    .container_postbtn .postbtn_like {border:none !important;}

    2018.06.09 12:33 신고
  • 프로필사진
    jeyo 수정/삭제 |  댓글쓰기

    참고로 루-Lous님이 사용하시는 스킨은 부트스트랩3버전을 사용하고 계십니다.
    부트스트랩4버전 아니시고 3버전입니다.

    2018.06.09 12:37 신고
  • 프로필사진
    루-Lou 수정/삭제 |  댓글쓰기

    감사합니다~ 덕분에 잘 적용했습니다^^

    2018.06.09 17:41 신고