이 글은 아래 링크에서 언급된 커스텀스킨 제작 가이드입니다.
위 파일은 커스텀테마 베타버전에 있던 css파일을 수정하기 쉽도록 정리해놓은 파일입니다.
CSS에 대해서 잘 아시는 분들은 이것만으로도 추가/수정하셔서 커스텀 테마를 만드실 수 있습니다.
CSS에 대해 잘 모르시는 분들은 아래 링크에서 각 속성이 어떻게 쓰이는지 배울 수 있습니다.
또한 포털사이트에 css + 속성이름으로 검색하면 한글로된 설명이 많으니 참조하시면 됩니다.
파이어폭스 개발자 도구를 이용하기
제가 이용해본 여러 브라우저의 개발자도구중 파이어폭스가 스타일시트 편집하기엔 가장 편리했습니다.
FastBoot 스킨이 적용된 블로그에 접속한뒤 F12를 눌러 개발자도구를 엽니다.
스타일편집기를 선택하고 가져오기를 통해 위에서 받은 표준 css파일을 불러와 수정하시면됩니다.
수정을 마친 뒤에는 저장하기 기능을 통해 저장합니다.
커스텀 테마 적용하기
1. 티스토리 관리자메뉴에서 HTML/CSS편집 - 파일업로드로 들어갑니다.
편집 후 저장한 css파일을 업로드합니다.
파일 이름은 본인이 원하는대로 정하시면됩니다.
(예, blackTheme1.css)
2. HTML편집기에서 <head>영역에 다음을 추가하면 완료됩니다.
<link href="./images/CSS파일이름.css" rel="stylesheet" />
커스텀 테마 배포하기
완성된 css파일은 아래 서식을 통해 본인의 블로그, 테마 갤러리에 업로드하시면 됩니다.
커스텀 테마 공유 서식<p>[테마 스크린샷이 들어가는 자리]</p>
<p></p>
<p></p><h1>테마 이름<p></p></h1><p></p>
<p>[테마 설명]</p>
<p><br /></p>
<p></p>
<p></p>
<p></p>
<p></p><h1>다운로드</h1>
<div class="txc-textbox" style="border: 1px solid rgb(238, 238, 238); padding: 10px; background-color: rgb(238, 238, 238);"><p>[css 파일 업로드 자리]</p>
<p>[필요하다면 추가로 이미지파일도 업로드]<br /></p></div><p></p>
<p><br /></p>
<p></p><h1>적용 방법</h1>
<ol style="list-style-type: decimal;"><li>HTML/CSS 수정 - 파일 업로드 탭에서 다운받은 css 파일을 업로드합니다.<br /><br /></li><li>HTML/CSS 수정 - skin.html에서 </head>를 찾아 위줄을 한칸 띄운 뒤 다음 코드를 붙여넣고 저장합니다.<br /><div class="txc-textbox" style="border: 1px solid rgb(238, 238, 238); padding: 10px; background-color: rgb(238, 238, 238);"><p><link href="./images/<span style="color: rgb(0, 85, 255);">[업로드한 css파일 이름</span><span style="color: rgb(0, 85, 255);">]</span>" rel="stylesheet" /></p></div></li></ol><div><br /></div><p></p>
<p></p><h1>[기타]</h1>
<p>[더 쓸것이 없으면 기타는 삭제]</p>
<p><br /></p>
<p></p><hr style="display:block; border: black 0 none; border-top: black 1px dotted; height: 1px"><a href="http://blog.readiz.com/category/%EB%B0%98%EC%9D%91%ED%98%95%20%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC/FastBoot" target="_blank" class="tx-link">Fastboot 스킨 알아보기</a><p></p>
<p><a href="http://nubiz.tistory.com/480" target="_blank" class="tx-link">Fastboot 스킨 커스텀 테마 </a><a href="http://nubiz.tistory.com/480" target="_blank" class="tx-link">제작 가이드</a><br /></p>
<p></p>
<p><a href="http://nubiz.tistory.com/entry/board" target="_blank" class="tx-link">Fastboot 스킨 커스텀 테마 갤러리</a></p>
<p></p>
<p></p>
<p></p>
포스트를 작성할 때 위의 코드를 HTML에 붙여넣으시면 됩니다.
블로그에 글을 쓸 때 스킨 미리보기 버튼을 만들 수 있습니다. 궁금하신분은 더 알아보기를 눌러보세요.
[#M_더 알아보기|접기|
먼저 http://htmlcompressor.com/compressor/ 여기서 css파일의 내용을 한줄로 압축시킵니다.
아래 코드는 미리보기 버튼이 될 코드입니다. html모드에서 본문내 적당한 위치에 삽입하세요.
<button class="themeTest" onclick="theme1()">테마 미리보기</button>
<style>.themeTest{padding:1em;font-weight:bold;}</style>
게시글 본문에 html모드에서 아래의 스크립트를 제일 아래에 붙여넣습니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function removeTheme(){
$('.theme').remove()
};
function theme1(){
$('body').append('<style class=theme>여기에 한줄압축된 코드를 삽입하세요.</style>')
}
</script>
미리보기 기능은 아래 베타버전 게시글에 이미 적용되어 있으니 확인해보세요.
- Fastboot스킨을 개성있게! - 커스텀 스킨 테마 2종
§현재 PC화면에서 상단의 board를 커스텀 테마게시판으로 운영중입니다.
standard.css
