초보의 티스토리 스킨 편집하기

블로그팁 | 2007/05/09 20:49 | Posted by drchoi


티스토리 스킨을  얼리어댑터 정신으로 이것 저것 사용해본 결과 '등대이야기' 가 비교적 스킨 편집이 쉽게느껴지더군요.  그래서 간단히 스킨을 편집하는 방법을 소개합니다.  저 같은 다른 초보분들에게 도움이 될지는 모르지만..사실  제가 잊어먹지 않기 위해 기록을 남깁니다..ㅡ,ㅡ;
(그림은 클릭하시면 크게 보실 수 있습니다.)
사용자 삽입 이미지


스킨 편집에 들어가면 아래쪽에style.css라는 칸이 보입니다.  인터넷 석기시대(?)때 html을 잠깐 공부한적은 있지만 , 처음에 이 것이 무엇인가 무척 당황스럽더군요..하지만 스킨을 몇번 바꾸고 만지작 거리다 보면 이것이 전체적인 형태를 지정해주는 것이라는 것을 어렴픗이 깨닫게 됩니다..
 

여기서 등대그림을 제거할 수도 있고, 다른 타이틀 그림으로 바꿀수도 있고, 배경색깔 본문글자크기 등을 조절하실 수 있습니다.
사용자 삽입 이미지

여기서 글자크기가 픽셀이 아닌 em으로 되있는 것은 글자의 크기를 쉽게 조절하기 위해서입니다.
콘트롤키를 누르고 마우스 휠을 조절해보세요. 이런 형식으로 제작된 웹페이지는 글자크기 조절이 가능합니다.
사용자 삽입 이미지



사용자 삽입 이미지
블로그전체 크기를 조절하면 블로그 메뉴바가 맞지 않습니다.  그러므로 바의 길이를 조정해서 gif파일로 만들어 올려줘야합니다.


파일업로드하시면 그림 파일을 업로하는 창으로 넘어갑니다.  거기서 올린 그림 파일로 바꿔주면됩니다.

사용자 삽입 이미지


타이틀 그림을 제거한 경우 상단의 폭이 너무 넓고 타이틀이 메뉴바밑에 깔리는 현상이 생깁니다, 이때 이것의 폭을 조절해주시면 됩니다.(처음에 이 것 때문에 애를 좀 먹었습니다..)

사용자 삽입 이미지



처음에 스킨을 편집하고 싶다면 가능한 사이드바를 지원하는 스킨을 고르는게 좋습니다.  처음엔 사이드바에 보면 추가가능한 플러그인이 보이지 않습니다.  이는 플러그인 설정에서 미리 활성화를 시켜주시면 나타납니다.  저는 주로 코드배너출력을 이용하는데 간단히.. 편집에서 스크립트 같은 것을 삽입만 시켜주면 됩니다.

사용자 삽입 이미지

사이드바는 파일 올리기가 끝난 후 편집을 해주셔야합니다.  스킨 버그인지, 원래 그런건지는 모르겠으나 파일업로드 후 적용을 누르면 사이드바가 디폴트 값으로 변합니다.   그러면 새로 사이드바 작업을 다시하는 불상사가 생길 수 있음으로 스크립트는 따로 저장을 해두시거나 멀티클립보드를 이용하시면 비교적 쉽게 복구가 가능합니다.(트랙백을 참조하세요..)

대부분 스킨이 이런 형태를 따르고 있기때문에 한번 고생하고나면 다른 스킨도 간단한 변경은 가능합니다.



좀 더 자세한 스킨편집에 대해서 알고 싶다면..태터툴즈스킨 커뮤니티 를 방문해보시기 바랍니다.

스킨은 집에서 한가한 시간에 편집하는 것이 바람직합니다.  한번 건드리기 시작하면 두세시간이 그냥 훌쩍 가버립니다.  그리고 편집하다보면 자꾸 욕심이 생기죠..마음을 비우고 시작하시기길 권합니다..스킨보다는 포스트의 질이 더 중요하다는 사실도 감안하시고..^^


이 블로그는 더 이상 업데이트 하지 않습니다. 질문이나 기타 문의 사항은 DRCHOI BLOG 시즌 2를 방문해 주세요.
DRCHOI BLOG 시즌 2
DRCHOI BLOG 편하게 보기
Google Reader or Homepage

댓글을 달아 주세요

  1. Favicon of http://bluepoet.net bluepoet 2007/05/13 10:10  댓글주소  수정/삭제  댓글쓰기

    좋은글 잘 봤습니다. 블로그 생성 후 한가지 스킨만 써오다 새벽에 겁도없이 스킨 변경에 손을 댔는데 PHP는 고사하고 HTML도 제대로 모르는지라 밤을 새고 말았네요. 결국 원하는 편집은 못하고 티스토리에서 제공하는 스킨으로 일단 입혀놨습니다. 공부 좀 더 하고 도전해야겠군요. ^^

  2. dd 2007/06/25 14:36  댓글주소  수정/삭제  댓글쓰기

    등대이야기 사용하는데요.위에 그림지우니깐 폭이넓어졋네요.

    줄이고싶은데 님말들어봐도 어딜고치라는지 모르겟어요

    em 에서 뭐어케하는지 자세히좀가르쳐주세요

    • Favicon of http://drchoi.tistory.com 블레이드 2007/06/26 14:46  댓글주소  수정/삭제

      밑에서 두번째그림을 클릭하시면 크게 보입니다. 그림을 잘 보시면 빨간줄 그어진 부분에 4em이라고 쓰여 있는 부분이 있습니다. 이 부분에서 4라는 숫자를 3이나 2로 바꿔보세요.

  3. 2007/08/09 12:08  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. ㅇㅋㅇㅋ 2007/11/13 01:24  댓글주소  수정/삭제  댓글쓰기

    님아 등대이야기 배경색은 어떻게 바꾸나요??

    • Favicon of http://drchoi.or.kr drchoi 2007/11/13 11:33  댓글주소  수정/삭제

      님아는 상대방을 낮추어 부르는 좋지않은 인터넷 언어입니다. 함부로 사용하지 마십시오. 배경색은 첫번째 그림을 확대해서 보면 background color 라고 적힌부분 옆에 색상번호가 있습니다. 이것을 원하는 색상번호로 바꿔주면 됩니다.

  5. ㅇㅋㅇㅋ 2007/11/13 15:49  댓글주소  수정/삭제  댓글쓰기

    네 그렇군여...죄성

    그런데요...배경색만바꾸는게 좀 어색하네요

    위에 home local tag

    그리고 왼쪽에

    카테고리 태그 최근작성한글 최근 댓글 이 상자 부분도 색깔 변하게 하고싶은데 어떻게

    하면되나요? 달력색깔도;;궁금

    • Favicon of http://drchoi.or.kr drchoi 2007/11/13 16:18  댓글주소  수정/삭제

      카테고리 색은 화면 설정에서 바꾸시면 됩니다. 나머지 사이드바 색상은 간단하지 않은데, ctrl-f 치고 sidebar를 쳐서 해당항목을 뒤져보면 background color가 있을 겁니다. 부분을 찾아서 색상번호를 입력해보고 미리보기 한 다음 이상없으면 저장하세요 만약 없으면 스타일css 칸 레이아웃에서 사이드바에 background-color:#ffffff; 이런식으로 입력을 해주시면 됩니다. 그리고 고친 부분을 반드시 메모해 두시고..태그 캘린더 다 마찬가지입니다.

  6. ㅇㅋㅇㅋ 2007/11/13 17:52  댓글주소  수정/삭제  댓글쓰기

    에휴 몇번을해도 잘안되네요..밑에 스카일css 여기에서 사이드바..각각 있는건알겠는데

    background 색깔삽입했는데도 카테고리는 색이 전혀안바뀝니다

    어디에 삽입을 해야하는지 자세히 가르쳐주실순없나요

    • Favicon of http://drchoi.or.kr drchoi 2007/11/14 00:05  댓글주소  수정/삭제

      카테고리 색은 스킨편집이 아니라 그냥 티스토리 관리화면 화면설정에서 바꿔주시면 됩니다.

  7. 철인28호 2008/10/24 02:28  댓글주소  수정/삭제  댓글쓰기

    티스토리 블로그메인사진을 넣으려고 하는데요.
    티스토리는 사진 올릴수있는 메뉴가 없네요. HTML 작업을 해줘야 하는거 같은데.
    파일은 업로드 했고 넣는 위치가.....^^; 가르쳐주세욧!