티스토리 헤더 타이틀 이미지 변경, 교체하는 방법

티스토리 헤더 타이틀 이미지 변경, 교체하는 방법

 

환경: Chrome

 

티스토리를 사용하시는 분들은 기본적으로 제공하는 스킨을 이용해서 블로그를 만듭니다. 디테일한 수정을 위해서는 HTML 에디터를 통해서 직접 수정해야 합니다. 그 중 하나가 상단에 타이틀 이미지 입니다. 오늘 소개할 타이틀 이미지 변경 방법은 모든 스킨에 적용되는 것은 아닙니다. CSS 나 HTML 소스가 조금씩 틀리기 때문에 타이틀 이미지의 소스 위치가 다를 수 있습니다. 그래서 크롬의 개발자 도구를 이용해 타이틀 이미지의 소스 위치를 찾는 방법도 알려 드리겠습니다. 

 

¤ 이미지 올리기

 

▼ 아래 그림처럼 타이틀 이미지는 제일 상단에 이미지를 말합니다. 이 이미지를 교체하기 위해서는 티스토리 파일 서버에 올려야 합니다. 그리고 CSS 나 HTML 소스를 수정해야겠죠. 

 

▼ 로고 이미지를 올리기 위해 티스토리 관리자 페이지로 접속합니다. 그리고 왼쪽 메뉴에서 [꾸미기] > [스킨변경]을 선택합니다.

▼ 사용 중인 스킨에서 [스킨 편집] 버튼을 클릭합니다. 왼쪽 사이드 메뉴에서 [꾸미기] > [스킨 변경] 을 누르면 바로 이동할 수 있습니다. 

▼ 스킨 편집 페이지 상단에서 [HTML 편집] 버튼을 클릭합니다. 

▼ HTML/CSS 편집 창에는 3개의 탭이 있습니다. 그 중에서 제일 오른쪽에 있는 [파일업로드] 탭을 클릭합니다. 블로그 디자인에 쓰이는 모든 이미지 파일들은 이곳에 있습니다.

 

▼ [파일업로드] 화면에서 파일을 올리기 위해 하단에 있는 [추가] 버튼을 클릭합니다. 마우스를 파일에 가져가면 미리보기가 되므로 제대로 올라 갔는지 확인할 수 있습니다.

 

¤ 소스 변경해서 적용하기

 

▼ 그럼 소스를 변경해 볼까요? 위에서 이야기 했듯이 스킨마다 조금씩 틀리기 때문에 자신의 블로그에서 타이틀이 위치한 소스를 확인하는 방법에 대해 아는 것이 중요합니다. 크롬을 실행하고 개발자 도구를 띄운 후 Elements 을 클릭합니다. 그리고 소스 위를 마우스로 이동하면 위 화면에 해당 소스 위치가 표시 됩니다. 타이틀이 나올 때까지 찾아 선택하시면 CSS 와 HTML 의 위치를 알 수가 있습니다. 

 

▼ 크롬으로 소스 위치를 파악했다면 다시 티스토리 관리자 페이지로 갑니다. 저 같은 경우 CSS 소스에 타이틀 이미지명이 있었기 때문에 그 부분을 수정해야 합니다. CSS 탭을 클릭해서 해당 소스를 찾은 후 올린 이미지 명으로 변경해 주시면 타이틀 이미지 변경이 완료됩니다.