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

블로그

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

 

환경: Internet Explorer 11

 

티스토리를 사용하시는 분들은 보통 제공하는 스킨을 적용해서 블로그를 만들게 됩니다. 시간이 지나면 식상한 느낌이 들어 이것저것 손대게 되죠. 그 중에 하나가 상단에 타이틀 이미지 입니다. 오늘 소개할 타이틀 이미지 변경 방법은 모든 스킨에 적용되는 것은 아닙니다. CSS HTML 소스가 조금씩 틀리기 때문에 타이틀 이미지의 소스 위치가 다를 수 있습니다. 그래서 크롬의 개발자 도구를 이용해 타이틀 이미지의 소스 위치를 찾아야 합니다.

 

¤ 이미지 올리기

 

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

 

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

 

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

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

 

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

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

 

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

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

 

¤ 소스 변경해서 적용하기

 

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

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

 

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

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

 

 

Posted by 녹두장군