티스토리 fastboot 스킨 상단 이미지 변경방법

얼마전 제 방명록에 상단이미지를 변경해서 블로그 소개를 하시고 싶다는 분이 계셨는데요. 블로그 꾸미기를 요즘 안하고 있는데, 오래만에 포스팅 꺼리가 생겼습니다. 티스토리 fastboot 스킨의 경우 원래 소스 자체에 상단에 이미지가 없기 때문에 기본 제공 양식대로 사용하실려면 커스텀이 필요합니다. 특히 이미지 사이즈를 조절하지 못하시면 스킨이 밀려 댓글창에 아래로 이미지가 밀리는 현상이 생길 수가 있는데요. 한번 차근차근 준비해서 진행을 해보도록 하시죠.

 

 

2017/09/03 - [블로그/운영노하우] - 블로그 방문자가 갑자기 증가하면 저품질이 될까?

2017/09/01 - [블로그/운영노하우] - 애드센스 수익이 안나와서 답답해하시는분들께

2017/08/29 - [블로그/검색엔진최적화] - 티스토리 네이버 RSS 등록 방법 안내

2017/08/25 - [블로그/수익노하우] - 애드센스 실적이 우수한 광고 안내

2017/08/22 - [블로그/운영노하우] - 티스토리 중복 로그인 과연 안전할까?

 

 

티스토리 fastboot 스킨 상단 이미지 변경방법 안내

 

우선, 제 블로그의 경우 상당히 커스텀이 많이 들어간 상태입니다. 포스팅을 하기 위해서 원 소스를 살펴봐야 하는데, 제가 다른 블로그에 테스팅을 할 수가 없어서 설명이 제대로 안될 경우도 있을 수 있기에 질문이 있으시면 댓글로 남겨주시기 바랍니다.

 

fastboot 스킨의 경우 상단이미지는 데스크탑 크기에서만 나타나며, 모바일에서는 해당이 되지 않습니다. 따라서 적절한 데스크탑 이미지사이즈만 준비해주고 스킨에서 지정만 해주면 간단하게 설정이 가능한 부분이니 잘 응용해서 상단 이미지를 변경 해보시기 바라겠습니다.

 

문제는 제가 커스텀을 하면서 스킨의 사이즈가 틀어진 부분인데요. 제가 올린 이미지 사이즈와 여러분들이 fastboot를 적용한 상단의 크기가 다를겁니다. 그걸 염두해두고 작업을 해주셔야 할것 같네요.

 

샘플상단 이미지 : title.zip

위의 이미지는 샘플 이미지로서 이미지 높이가 100px로 되어있는데요, fastboot 원래 크기는 130px입니다.

 

 

 

 

1. 변경된 타이틀 이미지 업로드

 

이제 여러분들이 바꾼 이런 이미지를 티스토리에 첨부를 해주셔야 합니다. 스킨 편집 메뉴로 들어가주세요.

 

 

 

요즘 티스토리가 확바꼈는데, 기본구조는 똑같으니 HTML/CSS편집 메뉴를 잘 찾아주세요.

 

 

다음과정은 여러분들이 수정하신 title.jpg를 올려주시는 과정이 남았습니다. 상단의 [파일업로드] 하단의 [추가] 버튼을 클릭하셔서 이미지를 업로드 해주세요. 여기까지가 기본과정이며, 제대로 하셨다고 해도 아무런 변화가 없습니다.

 

그리고 title.jpg 파일의 경우 2단으로 구성이 되어있습니다.

 

 

제 캐릭터 위아래로 색이 다른 띠가 있는데요. 이건 스크롤을 하게 되면 상단이 사라지고 아래쪽은 남기 때문에 일부러 이런 식으로 구성을 하였습니다. 샘플이미지로서 잘 수정해보시기 바라겠습니다.

 

 

2. CSS 수정

이제 첨부한 파일을 매칭시켜주는 CSS영역을 수정하여 보겠습니다. 기본적으로 바꿔줘야 할부분은 소스를 건드리지 않고 추가를 하는 방식으로 간편하게 진행하면, 혹시라도 문제가 생길때 제거를 해주시면 간단하게 처리가 가능합니다.

 

 

 

CSS영역에 들어오세셔 문단 제일 마지막에 아래 문구를 추가하여 주세요.

 

/* 상단 배경 이미지 추가 2017-09-04 */

 

#desktopNav {background-image:url('images/title.jpg');height:100px;}
#desktopNav p.rightMenus a {color:white;}
#desktopNav .graylink a {color:white;}

 

 

첨부소스 다운로드 : CSS소스.zip

 

문구가 어려워 보이실 수도 있는데요. 차분히 보시면 별로 어려울게 없습니다. 우선 제가 샘플로 올린 이미지로 사용을 하실꺼라면 상단의 내용을 그대로 사용하시면 됩니다. 제 경우에는 height를 100px로 세팅하였습니다. 그래서 이미지도 100px로 높이를 맞췄죠.

 

fastboot 기본 사이즈를 그대로 가신다면, 130px로 바꿔서 이미지를 올리고 상단의 문구도 수정을 해주셔야 합니다.

 

다음으로 color:white 이부분은 링크되는 메뉴의 색상을 화이트로 하겠다는 말입니다. black, red, green, yellow 등 기본적으로 알고 계시는 색상을 사용하시면 되며, 혹시라도 커스텀 색상을 원하시면 색상표를 찾으셔서 기입하시면 됩니다.

 

부가적으로 스크롤될때 줄어든 사이즈는 90px인데 이걸 고려해서 타이틀 이미지를 잘 만들어 보시기 바라겠습니다.