[티스토리] 스킨헤더(메뉴바) 고정방법

티스토리 페이지 상단에는 메뉴바가 있습니다.

사이드바에 카테고리나 링크를 놓는 경우도 있지만 사이드바가 없는 경우도 있으니 사이트내 재유입을 위해서도 메뉴가 있는 것이 좋습니다. 콘텐츠를 보느라 스크롤을 내려도 상단의 메뉴가 없어지지 않도록 설정해 보겠습니다.

 

 

< 메뉴바 고정방법 >

 

목차(Contents)

 

스킨헤더(메뉴바)

상단에 고정하려는 부분은 아래 이미지를 참조하시기 바랍니다. 제 티스트리 화면을 캡쳐했습니다.

< 페이지 상단 메뉴부분 >

 

위에 빨간박스 부분을 고정하면 스크롤을 내리면서 포스팅 내용을 읽더라도 다시 위로 올리지 않고 카테고리를 이동할 수 있습니다.

새로운 방문자를 늘리는 것도 중요하지만 이미 들어온 방문자의 체류시간을 늘리면 더 좋지 않을까요?

 

스킨헤더(메뉴바) 고정방법

헤더(메뉴바)를 고정하는 방법은 간단한편입니다. CSS수정만으로도 적용할 수 있습니다.

스킨의 종류에 따라 명칭이 다를 수는 있지만 거의 유사하니 제가 작성한 내용을 참고하시기 바랍니다.

전 whatever를 사용하고 있습니다.

 

일단, 블로그관리에서 html편집 > CSS탭 순으로 이동합니다.

 

< 블로그관리 - html편집 >

 

CSS소스에서 #header로 이동합니다. 소스부분을 클릭한 후 Ctrl + F로 검색을 하실수도 있습니다.

그리고 나서 아래 소스를 참조하시어 변경하세요.

변경된 부분은 position: relative;를 position: fixed;로 수정하였습니다.

 

#header {
	/*헤더 고정 전
	position: relative;*/
	/*헤더 고정 후*/
	position: fixed;
	width: 100%;
	height: 75px;
	top: 0px; left: 0; z-index: 999;
	background-color: #FFFFFF;
	border-bottom: 1px solid #e6e6e6;
}

 

< 헤더(메뉴바) 고정결과 >

 

위의 이미지처럼 스크롤을 해도 메뉴바는 남아있고 포스팅내용만 위로 올라갑니다.

방문자들이 메뉴를 클릭할 확률이 조금이나마 올라갔다고 할 수 있겠죠..?

 

추가, 만약에 상단에 광고나 카테고리목록이 짤리는 경우...

CSS에서 body에 padding-top: 30px; 을 추가하셔서 상단에 여백을 주시면 됩니다.(30~50px이 적당)

가리는게 사이즈에 따라 숫자 조절 하시면 되겠습니다.

메뉴바에 광고 가려지는 부분이 생기면 애스센스나 애드핏이 싫어해요.