Translucency theme.

2012. 5. 26. 16:12IT/Tistory Tips

블로그를 방문한 손님의 요청으로 제작한 스킨으로 반투명 배경으로 구성한 스킨이다. 위 이미지는 CoolNovo(구 ChromePlus)에서 캡쳐한 것으로, Chrome, Firefox, Opera, Safari, Internet Explorer 8, Internet Explorer 9 등의 웹브라우저를 지원한다. 또 HTML5 웹표준을 준수한다.

1. 내 블로그에 맞게 스킨 수정하기

<meta name="author" content="글쓴이" />
<meta name="description" content="블로그 설명" />
<meta name="keywords" content="주제/키워드" />

먼저 내려받은 Translucency.zip 파일의 압축을 풀고 skin.html 파일을 메모장이나 Notepad2 등으로 열어서 위 내용을 찾는다. 그다음 [글쓴이], [블로그 설명], [주제/키워드] 부분을 자신의 블로그에 맞게 수정한다.

div#wrap{height:100%;background:url("./images/bg.png") repeat;background:rgba(0,0,0,.45);width:1014px;margin-top:280px}

수정한 skin.html 파일을 저장한 다음, style.css 파일을 메모장이나 Notepad2 등으로 연다. Translucency 스킨은 손님의 요청에 의해 블로그 제목 위에 280px의 공백이 있다. 이 공백을 조정하려면 style.css 파일에서 위 내용을 찾는다. 빨간 글씨로 표시된 margin-top:280px 부분에서 280을 다른 숫자로 바꾸면 공백을 조절할 수 있다.

html{background:#555}

배경색을 바꾸거나 배경 이미지를 적용하려면 역시 style.css에서 위 내용을 찾는다. 그다음 #555 부분에 #RRGGBB 형식의 색상코드를 입력하거나 url("배경그림경로")를 입력한다.

Translucency theme는 CCL(저작자 표시-비영리-동일조건변경허락)을 따르므로 저작자를 밝히고 저작권을 수정하지 않으면 스킨을 자유롭게 수정해서 사용할 수 있다. 단, 상업적으로 이용할 순 없다.

2. 스킨 내려받기

새로운 스킨을 적용하기 전에 지금 사용하는 스킨을 꼭 저장한다. 티스토리 센터에서 [꾸미기] - [스킨] - [스킨 저장]을 누르면 사용하고 있는 스킨이 저장된다. 나중에 [적용]만 누르면 간단히 원래 스킨으로 복원할 수 있다.

일단 위 파일을 내려받아 압축을 푼다. 그다음 티스토리 센터에서 [꾸미기] - [HTML/CSS 편집] - [파일올리기]로 이동한다. 그리고 압축을 푼 스킨 폴더로 이동해서 images 폴더의 모든 파일과 index.xml, preview.gif 파일을 선택해서 올린다.

이제 [꾸미기] - [HTML/CSS 편집] - [HTML/CSS] 부분으로 이동한다. 먼저 skin.html 부분에 입력된 내용을 삭제하고 그다음 내려받은 skin.html 파일을 메모장으로 연다. 내용 전체를 복사한 다음 티스토리의 skin.html 부분에 붙여넣는다. style.css 역시 내려받은 파일의 내용으로 바꿔준다. 내용 수정 후엔 꼭 아래에 있는 [저장] 단추를 눌러 수정한 내용을 저장한다.

마지막으로 티스토리 센터의 [꾸미기] - [스킨]으로 이동한 다음 [스킨 저장]을 누른다. 그리고 [보관함] 탭으로 이동해서 방금 저장한 스킨 옆에 있는 [적용]을 누른다. 여기까지 따라하면 새로운 스킨이 적용된다.