2017년 12월 4주차에 변경된 티스토리 공감 버튼 위치 수정하기

1. 바뀐 공감 버튼

이번에 티스토리 공감 버튼 모양이 바뀌었습니다.

지난주 언제인가에 바뀐 것 같아요.

별로 확실하지 않은 기억이지만 20일 수요일 저녁에 변한 것을 처음 봤습니다.

변경 전 공감 버튼은 이제 볼 수가 없어서 다른 블로그에서 이미지를 퍼왔는데 저렇게 생겼었습니다.

그 공감 버튼은 개인적으로는 티스토리에 블로그를 만든 계기입니다.

저는 구글로 검색해서 나오는 웹페이지 중에서 블로그마다 붙어 있는 저 버튼 때문에 티스토리라는 플랫폼에 대한 인식이 생겼거든요.

티스토리 블로그의 트레이드 마크 같은 것인데 없어져서 아쉽네요.

위 이미지처럼 커다란 공감 버튼을 없애고 관물대 정리정돈의 고수 마냥 각 잡아 놓은 것이 이번에 변경된 새로운 디자인입니다.

이런 디자인을 고치는 것은 기존 양식에 적응해서 이용하고 있는 사람들을 불편하게 만드는 일입니다.

공지사항 말 한 마디 없이 수정한 것도 작게 만들어서 눈에 잘 띄지 않는 귀퉁이로 옮겨간 것도 마음에 안 들지만 그냥 그러려니 하고 쓰도록 하겠습니다.

2. 공감 버튼을 가운데로 옮기기

바뀐 모양은 그냥 그렇다 치고 간단하게 위치만이라도 바꿔 보려고 합니다.

새로운 공감 버튼을 예전처럼 본문 한가운데로 옮기고 싶습니다.

먼저 얘 이름을 알아야 합니다.

브라우저의 개발자 도구로 어떤 엘리먼트인지 확인해 봅시다.

공감 버튼이 들어있는 상자의 이름은 div.postbtn_like입니다.

div.container_postbtn은 본문 하위에서 공감 버튼 상자를 감싸고 있는 레이아웃 요소입니다.

div.postbtn_like가 들어있는 div.container_postbtn의 너비는 본문 영역의 너비에 맞도록 설정되어 있습니다.

그러니까 div.postbtn_like 상위의 레이아웃인 div.container_postbtn의 내용물 서식을 가운데 정렬로 수정하면 공감 버튼을 수평 중앙으로 보낼 수 있을 것입니다.

블로그 스킨에 아래 CSS를 추가합니다.

div.container_postbtn {
	text-align: center;
}

div.container_postbtn div.postbtn_like {
	float: none;
	display: inline-block;
	margin: auto;
}

다음은 적용 후 모습입니다.

끝!