티스토리 Letter 스킨 메뉴/검색 버튼 위치 변경

안녕하세요.

티스토리 Letter 스킨의 레이아웃 기본값은 메뉴, 검색 버튼 위치가 포스팅 영역에 비해 멀리 떨어져 있습니다. 개인 취향에 따라 버튼을 포스팅 영역에 맞추어 이동시키고 싶은 경우 어떻게 CSS 속성을 편집하는지 알아보겠습니다.

블로그 기본 레이아웃입니다. 위의 그림처럼 메뉴, 검색 버튼이 각각 좌측, 우측으로 쏠려있습니다.

먼저 크롬 개발자 도구의 선택 도구로 포스팅 영역을 선택하여 CSS 속성 값을 확인해보면 최대 넓이가 1024px로 설정되어 있습니다.

다음으로 제목 영역을 선택해보면 최대 넓이가 1600px로 설정되어 있는 것을 확인할 수 있습니다. 그리고 해당 속성 값은 CSS 517행부터 시작되는 것을 알 수 있습니다.

티스토리 HTML 편집기에서 CSS 속성 517행 영역을 찾은 다음 max-width 값을 1024px로 변경합니다.

블로그 메인 화면을 새로 고침 해보면 위의 그림처럼 제목 영역의 넓이가 줄어듬에 따라 버튼의 위치도 안쪽으로 이동되었습니다. 이제 버튼의 위치를 포스팅 영역과 조화가 되도록 편집해보겠습니다. 

크롬 개발자 도구의 선택 도구로 메뉴 버튼과 검색 버튼을 각각 선택해보면 버튼의 위치를 정의하는 CSS 속성 값을 확인할 수 있습니다. 각각 2100행, 2104행부터 해당 속성 값이 정의되어 있습니다.

[메뉴 버튼] left: 60px; -> left: 0px;

[검색 버튼] right: 60px; -> right: 0px;

HTML 편집기에서 2100행, 2104행 영역을 찾은 다음 각각 위와 같이 값을 변경한 후 적용을 클릭합니다.

이제 블로그 메인 화면을 새로 고침 해보면 위의 그림처럼 버튼들의 위치가 바깥쪽으로 옮겨졌음을 확인할 수 있습니다. 여기까지 Letter 스킨의 메뉴 버튼, 검색 버튼 위치 변경에 대하여 알아보았습니다.

 

행복한 하루 보내세요.

감사합니다.