본 글을 퍼가거나 스크랩할 경우 반드시 출처를 명기해주시고 퍼가는 곳에 대한 댓글을 부탁드립니다.     - 쏘울 -

텍스트큐브에서 제공되는 블로그 스킨의 종류가 많지 않아서 블로그를 운영하는 각 개인의 취향에 맞지 않는 경우도 있고, 자기만의 특징적인 블로그 디자인을 표현하고 싶은 경우도 있을 수 있고, 또 기본 제공되는 스킨의 경우 가로폭 사이즈가 너무 좁은 문제도 있어서 수정을 원하는 사람들이 많은듯 하지만 스킨을 수정하려면 최소한의 HTML 코드에 대한 기본지식이 필요하고, 약간의 디자인을 위해 포토샵도 사용 할줄 알아야 하겠습니다.

텍스트큐브에서 제공하는 스킨을 다운 받으려면 http://www.textcube.org 를 방문하시면 됩니다.  그러나 맘에드는 스킨이 없을 경우 지금 부터 설명하는 방법에 의해 원하는 대로 뜯어고쳐 사용하십시오.

쏘울의 경우는 기본 제공되는 스킨중에서 하나를 선택하고 이것을 기본으로 해서 원하는 부분을 수정하는 방법으로 했는데, 이 방법을 토대로 스킨 수정방법을 설명하겠습니다.


우선 내 블로그 관리하기 --> 꾸미기 --> 스킨선택에서 원하는 스킨 하나를 선택합니다.

위 그림에서 두번째 스킨을 선택하고 미리보기를 하면 아래 그림처럼 가로폭이 860픽셀인 블로그가 됩니다.(수정하지 않은 상태)


원하는 스킨에서 사용하기를 클릭하여 선택을 하고 코드편집을 클릭하면 아래와 같이 수정 작업이 가능한 화면이 뜹니다.


위 그림에 보여지는 1.2.3번은 스킨을 구성하는 코드와 첨부된 파일들 입니다.
1. skin.html : 블로그 전체 화면을 구성하는 골격이 되는 소스 코드 부분
2. style.css : skin.html에 정의한 골격에 대한 사이즈,색상,배경,이미지 경로 등을 지정하는 스타일 시트 부분
3. 파일업로드 : style.css에서 지정한 이미지를 업로드 하거나 삭제할 수 있는 파일관리 부분

이제부터 수정해야 할 부분은 상단의 타이틀 이미지를 바꾸고, 타이틀 바로 아래쪽에 메뉴의 배경 이미지를 바꾸고, 가장 하단의 바탕 이미지도 바꾸고, 왼쪽 슬라이드 메뉴칸의 배경도 바꾸고, 본문이 들어갈 위치의 배경도 바꾸고, 블로그의 전체 배경과 가로폭 사이즈도 바꾸는 작업을 합니다.

작업의 전제 조건으로 텍스트큐브가 제공하는 기본 스킨의 가로폭인 860픽셀에서 1024픽셀에 근접하는 크기로 늘리는 것입니다.
일반적으로 웹 사이트를 설계할때 가로폭을 결정하는 요인은, 대부분의 컴퓨터 사용자들이 기본적으로 많이 사용하는 모니터 해상도인 1024픽셀 이상을 넘지 않도록 합니다.

이와 같은 작업을 위해서는 상기 2번의 style.css와 3번에 첨부되어 있는 이미지 파일중에서 아래의 파일을 수정 후 업로드 하면 됩니다.
이미지 파일 수정내용 (아래 그림에서 번호순서 참조)

bar08.gif : 2번 타이틀 아래쪽 메뉴바의 배경 이미지
pattern02.gif : 블로그 전체의 배경 이미지
pattern05.gif : 3번 왼쪽 슬라이드 메뉴칸의 배경 이미지
pattern07.gif : 본문이 들어갈 위치의 배경 이미지
SWblogFooterBgImage.gif : 4번 하단의 바탕 이미지
SWblogTitleBgImage.png : 1번 타이틀 이미지


스킨 수정을 위한 사이즈 결정 (가로폭을 제외한 이미지의 높이는 원하는 만큼의 사이즈로 하면 됩니다)
① 전체 가로폭 : 994픽셀(1024픽셀보다 약간 작게 해야 모니터 범위를 벚어나지 않습니다)
    왼쪽 슬라이드 메뉴칸 가로폭 : 200픽셀
    본문 가로폭 : 774픽셀
    블로그 화면 좌우 여백 : 각 5픽셀(합 10픽셀)
    왼쪽 슬라이드 메뉴칸과 본문 사이 여백 : 10픽셀

② 이미지 사이즈(위 그림에서 번호순서 참조)
    bar08.gif : 2번 타이틀 아래쪽 메뉴바의 배경 이미지 (974 x 42)
    pattern02.gif : 블로그 전체의 배경 이미지 (209 x 487)
    pattern05.gif : 3번 왼쪽 슬라이드 메뉴칸의 배경 이미지 (10 x 10)
    pattern07.gif : 본문이 들어갈 위치의 배경 이미지 (994 x 25)
    SWblogFooterBgImage.gif : 4번 하단의 바탕 이미지 (974 x 100)
    SWblogTitleBgImage.png : 1번 타이틀 이미지 (974 x 160)

이미지 파일의 수정은 본인의 취향에 따라 다양한 이미지를 연출할 수도 있고, 전체적인 분위기에 따라 색상을 배치하시기 바랍니다.
수정이 완료되면 파일 업로드 창에서 기존의 동일한 파일 이름을 선택하여 삭제한 다음 새로 수정한 파일을 업로드 합니다.

아래 그림과 같이 style.css 아래쪽에 있는 코드를 위에서 결정한 사이즈에 따라 수정하고 그런 다음 새로 만들거나 수정해 놓은 이미지를 업로드 하면 스킨 수정이 완료됩니다.
1차 수정하고 만족스럽지 못할 경우 위 순서에 따라 재 수정하면 됩니다.
아래 그림에 녹색 부분은 색상 변경 코드 입니다.

직접 작업을 하다 보면 이것 말고도 수정 해야 할 부분이 더 있을 수도 있습니다.
멋진 블로그 꾸미기에 도움이 되기를 바라면서 마칩니다.


'Software' 카테고리의 다른 글

Total Commander 7.50 확장 ICON팩 적용 확장 한글메뉴 Windows Vista,2008용  (0) 2009.07.13
Mozilla Firefox(모질라 파이어폭스) 브라우저 3.5 강제종료 오류, 버그 ???  (6) 2009.07.08
Winamp의 DSP 음장효과 사운드 이펙터 플러그인 iZotope Ozone VST 소개 및 사용 방법  (2) 2009.07.04
Mozilla Firefox(모질라 파이어폭스) 브라우저 3.5 Final 버전  (0) 2009.06.30
모질라 파이어폭스(Mozilla Firefox) 브라우저와 플러그인 베스트 그리고 Tip  (5) 2009.06.25

+ Recent posts

티스토리툴바