"티스토리 블로그 스킨 만들기"라는 타이틀로 만들고 있는 스킨은 이웃블로거이신 이츠하크님의 요청으로 시작해서 거의 마무리 단계에 있습니다. 지금까지 만든 것으로도 충분히 스킨으로 사용할 수 있으며 메뉴 부분과 각종 아이콘을 삽입만 하면 완료됩니다. 그동안 따라하시는 분들이 어려워하시는 것은 본 스킨 만들기 과정이 제 포스팅의 CSS기초부분을 기반으로 해서 진행된 것이라 스킨만들기부분만 하셔서 그렇습니다. 스킨이 완료되면 공개하려고 하였지만 과정의 중간부분도 중요하다고 생각되어 스킨 만들기 부분만 하시면서 따라하기 어려워하시는 분들을 위해서 지금까지 진행된 부분을 공개하니 참고하세요. 각 단계마다 저장을 해서 공개했어야하는데 미처 생각을 못했군요. 제가 다시 작업하면서 각 과정의 마무리 부분에 그 과정에서 끝난 부분의 스킨 파일을 나중에 올려드리기로 하고 우선 현재까지 진행된 것을 올립니다. 또한 그냥 스킨만 사용하시려는 분도 다운받아 설치하시면 되므로 설치과정을 설명드립니다. footer 부분의 크레딧은 가능한한 지우지 말고 사용해주시길 부탁드립니다.
Redesigned by 베누시안 from Tistory Skin Basic 1.0 and WordPress Theme Suffusion
위 부분인데요. 티스토리 스킨의 Basic 1.0과 워드프레스의 테마인 Suffusion을 근거로 만든 것입니다. 티스토리 스킨 원본에 의하면 수정해서 사용하더라도 저작권을 표기하도록 되어있고 디자인부분은 워드프레스의 Suffusion 테마를 표본으로 삼았기 때문입니다.
압축파일을 다운받아 찾기쉬운 폴더에 압축을 해제합니다. 티스토리 관리자 메뉴에서 스킨을 선택하고 우측에서 스킨등록을 선택하면 화면이 바뀝니다. 3에 스킨 저장명을 입력합니다. TS-Suffsion으로 했습니다. 4의 추가버튼을 클릭하면 브라우저 창이 나옵니다. 압축해제한 폴더로 이동해서 5의 images폴더를 제외하고 index.xml파일부터 style.css파일을 Shift키를 누르고 선택해서 브라우저 창의 하단에서 열기버튼을 클릭하면 파일이 업로드 됩니다. 다시 위창에서 추가버튼을 클릭하여 이번에는 5의 images 폴더를 클릭하여 들어간 다음 Ctrl+A키를 누르면 전체파일이 선택됩니다. 열기버튼을 클릭하면 모든 이미지파일이 업로드 됩니다. 하단에서 저장버튼을 클릭한 다음, 6의 보관함을 클릭하면 업로드한 스킨이 등록되어있습니다.
적용버튼을 클릭하면 블로그에 스킨이 적용됩니다. 스킨위자드를 사용할 수 있도록 수정되었으므로 위 화면에서 스킨위자드를 클릭하여 게시글의 폭을 수정할 수 있습니다.
스킨위자드 버튼을 클릭해서 들어온 화면입니다. 이 스킨은 구글광고의 728*90 사이즈 리더보드를 달 수 있도록 수정했는데 폭을 줄이게 되면 이 리더보드 광고를 제거해야합니다. 또한 2의 구글광고는 html 편집창에서 사이드바 영역에 직접 입력된 것이므로 제거하려면 html 페이지에서 해야합니다. 3의 슬라이더는 게시글영역의 넓이를 설정할 수 있는데 좌우로 이동하면 게시글 영역이 변동되면서 모든 스킨의 사이즈가 변동됩니다. 처음 설치하면 4의 검색박스가 나타나는데 이것은 헤더에 있는 것이므로 제거해줍니다.
관리자페이지에서 사이드바 메뉴를 선택해서 Sponsor Ads의 마이너트 버튼을 클릭하면 좌측의 기본모듈로 이동하면서 제거됩니다. 검색모듈도 마찬가지로 제거합니다. 구글애드센스를 그대로 사용하려면 다음에 나오는 구글 애드센스 광고 입력하는 부분을 보시면 됩니다. 저장버튼을 클릭해야 적용됩니다.
HTML 편집 메뉴를 선택하고 Ctrl+F키를 누르면 2처럼 검색창이 나옵니다. "구글"을 입력하면 2개가 검색됩니다. 첫번째는 728*90 사이즈의 광고입니다. 이 광고 사이즈를 사용하려면 자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해서 4부분을 클릭드래그하여 붙여넣으면 됩니다. 게시글영역을 700픽셀이 아닌 다른 사이즈를 사용할 경우 이 광고 영역을 제거해야합니다. 5부분을 클릭드래그하여 Delete버튼을 누르고 저장하면 됩니다. 사이드바에 광고를 넣으려면 검색창에서 아래화살표를 클릭하면 사이드바 광고 영역으로 이동합니다.
자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해와서 1부분을 제거하고 붙여넣으면 됩니다. 사이드바에서 이 광고를 사용하지 않는 경우는 이부분을 삭제할 필요는 없고 관리센터의 사이드바에서 Sponsor Ads 모듈을 제거하면 됩니다.
사용시 문제가 있으면 꼭 댓글을 달아주세요. 나머지 메뉴와 아이콘 설치관련 포스팅은 계속 되며 추가되는대로 다시 공개합니다.
Redesigned by 베누시안 from Tistory Skin Basic 1.0 and WordPress Theme Suffusion
위 부분인데요. 티스토리 스킨의 Basic 1.0과 워드프레스의 테마인 Suffusion을 근거로 만든 것입니다. 티스토리 스킨 원본에 의하면 수정해서 사용하더라도 저작권을 표기하도록 되어있고 디자인부분은 워드프레스의 Suffusion 테마를 표본으로 삼았기 때문입니다.
TS-Suffusion.zip압축파일을 다운받아 찾기쉬운 폴더에 압축을 해제합니다. 티스토리 관리자 메뉴에서 스킨을 선택하고 우측에서 스킨등록을 선택하면 화면이 바뀝니다. 3에 스킨 저장명을 입력합니다. TS-Suffsion으로 했습니다. 4의 추가버튼을 클릭하면 브라우저 창이 나옵니다. 압축해제한 폴더로 이동해서 5의 images폴더를 제외하고 index.xml파일부터 style.css파일을 Shift키를 누르고 선택해서 브라우저 창의 하단에서 열기버튼을 클릭하면 파일이 업로드 됩니다. 다시 위창에서 추가버튼을 클릭하여 이번에는 5의 images 폴더를 클릭하여 들어간 다음 Ctrl+A키를 누르면 전체파일이 선택됩니다. 열기버튼을 클릭하면 모든 이미지파일이 업로드 됩니다. 하단에서 저장버튼을 클릭한 다음, 6의 보관함을 클릭하면 업로드한 스킨이 등록되어있습니다.
적용버튼을 클릭하면 블로그에 스킨이 적용됩니다. 스킨위자드를 사용할 수 있도록 수정되었으므로 위 화면에서 스킨위자드를 클릭하여 게시글의 폭을 수정할 수 있습니다.
스킨위자드 버튼을 클릭해서 들어온 화면입니다. 이 스킨은 구글광고의 728*90 사이즈 리더보드를 달 수 있도록 수정했는데 폭을 줄이게 되면 이 리더보드 광고를 제거해야합니다. 또한 2의 구글광고는 html 편집창에서 사이드바 영역에 직접 입력된 것이므로 제거하려면 html 페이지에서 해야합니다. 3의 슬라이더는 게시글영역의 넓이를 설정할 수 있는데 좌우로 이동하면 게시글 영역이 변동되면서 모든 스킨의 사이즈가 변동됩니다. 처음 설치하면 4의 검색박스가 나타나는데 이것은 헤더에 있는 것이므로 제거해줍니다.
사이드바 메뉴에서 구글애드센스와 검색모듈 제거하기
관리자페이지에서 사이드바 메뉴를 선택해서 Sponsor Ads의 마이너트 버튼을 클릭하면 좌측의 기본모듈로 이동하면서 제거됩니다. 검색모듈도 마찬가지로 제거합니다. 구글애드센스를 그대로 사용하려면 다음에 나오는 구글 애드센스 광고 입력하는 부분을 보시면 됩니다. 저장버튼을 클릭해야 적용됩니다.
HTML 편집창에서 구글 애드센스 광고를 달거나 제거하기
HTML 편집 메뉴를 선택하고 Ctrl+F키를 누르면 2처럼 검색창이 나옵니다. "구글"을 입력하면 2개가 검색됩니다. 첫번째는 728*90 사이즈의 광고입니다. 이 광고 사이즈를 사용하려면 자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해서 4부분을 클릭드래그하여 붙여넣으면 됩니다. 게시글영역을 700픽셀이 아닌 다른 사이즈를 사용할 경우 이 광고 영역을 제거해야합니다. 5부분을 클릭드래그하여 Delete버튼을 누르고 저장하면 됩니다. 사이드바에 광고를 넣으려면 검색창에서 아래화살표를 클릭하면 사이드바 광고 영역으로 이동합니다.
자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해와서 1부분을 제거하고 붙여넣으면 됩니다. 사이드바에서 이 광고를 사용하지 않는 경우는 이부분을 삭제할 필요는 없고 관리센터의 사이드바에서 Sponsor Ads 모듈을 제거하면 됩니다.
사용시 문제가 있으면 꼭 댓글을 달아주세요. 나머지 메뉴와 아이콘 설치관련 포스팅은 계속 되며 추가되는대로 다시 공개합니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
