티스토리 반응형 스킨에 대한 관심이 많고 이미 많은 분들이 반응형 스킨으로 변경하셨습니다.
저도 티스토리 개설 한달 정도는 일반 스킨으로 게시물 늘리기와 애드센스 가입에 주력하였습니다.
게시물 수도 웬만큼 채우고 애드센스 심사도 완료되어 광고가 올라가니 자연스레 반응형 스킨에 대한 관심이 높아지더군요.
여기저기 말들이 많긴 합니다.
아직 시기상조다.. 오히려 광고수입이 줄어들었다.. 등등..
하지만 앞으로의 대세도 모바일 쪽이니 무시할 수는 없었습니다.
반응형 스킨의 장점은 익히 아시겠지만, 모바일 환경에 최적화.. 특히 광고가 모바일 화면에 맞게 자동(혹은 설정한 대로)사이즈 조절이 가능해서 모바일에서도 광고가 가능하다는 점입니다.
기존 티스토리에서 제공하는 모바일 화면에서는 광고표시가 제대로 되지 않았습니다.
갈수록 모바일쪽 유입은 늘어만 가는데 이쪽을 완전히 무시할 수는 없는 상황이 되어 버린것입니다.
그리하여 반응형 스킨관련 여러 리뷰를 접하다 마크쿼리님의 반응형스킨을 알고 적용하게 되었습니다.
마크쿼리 티스토리용 반응형 스킨 다운로드 사이트
http://markquery.github.io/download/
기본적인 설치가이드는 아래 링크로 확인하시기 바랍니다.
http://markquery.com/docs/installing-tistory/
여기서는 마크쿼리 Spider's Web스킨에서 일부 화면상 개개인에 맞게 수정할 곳 위주로 설명합니다.
다운로드한 스킨파일은 압축을 풀면 아래와 같습니다.
빨간 박스 처리된 images 폴더 안의 파일들과 기본파일들을 업로드 해줍니다.
나머지 파일은 올리지 않습니다.
스킨을 적용하게 되면 메인화면이 이렇습니다.
좀 당황하게 됩니다. 당황하지 마시고...ㅎ
이 검은색 이미지위에서 오른쪽 마우스 클릭해서 다른이름으로 배경저장을 해봤더니.. skin.jpg 파일이네요..
혹시나 해서 skin.jpg로 변경을 하니.. 이런 더 황당한 화면이 나옵니다.
필요 없는 부분이 이렇게 초기 화면을 잡아 먹으니 없애는게 시원하겠죠?
관리자 화면 > HTML/CSS 편집에서 skin.html에서 'COVER'를 찾으시면 아래 파란색 블록 부분이 나옵니다.
그부분을 아래와 같이. <!-- 파란색 블록부분 --> 으로 처리해 화면 출력이 되지 않게 해주세요.
아래와 같이 커버이미지가 사라졌습니다.
커버이미지가 사라지고 나면 화면이 너무 뻘쭘하더군요..
타이틀을 키워 보겠습니다.
title을 찾아 보시면 아래와 같습니다.
저는 텍스트 타이틀을 이미지로 변경해 보겠습니다.
타이틀 이미지를 포토샵등에서 만드신후 업로드하시고 아래 블록 부분 처럼 변경해 줍니다.
작은 텍스트 타이틀에서 좀 더 개성 있는 이미지 타이틀로 변경 되었습니다.
페이지 상단의 주 메뉴도 자신의 카테고리에 맞게 수정해 주어야 합니다.
아래 빨간색 블록 부분처럼 자신의 카테고리에 맞게 수정해 주세요.
(이 상단 메뉴는 모바일 환경에서 주메뉴가 되므로 중요합니다.)
아래와 같으 카테고리가 수정 되었습니다.(참고. HOME 메뉴는 추후 추가함. 위 소스 화면에는 없음)
처음 스킨을 적용하고 나면 사이드바도 좀 이상하게 되어 있습니다.
자신이 쓴 최신글을 나타내는 'Recent Articles'가 default라는것과 두개가 출력이 됩니다.
기본으로 마크쿼리님의 'Recent Articles'가 출력되고 아래는 자신의 'Recent Articles(default)'가 출력 됩니다.
관리자화면> 사이드바 에 가서 보시면 아래와 같이 두개가 나란히 자리하는데 먼저 'Recent Articles'를 삭제해 줍니다.
하지만 자신의 'Recent Articles'가 'Recent Articles(default)'로 표시되니 보기 싫습니다.
HTML/CSS수정에서 'Recent Articles'을 찾아 (default)를 지워 줍니다.
자신의 'Recent Articles'만 제대로 표시가 되었습니다.
이제 웬만한 HTML 코드 수정은 끝났는데요..
홈 화면에 티에디션을 적용한 경우라면 이렇게 skin과 CSS 수정하고 난후 메인의 화면의 폭이 작아지는 문제가 생깁니다.
이럴땐 메인화면의 티에디션 버튼을 눌러 티에디션 설정에 들어갑니다.
그럼 아래와 같이 오른쪽 상단에 '너비보정'이라는 메뉴가 있고 이걸 클릭하면 너비를 늘이거나 줄일 수 있습니다.
늘이기를 눌러 자신의 화면에 맞는 사이즈가 될때까지 사이즈를 늘려주시고 '적용하기'를 누르시면 됩니다.
그닥 필요 없는 부분일 수도 있겠지만 스킨 적용되면 아래와 같이 마크쿼리님의 파비콘이 기본으로 지정되어 있으므로, 원하시는 분은 자신만의 파비콘으로 변경해보시기 바랍니다.
먼저 포토샵에서 자신의 사이트에 맞는 ICON을 PNG파일 형식 등으로 만들어 줍니다.
(저는 64x64 픽셀사이즈 투명배경의 PNG로 만들었습니다)
하지만 일반 포토샵등에서는 바로 .ico형태의 파비콘 파일 제작이 바로 되지 않으므로 변환해 줘야 합니다.
일반 파일을 파비콘 파일 형식의 .ico 형태로 변환해 주는 사이트가 있습니다.
접속하시면 아래와 같은 화면이 뜹니다.
화면 설명처럼 자신이 만들어 놓은 파일을 1찾아보기 해서 불러와 2Conver NOW! 해주면 3번의 링크가 나옵니다.
이 링크위 마우스 위에서 마우스 오른쪽 클릭하면 '다른이름으로 대상 저장'해주시면 ico 파비콘 파일을 다운 받을 수 있습니다.
다운받은 파비콘 파일은 관리자화면 > 기본정보 의 아이콘에서 파비콘을 등록해 주시면 아래와같이 자신에 맞는 파비콘이 적용된걸 확인할 수 있습니다.
일반 스킨과 반응형 스킨의 차이점을 바로 확인해 보시려면 아래같이 브라우저 사이즈를 좁혀 보시면 확연히 느끼실 수 있습니다.
큰 화면에서 브라우저 창을 좁혀보면 게시물의 사이즈도 변합니다.
단, 이상태에서는 배너 사이즈 자체가 바뀌지는 않습니다.
좁혀진 화면에서 새로고침 해보시면 아래와 같이 배너 사이즈 자체가 변경된걸 확인할 수 있습니다.
접속하는 기기의 사이즈에 맞게 자동으로 조절해 줍니다.
아래화면은 컴퓨터라 이런식으로 배너의 규격이 달라지고, 모바일 화면에서는 같은 배너 형태가 전체 사이즈 자체가 줄어 들게 됩니다.
물론 세부설정을 따로 지정하면 자신이 원하는 사이즈 형태로 출력이 가능합니다.
물론 애드센스의 광고생성때 반응형 광고로 생성 적용해 주시고요..
반응형 스킨 적용전 블로그 메인화면
반응형 스킨 적용후 블로그 메인화면
티에디션 적용을 해 놓으니 둘다 별다른 차이를 느끼기 힘들어 보입니다.
모바일화면으로 보면 차이를 느낄 수 있습니다.
기존 모바일화면에서는 광고가 아예 표시되지 않았습니다.
반응형 스킨을 적용한 후 모바일 화면 모습입니다.
화면 사이즈에 맞게 광고 사이즈도 작게 표시가 됩니다.
(관리자 화면 > 모바일 웹 스킨 에서 'OFF'해 주세요)
그런데 문제점 하나를 발견했는데요..
글쓰기에서 사진에 자막을 입력하면 이렇게 화면에서 삐져나와 나온만큼 화면이 줄어드는 현상이 발생하네요..
저는 이제 사진에 자막을 따로 넣지 않고 본문에서 사진 밑에 본문 작성 처럼 설명을 바로 넣는 식으로 글을 작성합니다.
지금 까지 마크쿼리님의 반응형 스킨을 이용하여 자신에게 맞는 커스터마이징 방법에 대해서 알아보았습니다.
아직 티스토리 나 애드센스 가입과 설정이 되지 않은 상태라면 아래 게시물을 보시기 바랍니다.
'잡다구리 > 유용한 정보' 카테고리의 다른 글
| 인터넷 주요사이트 로그인 정보를 지켜라! (0) | 2014.06.20 |
|---|---|
| 구글 애드센스 핀번호가 도착했습니다. (0) | 2014.06.16 |
| 초대장으로 빚어진 해프닝과 티스토리 메인 새 글 문제점에 대해서... (5) | 2014.04.16 |
| 애드센스 가입 부터 티스토리 광고 삽입 까지 (0) | 2014.04.16 |
| 티스토리 가입해서 간단한 설정까지 (8) | 2014.04.15 |
