티스토리 블로그 헤더박스 제거하고 타이틀 이미지 올리기

안녕하세요. 오늘은 별거 아니지만 저같은 티스토리 초보자를 위한 간단한 팁을 알려드리려고 해요.

바로 티스토리 블로그의 상단에 헤더박스를 없애는 방법인데요.

처음에 html을 모르는 상태로 티스토리 블로그에 입문하면 대부분이 막막할 거에요.

하지만 어느 분야든 마찬가지겠지만

이것저것 건드려 보고 실험해 보는 과정이 점점 고수로 가는 길이 아닐까 싶네요 ㅋㅋ  

 

 

 

각각의 스킨에 따라 다르겠지만 저와 비슷한 형식의 스킨이라면

사진처럼 블로그 상단에 검정색의 박스가 있을 건데요.

이름하야~~ 헤더박스입니다.

 

이 헤더박스는 제 블로그의 디자인에도 맞지 않을 뿐더러

창 사이즈를 축소시키거나 할 경우에는

사이즈가 조절이 안 되기 때문에 상당히 걸리적 거리는 존재였습니다.

이제 이 헤더박스를 과감하게 제 프로필 사진의 안드로메다로 날려버리겠습니다.

 

관리자 모드에서 HTML/CSS편집으로 들어갑니다.

그리고 Ctrl + F 찾기해서 header를 찾아주세요.

Skin.html 창에 보면 <div id="headerBox"> 부분이 있을 겁니다.

(스킨마다 다를 수 있으니 미리 백업을 해두세요)

 

이제 이 보기 싫은 헤더박스 녀석을 Delete의 도움을 받아서 영원히 안드로메다로 보내버립니다.

 

헤더박스가 지워지고 깔끔하게 정리가 되었죠 ㅎ^^ㅎ

 

 

 

덤으로 타이틀 이미지 올리는 방법입니다. 

타이틀 이미지 올리는 방법은 검색해 보면 무진장 많은데요.

굳이 올릴 필요는 없지만 제가 자꾸 까먹기 때문에 기록하는 목적으로 포스팅 합니다.

우선 포토샵이나 다른 디자인 툴로 타이틀 이미지를 만들어 주세요.

저는 PNG 파일로 만들었는데요.

 

다음은 역시 관리자 모드에서 HTML/CSS 편집으로 들어가서요.

파일업로드를 누르고 추가 버튼을 누릅니다.

 

방금 만든 따끈따끈한 타이틀 파일을 열고요.

 

마우스 우측 클릭하여 나오는 메뉴 중에서 속성을 선택해 주세요.

 

주소를 복사하면 되는데요.

파란색 드래그 된 부분까지만 (물음표 앞까지) 복사하면 됩니다.

 

그리고 아까 헤더박스를 쫓아낸 장소 밑에 보시면

Img src  부분이 있을 겁니다.

 

<img src = " "> 이 부분인데요.

방금 복사한 주소를 " " 큰따옴표 사이에 붙여넣기 하시면 됩니다.

 

처음에 이미지 적용하고 확인해 보면 타이틀 이미지가 99.99% 블로그 사이즈와 맞지 않을 거에요.

이때는 이미지 사이즈를 다시 조절한 다음 똑같은 방법으로 적용하시면 해결이 됩니다.