티스토리 Flatinum 스킨 검은색 상단 바 폭 줄이기

안녕하세요 버블입니다.

이번 포스팅에서는 Flatinum 스킨의 스크롤 바를 아래로 내리면

같이 따라 내려오는 검은색 상단 바의 크기를 줄이는 방법에 대해서 알아보겠습니다.

지난 포스팅들을 통해 스킨의 상단 이미지, 로고, 배너 등을 제거 하고 변경했으며

앞으로도 제 입맛에 맞게끔 스킨을 조금씩 고쳐 나아갈 예정입니다.

지난 포스팅을 보지 않으신 분들은 아래 링크를 통해 이전 포스팅들을 보실 수 있습니다.

티스토리 Flatinum 스킨 상단 로고 변경하기

티스토리 Flatinum 스킨 상단 이미지 변경하기

티스토리 Flatinum 스킨 상단 이미지 제거하기

티스토리 Flatinum 스킨 상단 공지사항 배너 제거하기

아래는 수정 전의 검은색 상단 바 이미지와 변경하고자 하는 상단 바 폭 넓이의 비교 이미지 입니다.

상단바의 상하 폭이 너무 넓다면 우선 블로그에 들어오게 되면 화면의 많은 부분을 상단바가 차지하기 때문에

가독성이 떨어지고 스크롤을 내릴 때 역시 화면의 상단을 많이 가리기 때문에 상단바의 크기를

비교적 작게 변경하여 깔끔한 블로그 페이지를 만들어 보기로 하였습니다.

 

이전의 포스팅들을 보고 오신 분들이라면 스킨편집에 어느정도 익숙해 지셨기 때문에

큰 어려움 없이 크기를 수정하실 수 있습니다.

상단바의 크기를 더 작게 혹은 더 크게 변경하고자 하시는 분들은 이번 포스팅을 응용하셔서

입맛대로 변경하시면 됩니다.

블로그 관리모듈의 꾸미기 탭에서 스킨 편집을 클릭해 주겠습니다.

스킨편집으로 이동 하셨으면 html 편집을 클릭해 주시면 됩니다.'

늘 HTML탭을 클릭했지만 이번에는 CSS탭을 클릭해 주신 뒤

Ctrl + F를 눌러 아래의 이미지와 같이

shrink .navbar-nav 를 찾아주시면 됩니다.

 

이 중 우리가 사용할 소스는 아래 이미지에 표시되어 있는 부분입니다.

저는 임의로 위의 padding을 10px로 변경하고 아래 padding을 5px로 변경 해 보겠습니다.

원래 소스를 변경한 후 상단의 새로고침을 클릭하여 확인후 적용이 되었다면 저장을 하는데

이상하게 저는 새로고침을 눌러도 적용이 안되길래 그냥 저장했더니 블로그 화면에서는

제대로 적용된 것을 확인할 수 있었습니다.

혹시 새로고침을 눌러도 변경이 없으신 분들은 그냥 적용을 눌러 저장하시고

블로그 홈화면을 새로고침 한 뒤 확인해보시면 됩니다.

적용 완료 한 블로그 홈 화면 입니다.

이전과 비교했을 때 상단바의 크기가 확실히 줄어든 모습을 확인하실 수 있습니다.

소스를 수정하기 이전의 원본 화면과 비교삿 입니다.

   

이상으로 티스토리 Flatinum 스킨 검은색 상단 바 폭 줄이는 방법에 대한 포스팅을 마치겠습니다.

초보분들의 경우에는 제 포스팅을 보시며 따라하시다 보면 노하우가 생겨 나중에는

자신의 입맛대로 스킨을 변경하실 수 있습니다.

블로그를 처음 접하시는 분들도 제 글을 보고 쉽게 따라하실 수 있도록

알아보시 쉽게 포스팅을 진행하도록 노력하겠습니다.

스킨을 수정하시다 잘 안되는 부분이나 어려우신 부분들은 댓글로 남겨주시면

제가 아는 한도 내에서 도와드리도록 하겠습니다.