티스토리 Flatinum 스킨 상단로고 변경하기

안녕하세요 버블입니다.

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

티스토리에는 깔끔하고 예쁜 스킨이 정말 많이 있지만 저는 개인적으로

Flatinum스킨의 깔끔함이 가장 마음에 들었기 때문에 이 스킨을 선택했고

앞으로의 포스팅의 기반도 Flatinum 스킨이 될 예정입니다.

플래티넘 스킨은 자유롭게 수정이 가능하며 저작권 표시 하에 재배포도 가능하다고 표시가 되어 있습니다.

하지만 저는 재배포까지는 생각이 없고 제 입맛에 맞춰서 변경 후 사용하고 있습니다.

그렇다면 플래티넘 스킨의 상단로고를 변경해 보겠습니다.

아래 이미지는 변경 예정인 상단 로고입니다.

사실 플래티넘 스킨의 상단로고도 글씨체가 못나지 않았기 때문에 그냥 사용해도 무관하지만

저는 그래도 제 블로그의 이름을 넣어보고 싶기 때문에 로고를 변경하기로 했습니다.

로고를 변경하려면 자신이 원하는 로고를 제작해야 합니다.

저는 포토샵 프로그램을 이용하여 로고를 제작해 보겠습니다.

굳이 제작하지 않고 미리 준비한 로고이미지가 있으시다면 이 과정을 건너 뛰셔도 좋습니다.

저는 작은 로고를 좋아하기 때문에 가로 540에 세로100, 540x100으로 로고 크기를 설정하였습니다.

만약 자신이 더 크거나 작은 로고사이즈를 원하신다면 과정은 동일하기 때문에 임의로 변경하셔도 좋습니다.

여기서 주의하셔야 될 점은 플래티넘 상단로고는

이미지의 백그라운드 배경을 투명하게 설정해야 제대로 적용이 됩니다.

레이어를 새로 만드실 때 아래의 이미지와 같이 크기를 설정하신 뒤 반드시

아래 Background Contents에서 Transparent로 설정해 주셔야 합니다.

레이어 백그라운드를 투명하게 설정하면 아래와 같이 체크무늬의 배경이 생성됩니다.

레이어를 만드셨다면 자신이 원하는 이미지를 삽입하거나 로고 글씨를 입력하시면 됩니다.

저는 Bubble Test라는 로고를 입력하였습니다.

로고 제작을 완료하셨다면 이미지파일로 저장하시면 됩니다.

여기서도 주의하셔야 될 점이 한가지 있습니다.

보통 이미지 파일은 jpg, jpeg로 저장하시는게 일반적인데 티스토리에 올라갈 로고는

아래 이미지와 같이 반드시 png형식으로 저장해 주셔야 합니다.

제작한 로고를 저장하셨다면 티스토리 관리자 모듈의 꾸미기탭에서 스킨편집으로 이동하시면 됩니다.

이제 어느정도 익숙한 화면일 것입니다.

스킨편집으로 이동하셨다면 늘 그래왔듯이 html편집을 클릭하시면 됩니다.

html편집으로 이동하시면 아래와 같이 상단에 HTML, CSS, 파일 업로드라는 3개의 탭이 있습니다.

여기서 이번에는 파일업로드탭을 클릭하신 뒤 하단의 추가 버튼을 클릭하여

아까 제작한 로고를 추가해 주시면 됩니다.

제작한 로고를 추가하시면 아래와 같이 추가된 모습을 확인하실 수 있습니다.

이제 로고를 변경하기 전 아래 이미지를 보시면

logo_shrink.png라는 파일이 있습니다. 이 이미지파일은 현재 플래티넘 스킨의 상단 로고입니다.

이 원본 로고를 삭제한 뒤 새로 제작한 로고의 이름을 변경하여 적용시키는 방법도 있지만

자잘한 오류가 발생하는 경우가 있기 때문에 다른 방법을 사용해서 상단 로고를 변경해 보겠습니다.

제작한 로고를 파일업로드 탭에 추가 하셨다면 다시 위로 올라와 HTML탭으로 들어가신 뒤

Ctrl + F(찾기)를 활용해 원본 로고 소스를 찾아주시면 됩니다.

Ctrl + F를 입력하신 뒤 logo_Shrink를 입력해주시면 쉽게 찾으실 수 있습니다.

아래의 이미지와 같이 logo_Shrink를 찾아주시면 됩니다.

아래의 소스를 간단하게 설명드리자면

'현재 상단 로고가 존재하며 상단로고의 이미지는 logo_Shrink를 사용하고 있다'라는 뜻입니다.

그렇기 때문에 우리는 이 소스에서 logo_Shrink를 새로 제작한 로고이미지를 사용하게끔 변경해 주면 됩니다.

아래와 같이 logo_Shrink부분을 아까 업로드한 로고의 이름으로 변경 해 주시면 됩니다.

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

변경을 완료하셨다면 이제 소스가 '현재 상단 로고가 존재하며 상단로고의 이미지는 BubbleTest를 사용하고 있다'

라는 뜻으로 변경이 됩니다.

변경이 완료되셨다면 적용하기 전에 새로고침 버튼을 클릭해서 로고가 적용이 되었나 확인해 주시면 됩니다.

아래와 같이 상단 로고가 변경 된 것을 확인하실 수 있습니다.

오류가 없다면 우측 상단의 적용을 클릭하여 완료하시면 됩니다.

이렇게 Flatinum스킨 상단 로고 변경하는 방법에 대해서 알아보았습니다.

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

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

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

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