[티스토리] 반응형 웹 스킨 FastBoot으로 스킨 변경하는 법 4 - 데스크톱 버전으로 보기 버튼 만드는 법

 

 

샐리의 이야기보따리는

 

     Readiz 님이 만드신 FastBoot 1.6.1 버전으로 스킨 변경완료.

 

     따라서 FastBoot 1.6.1 버전을 기준으로 설명하겠습니다.

 

     스킨 다운 받으실분은 http://blog.readiz.com/214 <<-- 클릭.

 

 

 

반응형 웹 스킨에서 아직 해결이 안된 부분이 표에 관련된 부분인데요.

 

표는 모바일로 보게 되면 제대로 안보이고 잘려보이는데

 

해결방법은 표를 작성할때 html부분을 고쳐주기등등의 방법이 있으나 

 

기존글들에 표가 많다면 모든표를 바꾸는데 시간이 오래걸리고

 

또 바꾸는게 서툰 초보는 어려운터라 찾아보다가

 

뭐하라님의 http://nubiz.tistory.com/463 글을 보게 되었습니다. ^^

 

 

 표가 잘려보이면 데스크톱 버전으로 보기를 눌러주면 끝~!!  ㅋㅋ 

 

 

 

뭐하라님의 소스를 참고하여 샐리는 약간 변경을 했습니다.

 

 

데스크톱 버전으로 보기 버튼을 만드실 분들은 아래 설명을 참고하시길 바랍니다.

 

 

 

1. admin -> Html/css편집에서 skin.html부분에서 수정을 할겁니다.

 

Ctrl+F 로 viewport 를 찾으면 아래와 같은 코드부분이 보입니다.

 

 

 

 

 

2. 위의 viewport가 들어간 한줄을 아래의 코드

   (<!-- 데스크톱 버전 보기 시작 --> ~)를 복사하여 아래와 같이 붙여넣어줍니다.

 

데스크톱버전보기.txt<<-- 코드 다운!!

 

 

 

 

 

3. skin.html 맨 아랫부분으로 가도 되고 Ctrl+F로 </body>를 찾아

 

   아래의 코드(<!-- 데스크탑 버전에서 모바일버전으로 버튼 시작 -->~ )를 복사하여 아래와 같이 붙여넣어줍니다.

 

   

모바일버전으로버튼.txt<<-- 코드 다운!!

 

 

 

 

  

4. 데스크톱 버전으로 보기 버튼 위치 정하기

 첫번째 방법  => 페이지 제일 하단에 넣는 방법

 

  데스크톱 버전으로 보기는 데스크톱에선 보이지 않습니다.

 

 

 

 

위처럼 모바일 제일 하단에 위치하게 하려면 Ctrl+F로 respective를 찾은 후

 

아래의 위치에 코드를 넣어주면 됩니다.

 

 

 

페이지제일하단 데스크톱보기.txt<--  다운!!

 

 

 

 

 

 

 

두번째 방법 => 고정 상단 네비게이션 바에 넣는 방법

 

  데스크톱 버전으로 보기는 데스크톱에선 보이지 않습니다.

 

html에서 ctrl+F 로 고정 상단 메비게이션 바 로 찾아 모바일 제목 아래의 위치에 코드를 넣어주면 됩니다.

 

네비게이션바에 데스크톱 보기.txt<- 다운!!

 

 

</span> 아래부터 <div class="container"> 위에까지 코드를 교체해주면 됩니다.
 

 

 

 

  태그에 onclick="desktopMode()" 만 포함되면 어떤식으로든 수정할 수 있습니다.

 

 

 

이제 제대로 보이는지 확인을 해보면 되겠지요?

 

컴퓨터가 아닌 본인의 스마트폰등으로 작업을 한 블로그에 방문을 하여

 

아래와 같이 보이면 데스크톱 버전으로 보기 버튼 만들기 끝입니다.

 

 

데스크톱 버전으로 보기 버튼을 누르면 아래와 같은 멘트가 나옵니다. 확인을 누르기

 

 

 

데스크톱에서 볼때처럼 댓글달리는 본문 창 부분 사이드바의 부분이 나뉘는 데스크탑 화면으로 보이고

 

아래의 '모바일 버전으로'란 버튼을 누르면 원래대로 돌아옵니다.

 

 

 

 

[티스토리] 반응형 웹 스킨으로 스킨 변경하는 법 1 - 기존 스킨 저장

 

[티스토리] 반응형 웹 스킨으로 스킨 변경하는 법 2 - 반응형 웹 스킨 등록

 

[티스토리] 반응형 웹 스킨으로 스킨 변경하는 법 3 - 티스토리 메인화면 디자인 바꾸는 법

 

[티스토리] 반응형 웹 스킨으로 스킨 변경하는 법 5 - 본문 부분 크기와 사이드바 크기 조절하는 법

 

[티스토리] 반응형 웹 스킨으로 스킨 변경하는 법 6 - 티스토리 설정 바꿔야 하는 몇가지

 

[티스토리] 블로그 타이틀 제목에 링크 걸기

 

[티스토리] 블로그 로드 속도 향상 방법