본문 바로가기
고부가가치사업 이야기/티스토리를 꾸며보자

티스토리 Flatinum 스킨 상단 이미지 변경하기

by 무는슬이 2018. 12. 27.

누구나 쉽게 시작할 수 있는 티스토리


안녕하세요 버블입니다.


이번 포스팅에서는 Flatinum 스킨의 상단 이미지를 변경하는 방법에 대해서 알아보겠습니다.

지난 포스팅에서는 스킨 상단 로고를 제거하는 방법에 대해서 알아보았고

제 입맛에 맞게끔 스킨을 조금씩 고쳐나아갈 예정입니다.


플래티넘 스킨 상단 로고 변경하기


Flatinum 스킨의 특징은 스킨을 적용시키면

블로그 홈 최상단에 일정 시간으로 변동되는 이미지 3장이 걸려있는 것입니다.

물론 이 이미지를 그대로 가져가도 좋지만 사람의 취향에 따라

이미지가 맘에 들지 않아서 다른 이미지로 변경하고 싶은 경우도 있을 것입니다.


그렇다면 이미지를 다른 이미지로 변경는 방법에 대해서 알아보겠습니다.



자신이 원하는 이미지를 선택했으면 티스토리 상단 규격에 알맞게 크기를 보정해야 합니다.

플래티넘 스킨 상단 이미지의 규격은 1920x600이고 저는 포토샵을 이용해서 규격을 보정해 보겠습니다.

아래와 같이 레이어를 만들어 주시고 규격을 입력해 주신 뒤 백그라운드를 하얀색으로 선택해 주시면 됩니다.



규격에 맞게 레이어가 생성 되었으면 준비해 놓은 이미지를 레이어 크기에 맞춰주시면 됩니다.

플래티넘 스킨의 상단 이미지는 총 3장이기 때문에 3장의 로고를 제작해 주시면 됩니다.



이전 상단 로고제작할때와 동일하게 아래와 같이 로고의 이름은 영어로 입력해 주시고

파일 형식은 PNG파일로 저장해 주셔야 합니다.



로고 3장 제작을 모두 완료하셨다면 티스토리 블로그의 관리자 모듈로 이동하신 뒤

꾸미기 탭의 스킨 편집으로 이동하시면 됩니다.



스킨편집으로 오셨으면 언제나 그랬듯이 html편집으로 이동하시면 됩니다.



html편집으로 이동하시면 아래와 같이 HTML, CSS, 파일업로드라는 3개의 탭이 있으며

이 중 파일업로드를 클릭하신 뒤 하단의 추가를 클릭하셔서 아까 제작해 놓은 3장의 로고를 추가해 주시면 됩니다.




아래는 3장의 로고가 추가된 모습입니다.

저는 로고의 이름을 임의로 Bubble_logo_01 ~ 03이라고 저장했습니다.


상단 이미지를 변경하기 전 아래의 이미지를 보시면 파일업로드 탭의 이미지들 중

slider_01 ~ 03 이라는 3장의 이미지 파일이 있습니다. 이 3장의 이미지 파일들이 원본의 상단 이미지 파일입니다.

slider_01이라는 원본 이미지 파일 이름을 기억해두시거나 메모장에 옮겨 적어 놓으시면 좋습니다.


제작한 로고 3장을 파일업로드 탭에 추가하셨다면 위로 올라가셔서 HTML탭을 클릭하신 뒤

아까 기억하시거나 옮겨적어놓았던 원본 상단 이미지인 slider_01 부분을 찾아주셔야 합니다.

Ctrl + F 를 누른 뒤 slider_01를 입력하시면 쉽게 찾으실 수 있습니다.

아래의 이미지를 보시면 빨간색 사각형 안의 빨간 밑줄로 그어져 있는 부분에서

slider_01, 02, 03을 찾으실 수 있습니다.

이 파일 이름들을 아까 제작한 로고의 이름들로 변경해 주시면 됩니다.

다른부분은 건드리지 마시고 slider_01 부분만 변경해 주시면 됩니다.



아래와 같이 변경해 주시면 됩니다.



변경을 완료하셨다면 새로고침을 눌러 이미지가 제대로 변경되었는지 확인 해 주신 후

오류가 없다면 우측 상단의 적용을 클릭하여 저장 해 주시면 됩니다.





이과정까지 완료하셨다면 상단 이미지 변경이 완료되었습니다.

초보분들의 경우에는 제 포스팅을 보시며 따라하시다 보면 노하우가 생겨 나중에는

자신의 입맛대로 스킨을 변경하실 수 있습니다.

블로그를 처음 접하시는 분들도 제 글을 보고 쉽게 따라하실 수 있도록

알아보기 쉽게 포스팅을 진행하도록 노력하겠습니다.