설치형 블로그 티스토리의 메인 이미지 바꾸기 두번째입니다.

설치형 블로그 티스토리의 메인 이미지 바꾸기 첫번째에서는 CSS 소스창에 이미지 파일명을 수정하여 자신이 원하는 메인 이미지로 교체할 수 있다고 말씀 드렸습니다.

스킨에 따라서 메인 이미지가 CSS소스말고 HTML 창에 소스가 있을 수도 있습니다.

저의 또다른 블로그 스킨을 예로 메인 이미지 바꾸기를 두번째로 설명하겠습니다.

저의 또 다른 블로그 리포트-조의 메인 이미지입니다. 티스토리 스튜디오란 스킨으로 블로그를 생성한 것이며 메인 이미지를 바꾸려고 합니다.

설치형 블로그 티스토리의 메인 이미지 바꾸기 첫번째에서 설명 한 것과 크게 다른 것은 없으나 약간의 팁을 추가해보려 합니다. 메인 이미지 바꾸기 첫번째에서 처럼  관리자(admin) → 스킨 → HTML/CSS 편집 → 파일 업로드로 이동합니다.

우선 메인 이미지 파일명을 확인합니다. 그리고 오른쪽 상단에 있는 파일업로드를 클릭하여 바꾸고자 하는 이미지를 업로드 해 놓습니다.

예로 제가 업로드 한 이미지 파일은 main_img.jpg입니다. 이 이미지 파일로 메인 이미지를 바꾸려고 합니다.

바꾸려하는 이미지 파일을 업로드 한 후 HTML/CSS 편집 페이지로 이동합니다. 스킨 종류에 따라 HTML 또는 CSS 소스창에 메인 이미지 소스가 있을 것입니다. logo.gif을 드래그해서 쉽게 찾을 수 있다면 할 말이 없지만 찾기가 힘들다면 메모장을 이용하시는 것이 좋습니다.

메모장을 열고 Ctrl + A 단축키로 HTML 또는 CSS 소스창에 소스를 모두 선택해서 메모장에 Ctrl + V 단축키를 이용하여 붙여넣습니다.

그리고 메모장에 소스를 모두 붙여 넣었으면 편집 → 찾기를 클릭합니다.

찾을 내용 공란에 logo나 logo.gif를 입력하여 방향을 위로 또는 아래로 선택하고 다음 찾기를 클릭하면서 찾으시면 쉽게 코드 위치를 확일 할 수 있을 것입니다.

<!--블로그 이미지 모듈-->이라고 적힌 바로 위부분에 있는 것을 확인 했습니다. 그러면 HTML이나 CSS에서 찾은 소스 창으로 가서 확인합니다. 제가 예로 들은 리포트-조란 블로그의 스킨에는 HTML 소스창에 logo.gif가 있습니다.

HTML(skin.html) 소스창에 logo.gif 파일을 확인 했습니다. 이것을 바꾸고자 하는 이미지 파일명으로 수정하면 됩니다. 

logo.gif 소스 코드를 main_img.jpg로 변경하였습니다. 변경하였으면 바로 저장하는 것 보다는 미리보기로 변경후 상황이 어떤지 미리 보는 것이 좋습니다.

미리보기를 하니 좌측으로 작게 이미지가 출력 된 것을 확인 했습니다. 제가 업로드 한 파일은 이것보다 커야 하는데 이상합니다. 소스 코드를 다시 한번 확인해 봐야 할 듯 합니다.

소스 코드를 확인해 보니 가로(width)가 303(pixel)이고 높이(height)가 83(pixel)입니다. 제가 업로드한 main_img.jpg는 가로 652픽셀이고 세로 119픽셀로 작업한 것인데 가로 303, 높이 83으로 소스 코드가 입력되어 있습니다.

가로와 세로 사이즈를 원본 사이즈인 가로(width)가 652(pixel)이고 높이(height)가 119(pixel)로 수정하였습니다. 수정이 제대로 되었는지 미리보기를 클릭합니다.

제가 원하는데로 수정이 되었습니다. 마지막으로 가장 중요한 저장하기를 클릭합니다.