본문 바로가기

Life/yourjune blog

티스토리2008 yourjune ver. 스킨 배포합니다.

반응형
지난번에 스킨을 바꾸면서 필요하신분이 요청을 하시면 따로 보내드리는 방식을 취했는데 따로 배포본을 만들어 놓지 않아(;;) 보내드릴때마다 수정해야 하는 어려움이 있었습니다.

그 짓을 한 5번 하다보니 아예 배포본을 작성하여 올려놓아야 하겠다는 생각이 들더군요;; 저작권을 표기하는한 자유롭게 수정 및 배포가 가능합니다! 유용하게 쓰시길 빕니다. 그럼 스킨 설명 올리도록 하겠습니다!

1. 프리뷰 확인

왼쪽이 제가 수정한 버젼이고 오른쪽이 티스토리에서 제공하는 기본 스킨입니다. 클릭하면 크게 보이니 클릭해보시기 바랍니다.

스킨테스트 블로그
630px http://junestylelab2.tistory.com/
650px http://yourjuneskin.tistory.com/

위 블로그들은 테스트용으로 사전 고지 없이 변경될 수 있습니다.


2. 수정사항
스킨 수정사항은 다음과 같습니다.

2-1. 최상단 타이틀 높이 변경
최상단의 배경이 들어가는 부분은 920*109px 에서 940*200px으로 대략 높이가 두배 커졌습니다. 위 이미지에서 확인하세요. 기본스킨의 타이틀이 너무 답답해 보여서 위쪽으로 여백을 주었습니다. 따라서 배경이미지도 940*200px에 맞추어서 바꾸어주시면 됩니다.


2-2. 블로그 컨테이너 970px로 조정
이건 사이드바를 조정하면서 전체적으로 조정된건데 전체 컨테이너폭(블로그의 틀)이 970px로 조정되었습니다. 넷북에서 봐도 가로 스크롤바가 생기지 않도록 본문넓이는 조정하지 않았습니다. (본문넓이 630px)


2-3. 블로그 타이틀 이미지로 변경(투명배경의 PNG형식)

기존의 타이틀 출력방식.

수정한 타이틀 출력방식.


블로그 타이틀이 텍스트에서 이미지로 변경되었습니다.


블로그 타이틀은 400*80px의 투명바탕배경의 png파일로 만들어져 있습니다.


2-4. 블로그 메뉴 - 관리센터의 메뉴설정에서 조정가능하도록 조정.


블로그 메뉴는 스킨 - 메뉴설정에서 조정할 수 있도록 코드를 교체하였습니다.


즉, 위처럼 보이는 블로그 메뉴에 들어갈 내용을 스킨 - 메뉴설정에서 쉽게 바꿀 수 있습니다.


2-5. 사이드바 폭 250px로 조정 (내용이 들어가는 부분은 230px)
제가 이 스킨에서 가장 심혈을 기울여(?) 수정한 부분인데요. 사이드바를 250px로 조정했습니다. 너무 크지도 않고 너무 작지도 않게 하려고 노력을 많이 했습니다. 좌우 10px씩 여백이 들어가고 내용이 들어가는 부분은 230px입니다.


블로그 이미지의 좌우폭은 210px입니다. 210px로 안맞추어도 크게 상관은 없으나 강제로 210px로 리사이즈 되기 때문에 크기가 많이 다르면 이미지가 찌그러집니다. 210px에 맞추어 올려주시는 것이 좋습니다.


2-6. Missflash님의 카테고리 글 더 보기 위치조정 스크립트 적용.

이 스킨에는 기본적으로 Missflash님의 카테고리 글 더 보기 위치 조정 스크립트가 적용되어 있습니다. 사용하는데 크게 지장은 없으므로 삭제하실 필요는 없을거 같습니다. 혹시 카테고리 글 더보기 위치를 조정하고 싶으신 분들은 위 노란색으로 색칠된 부분의 스크립트를 잘라서 원하는 위치에 붙여넣어 주시면 됩니다.


2-7. 스킨 변경후 자동으로 이미지 좌우폭 맞추는 스크립트 적용.
이 부분은 아래 링크를 참조하세요.
티스토리 블로그스킨 변경후 이미지크기 맞추기


2-8. 최하단의 메뉴 간소화

기존의 하단메뉴

수정된 하단메뉴.


블로그 최하단의 블로그메뉴는 거의 사용하지 않아 주석처리 하였습니다.


2-9. 맑은고딕 기본폰트로 설정.

블로그의 기본폰트는 맑은고딕체입니다. 혹시 다른 폰트로 바꾸려고 하시는 분들은 style.css에서 맑은 고딕 혹은 Malgun Gothic부분을 찾아서 다른 폰트 이름으로 교체해주시면 됩니다.


2-10. 저작권자 표시 위치 이동
저작권자의 표시를 나타내는 "Posted by 블라블라"의 위치를 태그 아래쪽에서 최상단 포스팅 날짜 옆으로 오도록 수정했습니다.



3. 스킨설치법

스킨설치법은 티스토리 가이드를 참조하시기 바랍니다.
http://guide.tistory.com/24


4. 설치시 사용자별로 수정할 사항


4-1. 블로그 배경 교체
가장 먼저 블로그 배경을 교체해야 합니다. 블로그 배경파일의 이름은 topbg_img.jpg입니다. image폴더에서 해당 파일을 찾아 동일한 사이즈 (940*200px)의 이미지로 교체해주시면 됩니다.


4-2. 블로그 타이틀 이미지 교체
그 다음 블로그 타이틀 이미지를 교체해주시면 됩니다. 해당 파일의 이름은 head_logo.png입니다. 반드시 확장자를 맞추어서 만들어야 하고 배경을 투명하게 처리해야 배경이랑 겹치지 않게 나옵니다.


4-3. 블로그 프로필 이미지 교체
블로그 프로필 이미지 파일은 환경설정 - 블로그정보에 가서 업로드 하시면 됩니다. 좌우폭은 210px에 맞춰주시면 됩니다.


제가 테스트한다고 여러번 테스트 했으나 혹시 모를 버그가 있으므로 설치하시는 분들중에 버그를 발견하시는 분들은 이 곳에다가 제보 바랍니다. 유용하게 쓰시기 바랍니다!
반응형