본문으로 바로가기

안녕하세요. 오늘은 새롭게 리뉴얼된 티스토리 블로그의 공감 하트 공유 신고 버튼의


가운데 정렬 하는 방법에 대해서 알아보겠습니다.

[티스토리] 공감 하트 공유 신고 버튼 가운데 정렬하기


티스토리가 개편 리뉴얼 되면서


관리자 페이지도 변화가 되었고, 공감버튼도 변화가 생겼습니다.


원래 공감 버튼은 발행게시글만 나타났었는데, 이제는 주제를 선택해야지 나타납니다.


기존 공감버튼이 없어지고 아래와 같이 새로운 버튼이 생겨서 좌측정렬이 되어버립니다.




해당영역은 따로 플러그인이나, HTML 수정을 제공하지 않기 때문에

구조 자체 변경은 어려우며, 


CSS 스타일시트의 수정으로, 위치를 조정해야합니다.


우선 구조를 살펴볼까요??





복잡하게 보이지만 아주 간단한 구조로 되어있습니다.

<div class="container_postbtn">
	<div class="postbtn_like">
		<div class="like_btn">...</div>

		<label>...</label>

		<label>...</label>
	</div>
</div>


이런 구조로 되어있습니다.


따라서 해당 영역의 스타일 속성만 아주 간단하게 수정을 해주면 됩니다.


1) 우선 container_postbtn 클래스에 

text-aligncenter;속성을 추가해줘야합니다. 


텍스트 정렬의 속성으로, 가운데 정렬을 지정하는 것입니다.


2) 이제 그안에 있는, postbtn_like 클래스에

displayinline-block; 속성을 지정해줘야합니다.


inline 속성이란, 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향입니다. 

대표적인 inline 속성을 가진 태그로는 <a>, <strong>, <span> 태그가 있습니다.


block 속성은 inline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다.

대표적인 블록 요소로 <p> 태그가 있습니다.


inline-block; 속성은 자세하게 설명하려면, 포스팅이 길어지기 때문에, 다음에 정리하고

크게는 요소는 inline이며, 내부는 block 처럼 표시한다고 생각하면됩니다.


특히, 이번 수정을 위해서는 반드시 필요한 속성입니다.


3) 마지막으로 postbtn_like 클래스에

floatleft;인 좌우정렬 속성을 지워줘야합니다.

하지만, 해당 속성은 우리가 수정,삭제 제어할 수 없는 외부스타일시트이기 때문에,

floatnone!important;을 사용해서, 덮어쓰기(?) 방식

!important;는 스타일시트 우선순위를 무시하고 가장 먼저 사용하는 속성입니다.

단, 해당속성 남발은 ㅠ 추후 수정에 어려움이 있으므로, 자제!!


그래서 위 설명을 정리해 보면 아래와 같이 소스 코드가 나옵니다.


/*공감 가운데 정렬 CSS*/
.container_postbtn {text-align:center;}
.container_postbtn .postbtn_like{display:inline-block;float:none!important}


그럼 해당 코드를 복사해서, [관리자페이지] → [스킨 편집] → [html/css편집]  → [CSS] 영역에 붙여넣기




그러면 아래와 같이 공감 버튼이 가운데 정렬이 됩니다.^^ 눌러주세요!!

↓↓↓↓↓↓↓

댓글을 달아 주세요

  1. 동동 2018.04.03 17:38 신고

    모바일에서 공감 버튼을 누르려고 하면 공감서비스를 이용할 수 없다고 뜨던데 이유를 아시나요? 다시 확인해보니 사파리를 사용하는 경우에 그러네요.

    • BlogIcon COCOSOFT COCO Media 2018.04.03 18:03 신고

      안녕하세요. 확인해보니, 아이폰에서 정상적으로 잘눌러지는 것을 확인했습니다. 일부게시글에서 ㅠ 해당현상이 나타나는 것으로 확인했는데, 해결방법은 없는 것 같아요. https://cs.daum.net/faq/372/15565.html?faqId=30840 고객센터도 일시적인 오류로 고치겠다고만 하네요.

    • 동동 2018.04.03 20:46 신고

      감사합니다. 코코 소프트님 블로그 보면서 늘 배워갑니다. 오늘 집에 들어가면 이것도 한번 해봐야겠어요 ㅎㅎ

  2. BlogIcon 다한(dahan) 2018.07.27 13:16 신고

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

  3. BlogIcon 장대군 2018.10.11 23:40 신고

    코코소프트님 덕분에 공감버튼을 쉽게 변경했습니다. ^^ 좋은 정보 감사드려요~

티스토리 툴바