티스토리 스킨 – 모바일 겸용 반응형 티스토리 스킨 공개합니다.

 

 

HTML5와 CSS3의 웹표준에 근거한 반응형(Responsive) 디자인입니다. 반응형 디자인이란 모니터 스크린 사이즈에 따라서 웹페이지의 레이아웃이 바뀌도록 CSS의 Media Query를 이용한 디자인입니다. 4가지 형태의 모니터에 따라서 화면 레이아웃이 바뀝니다. 데스크탑, 태블릿 가로, 태블릿 세로, 스마트폰입니다. 워드프레스 테마를 반응형으로 개발하던 중 티스토리에도 적용하고 싶어서 만들어봤습니다. 사용해 보시려면 아래 압축파일을 다운받아 이곳(http://martian36.tistory.com/841)의 글을 참조해서 설치하면 됩니다. 모빌리스 웹폰트를 사용하여 기본 폰트가 나눔 고딕으로 나오도록 했으므로 상업용으로 사용할 경우는 이 링크를 제거하고 사용하세요.

 

cfile23.uf.1247AD4C4FFBBF1E045C76.zip

 

업데이트 버전 –>http://martian36.tistory.com/952

 

데모 사이트–>http://explorer36.tistory.com/

 

위 사이트는 제 테스트 블로그입니다. 웹브라우저 화면을 줄이면 화면의 크기에 따라서 레이아웃이 바뀝니다. 스마트 폰으로 접속하면 크기에 맞는 디자인이 적용되고 메뉴 전체가 드랍다운 메뉴로 바뀝니다. 위 이미지는 최대 사이즈로 폭이 1170픽셀입니다. 화면을 줄이면 아래와 같이 레이아웃이 점차적으로 달라집니다.

 

 

 

여기까지는 사이드바의 구글 광고가 제대로 나옵니다. 하지만 더 줄이다 보면 아래처럼 광고가 레이아웃의 밖으로 벗어납니다. 그래서 구글에서는 광고를 좌우로 늘어난 리더보드형을 사용하지 말라고 합니다. 크기도 되도록 작은 사이즈로 사용합니다.

 

 

 

메뉴바의 모양이 바뀌고 우측의 아이콘을 클릭하면 드랍다운 메뉴가 나옵니다. 화면을 더 줄이면 아래처럼 우측의 사이드바는 컨텐트 영역의 아래로 배치되면서 사라집니다.

 

 

 

본문 영역만 나오지만 스트롤해서 내리면 사이드바도 나타납니다.

 

 

 

스마트폰 사이즈로 줄인 후에 메뉴바의 아이콘을 클릭하면 나타나는 드랍다운 메뉴입니다. 스마트폰은 탭하면 되겠죠.

 

 

 

스마트폰 에뮬레이터인 오페라 모바일에서 본 화면입니다. 구글 광고도 제대로 나타납니다.

 

 

아래로 스크롤해서 나타나는 사이드바 영역입니다.

 

반응형 디자인은 외국에서는 일찍 나타나서 워드프레스 테마에 이미 적용이 됐고 앞으로 나올 워드프레스 기본테마인 Twenty-Twelve는 위와 같은 디자인을 적용할 예정입니다. 국내의 포털에서 블로그에 접속하면 해당 포털 사이트의 일방적인 디자인이 적용된 모바일용 레이아웃이 나타나죠. 티스토리에서 이런 일방적인 디자인 적용을 해제하고 개별적으로 선택해서 위와같은 디자인을 적용할 수 있도록 했으면 좋겠습니다.

 

반응형 디자인을 쉽게 만들 수 있는 도구가 있는데 트위터 부트스트랩입니다. 이미 이 도구를 사용한 워드프레스 무료테마가 나와있습니다. 부트스트랩은 웹페이지 제작시 사용되는 CSS, 아이콘, 자바스트립트 등을 미리 만들어 놓고 HTML페이지에 적용만 하면 쉽게 레이아웃과 애니메이션, 보기좋은 버튼, 쉬운 아이콘 삽입 등이 가능합니다.

 

트위터 부트스트랩 –>http://twitter.github.com/bootstrap/index.html

 

워드프레스 책을 만들고 있는데 테마 제작에 관한 내용에 트위터 부트스트랩을 적용할 예정이어서 위 내용을 한글화하여 제 워드프레스 블로그에 올릴 예정입니다.

 

위에 올린  티스토리 스킨은 계속 업데이트할 예정입니다. 현재 사이드바의 모듈을 클릭하면 감춰지는 기능을 추가하고 제이쿼리 애니메이션 배너도 추가할 예정입니다. 스킨 사용시 문제점이 있으면 댓글을 달아주세요.

 

 

 

구글광고 삽입은 스킨 수정화면의 HTML영역에서 위 내용을 찾아 주석을 제거하고 구글광고 300*250에 광고를 삽입합니다. 가급적 이 사이즈를 사용하세요.

 

 

메뉴바에서 카테고리 메뉴를 사용하려면 위 내용을 찾아서 주석을 제거하고 카테고리 URL에 자신의 블로그 카테고리 URL을 복사해서 붙여넣고 카테고리 이름도 바꿔주면 됩니다.

 

 

 

사이드바에 광고를 삽입하려면 HTML배너출력 모듈을 사용합니다. 플러그인에서 활성화하면 나타납니다. 모듈을 사이드바1에 배치하고 편집을 클릭하여 연 다음 <div id=”adsense336″>…</div>태그 안에 300*250 사이즈의 광고 스트립트를 붙여넣으면 됩니다.

 

Related posts:

  1. 모바일용 티스토리 블로그 스킨 두번째 버전 공개합니다.       어제(http://martian36.tistory.com/950)에 이어 오늘은 각종 아이콘 삽입과 댓글 부분 레이아웃 변경, 그리고 사이드바의 검정색 바를 제이쿼리 애니메이션 처리해서...
  2. 티스토리 블로그 스킨 만들기 – 현재까지 진행된 스킨을 공개합니다. “티스토리 블로그 스킨 만들기”라는 타이틀로 만들고 있는 스킨은 이웃블로거이신 이츠하크님의 요청으로 시작해서 거의 마무리 단계에 있습니다. 지금까지 만든 것으로도 충분히...
  3. 부트스트랩을 이용한 티스토리 모바일 겸용 블로그 스킨 공개합니다.(최종 버전)     현재 티스토리 블로그가 커스텀 모바일 스킨을 지원하지 않고 모든 포털 사이트의 블로그가 그렇지만 모바일로 접속하면 일방적인 디자인으로 나타나고...
  4. 티스토리 블로그 스킨 만들기 10 – 제이쿼리 플러그인을 이용한 메뉴바 만들기 2 이번 글에서 만들게 될 메뉴바입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 메뉴에 마우스 오버하면 서브 메뉴가 애니메이션 되면서 나옵니다. 구글...
  5. 티스토리 블로그 스킨 만들기 – 스킨 만들기 환경 설정 티스토리 스킨을 만들기 위해서는 환경을 만들어야합니다. 티스토리 블로그는 원래 태터툴즈 블로그를 기반으로 하기 때문에 태터툴즈 블로그 프로그램을 사용하여 환경을 만들...

댓글 남기기