무료 반응형 티스토리스킨배포!
스파이더웹(Spider's Web) 설치방법
이제 반응형 웹사이트가 대세가 아닌가 합니다.
홈페이지,블로그등 반응형웹으로 리뉴얼하는 추세인데요~~
티스토리 그 자체로도 충분해서 그동안 관심을 안 가졌지만...
어떤 브라우저, 어떤 전자기기(스마트폰, PC, 태블릿PC)로 접속해도
보기 좋게 보여주는 반응형웹이 필요한 시점이라.. 테스트로 적용을 해봤습니다.
일단 반응형웹이 적용된 모습을 한번 보시죠!
적용한 블로그는 http://fpang.tistory.com 입니다.
[PC에서 창을 최대로 확대했을 때 화면]
[창을 조금 축소했을때 화면]
위 이미지와 큰 차이가없어보이지만..
내용(제목)을 보면 창의 폭이 줄어들었지만.. 이미지나 다른 내용들이 정상으로 보이는것을 확인할 수 잇습니다.
[창을 절반이상 축소했을때 화면]
타이틀 이미지는 축소되어 모두 표시가 되고,,
사이드바는 하단으로 내려갑니다.
즉 모바일로 보면 모바일 화면에 최적화되게 보여주고,,
창을 축소하면 축소된 화면내에서 내용을 확인할 수 있도록 반응을 하게 됩니다.
반응형웹으로 만들어진
티스토리 스킨 Spider's Web을 적용하는 방법은 생각보다 간단합니다.
단, 기존에 운영하던 블로그의 경우 별도로 꾸민 부분(광고, 사이드바, 타이틀이미지등)이 모두 삭제되기 때문에
신중하게 결정해야 하고 기존블로그에 이 스킨을 적용하려면 먼저 스킨 백업부터 한다음에 하는것이 좋습니다.
[관련글]
자 이제 변경하는 방법에 대해서 알아보겠습니다.
티스토리 스킨 Spider's Web 블로그에 적용하기
이 스킨은 무료로 배포하기 때문에 누구나 다운로드 하여 사용할 수 있습니다.
먼저 다운로드를 해야 합니다.
1. 스킨다운로드 후 압축풀기
아래 링크를 누릅니다.
링크1 http://markquery.com/download/
아래로 스크롤하다보면 아래와 같은 Download가 보입니다.
이곳을 클릭하면 다운로드가 가능합니다.
위 링크가 연결이 안되면 아래 링크를 통해서도 다운로드가 가능합니다.
링크2. https://github.com/parkdoheup/tistory-spidersweb
위 사이트 접속후 아래로 스크롤하면 아래 이미지와 같이 Download가 보입니다.
클랙해서 다운로드 합니다.
다운로드 후 압축을 해제 합니다.
다음은 압축해제했을때 파일 리스트입니다.
2. 스킨 등록하기
이렇게 다운로드한 스킨은 자신의 블로그에 업로드를 해야 합니다.
블로그에 로그인 한 후 관리페이지로 이동합니다.
스킨-스킨등록-파일업로드 순으로 진행하는데요~~
왼쪽메뉴에서 스킨을 누릅니다.
스킨등록을 누릅니다.
아래와 같이 나오면 스킨저장명을 입력합니다.
저는 Spider's Web 이라고 적어줬습니다.
파일추가하기
이제 위 이미지의 하단에 있는 "추가"를 눌러줍니다.
그런다음 스파이더앱이 저장된 폴더로 찾아갑니다.
그리고 아래와 같이 폴더말고 파일만 선택을 해준다음에 확인을 누릅니다.
이미지폴더안에 있는 파일 추가하기
다시 추가를 눌러서 이미지폴더안으로 들어간 다음..
모든 파일을 선택한 후 업로드를 해줍니다.
파일이 업로드 된것을 확인 한 후 "저장"을 눌러줍니다.
3. 스킨 적용하기
이제 업로드가 끝났으므로 [스킨-보관함]이로 이동합니다.
그러면 위에서 저장한 스킨이름이 표시됩니다.
"적용"을 누르면 스킨이 블로그에 적용이 됩니다.
아래 이미지가 적용된 모습입니다.
[티스토리 반응형 스킨 스파이더 웹 적용화면]
블로그 환경에 맞게 수정하기
스킨을 추가했으면 몇가지 자신의 블로그에 맞게 수정을 해줘야 합니다.
skin.html RSS 주소 수정
저의 경우 RSS 부분을 수정했습니다.
아래 노랑색 배경 부분에 자신의 블로그 RSS 주소로 바꿔줍니다.
카테고리 수정
상단에 카테고리 메뉴가 나오는데 이 메뉴는 수동으로 해야 합니다.
저는 저에게 맞게 카테고리 수정을 해주고 Home 메뉴를 추가 했습니다.
CSS 수정
우측 카테고리의 서브 카테고리 글자가 너무 작아서 조금 크게 수정햇습니다.
[ 변경 전 10px ] [ 변경 후 10.8px ]
아래와 같이 폰트크기를 10px을 10.8px 로 변경했습니다.
티스토리에서 제공하는 모바일 스킨을 사용안함으로 해야 모바일에서 정상작동 합니다.
상단의 커버이미지(타이틀이미지)를 수정해야 합니다.
[커버이미지 참고글. http://fpang.tistory.com/]
버전 3.0.5 참조글 : https://github.com/ungki/tistory-spidersweb/releases/tag/v3.0.5
반응형웹으로 스킨을 변경하니 참 좋네요!
애드센스라든지 별도로 추가하는 코드를 모바일, PC 별도로 하지 않아도 되기 때문에 매우 편리합니다.
반응형 스킨이다 보니 html , css, 자바스크립트 등을 잘 모른다면..
수정이 다소 어려울 수 있으므로 미리 빈 블로그에 테스트해보고 적용하는것을 권합니다.
'블로그팁' 카테고리의 다른 글
| 초보자를 위한 블로그 글제목, 포스팅제목 짓기 (15) | 2015.03.09 |
|---|---|
| [윈도우7에서 블로그운영] 사진등록시 이전폴더 초기화되는 문제, 직전폴더 기억 (37) | 2013.04.03 |
| 스마트폰시대에 맞춘 블로그 최적화방법 (38) | 2013.01.16 |
| 네이버검색 외부블로그 글수집방법 업그레이드, 티스토리갱신적용 (37) | 2012.12.27 |
| 티스토리 댓글란 초기입력상태 한글로하기, 한글자동입력,한글입력모드로 자동변환 (31) | 2012.12.21 |