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 역시 내려받은 파일의 내용으로 바꿔준다. 내용 수정 후엔 꼭 아래에 있는 [저장] 단추를 눌러 수정한 내용을 저장한다.

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

  • 프로필사진
    Favicon of http://playing.thoth.kr BlogIcon Playing2012.05.28 21:08

    안녕하세요 ~ 오랫만인데 잘 지내셨죠?
    자꾸 티스토리 블로그에 스팸으로 차단되서 '댓글' 쓰기를 포기하고 글만 잘 보고 있습니다. 참 이상하게도 차단됐다가 풀렸다가 반복이 되더라구요 아무튼 건강하게 잘 지내세요~

    P.S 진짜 블로그 너무 이쁘게 잘 만드신 거 같아요! 깔끔하면서도 참 색감이 튀지도 않고 보기 좋아요

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.05.29 12:28 신고

      오랜만에 반가운 분을 뵙네요^^
      잘 지내시죠??

      직장생활 시작하니까 블로그 잘 안하게 되네요;;
      집에 들어가도 딱히 하는 것도 없는데요 ㅎㅎ

      건강하시고 또 놀러오세요~!!

  • 프로필사진
    Favicon of https://tr1004.tistory.com BlogIcon 타락천사ⓨ2012.06.02 03:34 신고

    스킨 잘 받아갑니다..
    늘 티스토리에 있는것만으로 바꿨는데
    직접 올려서 바꿔볼수 있게 되었네요. 감사해요,^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.06.02 19:54 신고

      네, 잘 쓰세요~
      검정 배경에 적용하니 약간 어두운 느낌이었는데 밝은 배경에 적용하니 또 다른 느낌이 있군요^^