이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이 가능하며 컨테이너 영역의 배경이미지를 클래스 선택자로 변경하였으므로 컨테이너 영역의 배경이미지를 제거하고 사용하거나 해더영역과 푸터(footer)을 컨테이너영역에서 분리하여 별도의 배경이미지를 추가할 수도 있습니다. 메뉴도 원하는 곳에 배치할 수도 있어서 헤더와 컨테이너가 분리된 경우 그 사이에 배치할 수도 있습니다. 이 하나의 스킨으로 여러가지 형태로 변경할 수 있으나 스킨만 사용하시려는 분을 위해서 여러가지 형태로 변형하여 올리겠습니다. footer 부분의 크레딧은 가능한한 지우지 말고 사용해주시길 부탁드립니다.
Redesigned by Venusian from Tistory Skin Basic 1.0 and WordPress Theme Suffusion
위 부분인데요. 티스토리 스킨의 Basic 1.0과 워드프레스의 테마인 Suffusion을 근거로 만든 것입니다. 티스토리 스킨 원본에 의하면 수정해서 사용하더라도 저작권을 표기하도록 되어있고 디자인부분은 워드프레스의 Suffusion 테마를 표본으로 삼았기 때문입니다.
3단스킨 기본형의 사용법은 다음과 같습니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다.
1. 스킨파일의 설치
TS-Suffusion-1.zip헤더부분의 타이틀 글자가 안나오도록 하고 이미지가 잘리는 부분 수정했습니다.
카테고리 마우스오버시 범위가 넓게 선택되는 것을 수정했습니다.
압축파일을 다운받아 찾기쉬운 폴더에 압축을 해제합니다. 티스토리 관리자 메뉴에서 스킨을 선택하고 우측에서 스킨등록을 선택하면 화면이 바뀝니다. 3에 스킨 저장명을 입력합니다. TS-Suffsion으로 했습니다. 4의 추가버튼을 클릭하면 브라우저 창이 나옵니다. 압축해제한 폴더로 이동해서 5의 images폴더를 제외하고 index.xml파일부터 style.css파일을 Shift키를 누르고 선택해서 브라우저 창의 하단에서 열기버튼을 클릭하면 파일이 업로드 됩니다. 다시 위창에서 추가버튼을 클릭하여 이번에는 5의 images 폴더를 클릭하여 들어간 다음 Ctrl+A키를 누르면 전체파일이 선택됩니다. 열기버튼을 클릭하면 모든 이미지파일이 업로드 됩니다. 하단에서 저장버튼을 클릭한 다음, 6의 보관함을 클릭하면 업로드한 스킨이 등록되어있습니다.
적용버튼을 클릭하면 블로그에 스킨이 적용됩니다. 스킨위자드를 사용할 수 있도록 수정되었으므로 위 화면에서 스킨위자드를 클릭하여 게시글의 폭을 수정할 수 있습니다.
2. 스킨위자드의 사용
스킨위자드에 들어오면 사이드바가 위처럼 보입니다. 사이드바는 html상에 나열된 순서대로 나오는데 이는 관리센터의 사이드바 메뉴에서 위치를 변경할 수 있습니다. html에서 구글광고가 기본적으로 추가되어있지만 사이드바 메뉴에서 제거할 수 있습니다. 이 기본스킨은 3의 구글 리더보드 광고를 최적화하기 위해 만든 것이므로 게시글영역의 사이즈를 변경한다면 3의 광고영역은 html 편집창에서 제거하는 것이 좋습니다. 그대신에 사이드바에 336*280 사이즈의 광고를 추가할 수 있습니다. 4의 구글광고는 다음뷰 애드박스를 설치할 경우 최적화되어있습니다. 애드박스를 사용하지 않을 경우 광고를 사이드바에 추가하는 것이 좋습니다. 이처럼 위 스킨은 구글 광고에 최적화하기 위해 만들어졌습니다.
스킨위자드 창의 배경탭에서 이미지를 설정하게 되면 최상단의 6의 이미지는 제거가되어 메뉴바의 배경이 안보이므로 되도록 배경이미지는 사용하지 않는 것이 좋습니다. CSS 배경이미지 속성은 여러개 추가할 수 있지만 인터넷 익스플로러에서 지원하지 않기때문에 이대로 사용하거나 메뉴를 헤더부분 아래에 배치한 다른 버전의 스킨을 사용하는 것이 좋습니다. 배경이미지를 다른 것으로 추가는 안되지만 배경색은 바꿀 수 있습니다. 7에 #444의 색으로 되어있는 것을 다른 색상코드를 입력하거나 위의 색상스와치에서 선택하면 됩니다. 타이틀탭을 클릭합니다.
타이틀탭은 스킨의 헤더부분을 설정하는 부분인데요. 디자인 이미지를 사용하면 스킨의 폭이 넓기 때문에 2처럼 끊어지는 부분이 있습니다. 직접올리기에서 이미지폭이 넓은 것을 사용하거나 패턴 혹은 배경색을 사용할 수는 있습니다.
게시글탭을 클릭하여 글영역 넓이를 조정하면 컨텐트 영역이 변동되면서 컨테이너영역과 헤더 글제목영역도 같이 변동됩니다. 하지만 사이드바는 고정입니다. 이 사이드바도 CSS에서 수정할 수 있습니다. 게시글 영역을 수정하면 2의 구글광고는 제거하는 것이 좋습니다. 3의 구글광고는 다음뷰 애드박스를 사용한다면 그대로 사용가능합니다.
사이드바 메뉴를 선택하면 사이드바가 8개나 됩니다. 3단 레이아웃의 특징은 모듈의 공간을 효율적으로 관리할 수 있다는데 있습니다. 넓은 사이즈의 배너 광고를 사용할 수도 있고 스카이스크레이퍼 형태의 배너광고도 사용할 수 있습니다. 8개의 사이드바이지만 간단하게 사용하려면 두개만 사용해도 됩니다. 설치를 하고나면 기본적으로 사이드바3에 모든 모듈이 배치되어있습니다. html 코드의 순서죠. 위 사이드바는 쌍으로 되어있습니다.1과2가 한쌍이고 3과 4, 5와 6, 7과 8이 한쌍입니다. 이것은 넓은 배너를 사용하기 위한 것인데 사이드바 하나의 폭은 180픽셀입니다. 두개를 더하면 360픽셀이죠. 사이드바 1과 5는 CSS에서 width가 360픽셀로 설정되어있습니다. 이들의 쌍인 2와 6은 180픽셀로 설정되어있지만 이 위치에 아무것도 넣지 않는다면 나타나지 않습니다. 만일 이 위치에도 배너를 넣고자 한다면 1과 5의 width를 180픽셀로 줄여야합니다. 사이드바 3,4,7,8은 폭이 180픽셀로 되어있습니다. 그러니 180픽셀의 배너는 이 위치에 넣어야합니다.
실제로 배치를 해봅니다. 스폰서 광고 모듈을 클릭드래그하여 사이드바 1에 배치합니다. 글자만 있지만 360픽셀의 폭이 설정되어있어서 둥근모서리의 배경이미지도 늘어나서 나옵니다. 사이드바 2에는 아무것도 없어야하죠. 사이드바 5에 있는 구글광고는 태그입력기를 사용하여 구글광고 스크립트를 삽입한 것입니다. 사이드바 6에는 아무것도 없죠. 4처럼 나오게 됩니다. 각 쌍의 사이드바 다음에는 clear:both라는 속성을 사용했기 때문에 사이드바 5에 아무것도 없더라도 사이드바 7의 모듈이 올라오기는 하지만 사이드바 3의 최근 댓글 모듈과 맞닿는 일은 없습니다. 4의 윗부분처럼 빈 공간이 나타나죠. 이러한 빈 공간을 없애기 위해서는 최근에 달린 댓글이나 최근에 올라온 글 등 글의 갯수를 설정할 수 있는 모듈의 숫자를 조정하면 됩니다(화면 설정메뉴에서 화면출력선택).
사이드바 1과 5에는 넓은 배너를 추가로 설치할 수 있는데 태그입력기 모듈을 추가로 배치하고 편집버튼을 클릭하여 다음뷰의 마이뷰 코드를 삽입하면 되고 코드중의 width를 360으로 설정합니다.
3. HTML 편집창에서 구글 애드센스 광고를 달거나 제거하기
HTML 편집 메뉴를 선택하고 Ctrl+F키를 누르면 2처럼 검색창이 나옵니다. "구글"을 입력하면 3개가 검색됩니다. 첫번째는 728*90 사이즈의 광고입니다. 이 광고 사이즈를 사용하려면 자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해서 4부분을 클릭드래그하여 붙여넣으면 됩니다. 게시글영역을 700픽셀이 아닌 다른 사이즈를 사용할 경우 이 광고 영역을 제거해야합니다. 5부분을 클릭드래그하여 Delete버튼을 누르고 저장하면 됩니다. 300*250사이즈의 광고를 넣으려면 두번째로 이동해서 글자를 지우고 광고를 삽입합니다. 사용하지 않으려면 글자를 제거합니다. 사이드바에 336*280 사이즈의 광고를 넣으려면 검색창에서 아래화살표를 클릭하면 세번째로 이동하여 사이드바 광고 영역이 나옵니다. 글자를 제거후 광고를 삽입합니다. 이부분의 광고를 사용하지 않으려면 사이드바 설정창에서 모듈을 제거하면 됩니다. 사이드바에 336*280광고를 두개 사용하려면 사이드바 설정창에서 태그입력기 모듈을 사이드바 5로 배치하고 편집버튼을 클릭하여 구글 애드센스 스크립트를 삽입하면 됩니다.
사용시 문제가 있으면 꼭 댓글을 달아주세요. 레이아웃을 수정한 다른 버전은 추가로 올립니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
