본문 바로가기
블로그팁

티스토리 반응형 스킨_Flatinum_로고 및 헤드슬라이드 이미지 수정하는 법

by reviewer_life 2018. 2. 12.
반응형

안녕하세요! 우기블로그입니다. 우기블로그는 최근까지 사용해온 부트스트랩 스킨을 바꿔보았습니다. 이번에 티스토리측에서 지원하는 여러가지 반응형 스킨 중에서 우측배너를 지원하는 Flatinum 플래티튬이라는 반응형 티스토리 스킨으로 변경하게 되었습니다. 



반응형 티스토리 스킨 

Flatinum 


제작하신 분의 노고로 저는 쉽게 반응형으로 갈아탈 수 있었습니다. ^^* (이 자리를 빌려 만들어 주신 스킨 제작자님께 감사를 전합니다. ^^)


그런데 문제는 상단에 있는 커다란 헤드슬라이드 이미지가 변경해야 하는 건데요. 제 경우에는 미리 만들어둔 헤드이미지가 있기에 그걸로 변경하고 싶었습니다. 그래서 이미지 변경을 했고, 혹시나 헤드이미지 변경을 모르시는 분들을 위해서 간단한 방법을 알려드립니다. 


# 상단에 있는 거대한 슬라이드 이미지_메인헤드이미지 수정하는 방법 


지금은 변경되어 있는 제 블로그 헤드이미지입니다. 

슬라이드방식이라 몇가지 다른 색깔로 쓰면 좋아서 

여러 색을 만들어 두었습니다. 



가장 간단한 변경 방법은 자신의 티스토리 블로그 관리자에 들어갑니다. 

왼쪽 메뉴에서 스킨편집 메뉴에 들어갑니다. 


오른쪽에 스킨편집 창이 뜨는데, html 편집 메뉴를 찾아서 들어갑니다. 

그러면 이번에는 파일 업로드라는 메뉴가 나올텐데 

거기로 들어가면 아래와 같은 목록이 나옵니다. 




우리가 찾는 이미지는 맨 아래에 세개입니다. 파일 용량도 너무 크고, 이미지 로딩 시간을 꽤나 걸리게 할 수 있는 크기네요. ^^ 여하튼 images/slider_01~03까지를 덮어 씌워주면 됩니다. 


크기는 헤드슬라이드 이미지를 다운받아보시면 이미지 사이즈를 알 수 있습니다. (본인 블로그에서 헤드 슬라이드 이미지 위에 커서를 가져가서 마우스 우클릭_다른이름으로 그림 저장) 


저는 가로 사이즈는 똑같게 하고, 세로 사이즈는 줄였습니다. 반응형이라서 줄여도 줄인대로 나오기 때문에 사이즈가 꼭 같지 않아도 됩니다. 


포토샵이나 일러스트레이터 혹은 윈도우 그림판을 이용해서 원하는 이미지를 제작한 다음 PNG형식의 그림 파일로 저장하고, 위에 있는 images/slider_01, 02, 03과 같이 똑같은 제목을 달아주면 됩니다. 


그리고 마지막으로 업로드 버튼을 누르고, 파일을 업로드 시켜주면 이미지 파일이 덮어씌워집니다.


! 덮어씌웠는데, 적용이 안되요~ 하시는 분은 크롬이나 익스플로러 임시파일을 정리하고, 다시 실행시킨 후에 보시면 적용되어 있을 겁니다. 저도 크롬에 쌓인 캐시 때문에 바로 적용된 화면이 안나오더군요. 그래서 크롬 메뉴에서 인터넷사용기록을 삭제해보면 됩니다. (쌓여 있는 임시파일 캐시들을 삭제하면 됩니다) 


!로고 역시 변경할 수 있습니다. 저는 제 블로그 네임을 사용하는 로고 그림을 images/logo_shrink.png 파일에 덮어 씌워줬습니다. 


그럼 오늘도 즐거운 하루되세요~! 

반응형