[현재글] ☞ 1. 웹 반응형 스킨 - "반응형 웹스킨"이 대세? 웹 반응형 스킨 설치하기!
[보러가기] ☞ 2. 웹 반응형 스킨 - "반응형 웹스킨" Skeleton 스킨 - 사이드바 최근글 수정하기
[보러가기] ☞ 3. 웹 반응형 스킨 - "상단 메뉴바 수정" 반응형 스킨 내 블로그에 맞게 꾸미기
[보러가기] ☞ 4. 웹 반응형 스킨 - "Skeleton 스킨" 화면 하단(푸터) 내 블로그에 맞게 바꾸기
- 웹 반응형 스킨 "Skeleton 스킨(스켈레톤 스킨)" 설치하기
요즘 구글애드센스를 하는 사람들 사이에서 반응형 스킨에 대한 이야기가 슬슬 올라오고 있는데요, 많은 사람들이 웹 반응형 스킨을 설치하고 있습니다. 저도 한동안 쉬었던 블로그를 다시 운영하면서 반응형 스킨을 설치했는데, 손이 많이 가긴 한데 생각보다 괜찮은 것 같습니다. 구글 애드센스에서도 '반응형 광고' 베타 버전이 나온 걸 봐서는 앞으로 반응형 스킨을 설치하는 사람들이 많아 질 것 같은 생각이 듭니다.
저도 아직 마크쿼리님이 만드신 스켈레톤 스킨(반응형 웹 스킨/웹 반응형 스킨)에 적응 중이지만 설치 방법부터 어떻게 자신의 블로그에 최적화 시킬 수 있는지 알아보도록 함께 알아보도록 하겠습니다. 사이드바, 레이아웃, 푸터, 상단메뉴, 구글광고 삽입 등등 자신의 스타일에 맞게 수정해 봐야겠죠^^
티스토리에서는 스킨을 사용자가 마음껏 수정할 수 있다는 장점이 있죠! 모두들 그건 아시리라고 믿습니다.(그러니 반응형 스킨에 관심을 가졌겠죠?^^)
티스토리에서는 아직, 반응형 웹 스킨을 서비스하고 있지 않아서 Markquery님의 홈페이지에서 다운로드 한 다음 티스토리에 업로드를 해야합니다. 제 블로그에 적용되어 있는 웹스킨은 "Skeleton"이라는 스킨인데요, 스켈레톤 스킨을 설치하는 방법을 알아보도록 하겠습니다.
1. Skeleton 스킨 다운받기. ☞ 마크쿼리님 홈페이지 - http://markquery.com
반응형 웹스킨 Skeleton는 마크쿼리님 홈페이지에 있습니다.
마크쿼리님 홈페이지 오른쪽 상단의 Download 를 눌러서 들어갑니다.
왼쪽 사이드바 아래쪽에 "SKELETONS 스킨" 항목이 보입니다.
Tistory 용 스킨을 클릭합니다.
다른 버전용을 클릭해서 다운 받게 되면 소용이 없다는 사실! 당연한 거죠?^^
Tistory Skeleton을 누르면, 두 가지 버전의 스킨이 나옵니다.
첫 번째 버전이 바로 제가 사용하고 있는 버전인 "spider's Web"이고요, 두 번째 버전은 "Doo Be Doo"라는 버전입니다.
두 버전의 차이가 큰 것 같지 않은데요,
두드러지는 차이점은 spider's web은 사이드바가 오른쪽에 있다는 것이고,
"Doo Be Doo"는 사이드바가 아래쪽에 위치하고 있습니다.
제 블로그는 spider's web을 적용한 것입니다.
"Doo Be Doo"를 적용한 블로그 보기 ☞ http://markquery-doobedoo3.tistory.com/
링크를 눌러서 들어가면 아래쪽에서 압축 파일을 다운 받을 수 있습니다.
클릭클릭!
2. 다운받은 스킨을 티스토리에 스킨등록하기!
자 이제 거의 다 마무리 되어 갑니다. 다운 받은 파일만 티스토리에 등록하면 끝나는 거죠! 손이 많이 가는 일은 다운 받고 나서 수정을 해줘야 한다는 것.....그리고 꼭!!! 기존 스킨을 저장! 백업을 해 두셔야 합니다..혹시라도 모를 불상사가 발생하지 않기 위해서 말이죠^^ 저도...스킨 저장안하고 수정하다가 블로그 여러번 손봤습니다..ㅎㅎ
티스토리 관리자 페이지에서, 스킨을 누르면 오른쪽에 "스킨등록"이 있죠.
스킨등록 버튼을 눌러 줍니다.
아래쪽에 "추가"버튼을 누르고, 파일을 업로드 합니다.
업로드 하실때는 "grunt"폴더의 파일을 제외한 나머지 파일을 올립니다.
"images"폴더에 있는 파일하고, 바깥에 있는 파일을 업로드 하면 되는 거죠^^
파일 업로드가 끝나면 "스킨 저장명"을 입력하시고, "저장"버튼을 눌러줍니다.
자~ 이제 끝났습니다.
다시 왼쪽 메뉴에서 "스킨"을 누르시고 "보관함"으로 가면 저장한 스킨이 있습니다.
스킨을 적용 하면 블로그가 바껴있다는 사실~ 이제부터 제대로 손봐야 겠죠?^^
반응형 웹스킨 Skeleton - Spiders'web 블로그에 적용하는 방법이었습니다.
다음에는 블로그를 수정하는 방법을 포스팅 할게요^^
'- IT 패러다임 읽기 > IT's Tip : 사용 후기 & 정보' 카테고리의 다른 글
크롬(Chrome) - 구글 "크롬"에서 "익스플로러"처럼 전환 사용하기! (8) | 2014.01.30 |
---|---|
웹 반응형 스킨 - Skeleton 스킨, 수정하기 4편 - 화면하단(푸터,Footer) 바꾸기 (3) | 2014.01.27 |
웹 반응형 스킨 - 스켈레톤 스킨 "상단 메뉴바 수정" 내 블로그에 맞게 꾸미기! (24) | 2014.01.24 |
웹 반응형 스킨 - "스켈레톤 스킨" 사이드바 최근글 수정하기 (11) | 2014.01.22 |
웹 반응형 스킨 - "반응형 웹스킨"이 대세? 웹 반응형 스킨 설치하기! (19) | 2014.01.22 |
간단하고 예쁜스킨이네요 ㅎ
좋은 스킨 추천 감사드려요 ~
Reply:
자유인- address modify / delete reply
한솔님 블로그 스킨이...보통이 아니네요 ㅎㅎ
저는 실력도 없거니와, 이거 받아서 수정하는 것도 벅찬데 대단하시네요ㅋ 저도 한솔님 스킨 같은 걸 만들어보고 싶네요ㅋ 탐나요
Reply:
훈솔 address modify / delete reply
ㅎㅎ칭찬 감사합니다 깨작깨작 독학으로 해온거라 완벽하지못한데 좋게평가해주시네요 ㅠ
하다보면 익숙해질거에요 ㅋㅋ
이 블로그 정말 깔끔하네요 @_@
티스토리에서는 반응형 스킨을 쉽게 적용할 수 있어서 좋겠어요. 전 개발이 중단된 텍스트큐브라 직접 만들어야 한답니다 ㅠㅠ
그래도 저도 어제 드디어! 반응형 레이아웃을 완성했습니다. 처음 만들어본거라 버그도 많이 있고 부족함도 많지만 실제로 사용할 때에는 크게 불편함이 없는 것 같습니다. 앞으로 더 많이 수정해서 더 사용하기 좋은 레이아웃으로 만들어야 겠어요 ^^
Reply:
자유인- address modify / delete reply
민식님 블로그도 깔끔하네요! 저는 제가 직접 만들 실력은 안되는지라...미천한 실력으로 지금 스킨을 좀 더 수정해야겠지요^^ 자기가 만드는게 제일 좋은거죠..저도 실력만 된다면야...ㅎㅎ 부럽습니다!
th address modify / delete reply
마크쿼리님 URL 링크가 잘 못되어서 접속이 안되요;
http://markquery.com/에서 k가 빠진듯 합니다.
Reply:
자유인- address modify / delete reply
감사합니다^^ 수정했습니다
안녕하세요~
스킨을 잘 설치했는데요~
home 화면을 보면 썸네일이 나오던데
저는 home을 누르거나 해도 그런 썸네일 화면이 안나오고 바로 글 목록이 나오더라구요....
혹시 제가 잘못한 부분이 있는 건가요?!
Reply:
자유인- address modify / delete reply
안녕하세요^^
Home을 눌렀을 때 썸네일이 나오는 것은, 티에디션 설정을 해 주었기 때문입니다^^ 스킨설정과는 별도에요~
관리 - 화면설정 - 티에디션 설정 을 눌러주면 그렇게 가능 합니다^^
반응형 스킨 설치하기 정말 쉽게 해놔서 아주 큰 도움이 되었습니다.
저 같은 초보한테 큰 힘이 되는것 같네요.
근데 ㅎㅎ 이제 설치하고 나서부터가 큰 문제일듯 합니다. ㅠ.ㅠ
감사합니다.
Reply:
자유인- address modify / delete reply
도움이 되셨다니 다행이네요!^^ 감사합니다 ㅎㅎ
저도 아직 손 볼 데가 많은데...슬슬 귀찮아져서 못하고 있네요;;ㅋㅋ
적용은 했는데..
어떻게 만져야할지 완전 막막하네요
Reply:
자유인- address modify / delete reply
저도처음엔 그랬는데 생각보다 쉬워요^^
적용을 하면 이상하게
카테고리가 저~~~밑으로 내려가있네요
메이화면에서
뭐가 문젠지 모르겠네요 ㅠㅠ
Reply:
자유인- address modify / delete reply
아 그런가요? 가끔 그런 경우가 있긴한데..
창의 크기를 조절해 보셨나요?
아니면, 수정부분을 메모장이나 노트에 복사해놓고 다시 한 번 설치해 보는 것도 나쁘지 않을 것 같네요..^^
스켈레톤스킨 두비두의 경우는 카테고리가 하단에 있는 스킨입니다만 그건 아니겠죠?ㅎㅎ
Reply:
이상한하이퍼 address modify / delete reply
그건 아마 스켈레톤 스킨자체가 반응형 스킨이다보니 스마트폰 화면은 자동으로 칸을 매치하기위해 밑으로 내려가 버립니다.
만약 데스크탑에서도 그런다면 스킨을 그냥 다시 하는게 편합니다...
Reply:
자유인- address modify / delete reply
아, 데스크탑에서 오른쪽 사이드바가 내려가는 경우는 아마 광고를 수동으로 배치하는 경우라면, 오른쪽 여백 문제로 내려가는 경우가 있는 것 같더라고요^^
address modify / delete reply
비밀댓글입니다
Reply:
자유인- address modify / delete reply
안녕하세요^^ 마크쿼리님 github에 버전별로 있는 걸로 알고있어요. 저도 일년 넘게쓰고있는 거라.. 소스를 어디에 뒀는지 몰겠네요;; 메일주소라도 남겨주시면 나중에라도 찾으면 보내드릴게요^^