[Tistory] 블로그 스킨 수정 방법(구체적, 간단함)

안녕하세요!!!!

 

오늘은 블로그 스킨 수정 방법을 알아보겠습니다.

 

티스토리 블로그에서 제공하는 스킨은 HTML 코드를 수정해야만 바꿀 수 있는데요.

 

비전공자들이 이런걸 하기에는 굉장히 스트레스를 받을것 같아서 최대한 알기 쉽게 정리했습니다^^

 

목표 : PHOTO ESSAY를 내가 쓰고싶은 사진으로 바꾸기

준비물 : PHOTO ESSAY를 대체할 PNG 파일

WHY PNG? 배경색이 없는 글자를 넣어야 외부에 있는 검은색과 겹치지 않습니다. (블로그 스킨의 특성에 따라 다를 수 도 있으나 다른 스킨도 PNG를 해야 아마 색이 겹치지 않을것입니다. )

 

 

STEP 1. 내 PHOTO ESSAY 글자가 어디에 있는지 확인하기.

빨간 원을 바꿀것입니다.

제가 수정할 부분은 저 부분을 제가 원하는 글자로 바꾸는 것입니다.

 

STEP 2. 사용중인 스킨으로 가서 편집 누르기

STEP 3. 스킨편집 -> html 편집 누르기

STEP 4. 파일업로드로 가서 PHOTO-ESSAY 처럼 생긴 사진 찾기

처음에는 HTML에서 ctrl+f 로 PHOTO ESSAY를 쳐봤지만 나오지 않았습니다.

일반적으로 저기에 글씨로 쓰기보다는 사진으로 쓰는것이 훨씬 퀄리티가 좋아서 바로 파일 업로드 부분으로 가셔도 될 것 같습니다.

 

저기서 파일명에 마우스커서를 올리면 어떻게 생긴지 나타나는데 거기서 여러분이 바꾸고싶은 부분과 똑같이 생긴것을 찾습니다. 그리고나서 그 이미지 파일을 '삭제' 합니다

 

삭제를 한 후에는 내가 올리고 싶은 파일을 같은 이름으로 '추가' 를 이용해서 추가합니다.

 

저 같은 경우에는 title2.png가 그랬습니다. (*참고 : 파일명은 imgaes/title2.png가 아닌 title2.png만 하면 자동으로 imgaes/ 경로가 들어가게 됩니다!)

 

 

 

STEP 5. CSS태그 클릭 후 title2.png 찾기 (Ctrl+f 이용)

비전공자들이 보면 여기서 알 수 있는게 없습니다.

그냥 CTRL+F 로 같은 파일명을 찾습니다.

 

사실 저는 images/title.png -> images/title2.png 로 글자를 바꿔줬습니다. 

그 이후에 STEP4로 가서 원래 있던 title.png 파일을 삭제 후 title2.png를 추가했습니다.

 

하지만 내 마음대로 PNG파일을 가져오면 SIZE가 안맞아서 잘릴것입니다.

저는 PPT에서 그냥 가져왔습니다.

저기서 PNG 로 저장 후 완성하니

 

이렇게 글이 잘려버렸습니다. 어떻게 해결할까요..

 

 

STEP 6. CSS의 width와 height를 내 사진에 맞게 수정하기.

여기 이 부분에 있는 width : 500px;  height : 120px; 를

여러분의 사진에 맞게 수정해주시면 됩니다.

저는 처음에 width : 400px ; height : 100px ; 를 고친것입니다.

 

Width는 가로길이, height는 세로길이를 표현합니다.

사진이 왼쪽으로 길면 Width를 늘려주시면 되고, 높이가 크면 height를 늘려주시면 된답니다.

 

사이즈가 너무너무 크다면 사진 사이즈를 조정하는것을 추천합니다.

아니라면 너무 header 부분이 길어질테니까요..

수정 후에 적용 키를 눌러보면서 실시간으로 확인하시면 됩니다.

 

----- END

 

감사합니다!!!!