FastBoot v1.4 반응형 스킨 기본값 설정 해야할 것

Posted by Readiz
2014.03.23 15:21 반응형 티스토리/FastBoot


FastBoot v1.4 반응형 스킨 기본값 설정 해야할 것



  기본적으로 세팅해줘야 할 것이 거의 없는 점이 FastBoot스킨의 장점으로 생각하고, 그렇게 되도록 제작하고 있습니다. 최우선적으로 생각하는 것이 설치 후 No Setting으로도 FastBoot테스트용 블로그처럼 바로 형태를 갖추게 하는 것이 목표였습니다. 그래서 상단 메뉴바에 카테고리가 들어가면 효율적인 것을 알지만 사용자분들마다 카테고리를 사용하는 환경이 다르기 때문에 넣지 않고 Home, Tag, Guestbook 세가지만 뜨도록 해둔 것입니다.




  설치법은 위 포스팅을 참고하시면 되고,

  FastBoot을 받으시고 설치한 다음에, 설정해야 할 것은 3가지 뿐입니다. 사실 이것도 안해도 되지만 권장사항으로 두는 것입니다.


1. 모바일 스킨을 OFF

2. 화면출력에서 '목록만' 으로 설정

3. 취향에 따라 카테고리 출력을 변경



모바일 스킨 OFF



  



  FastBoot스킨은 반응형이기 때문에 모바일에서도 속도를 잘 뽑아줄 수 있고 보는데 지장이 없도록 디자인 되어 있습니다. 모바일에서도 FastBoot스킨으로 보이게 하기 위해 OFF시켜줍니다. 위는 앞으로 나올 FastBoot스킨의 모습입니다. v1.5에 생길 예정인 Offcanvas..




화면출력 목록만으로 설정



  이것 역시 저번 포스팅에서도 했던 이야기이지만.. 화면설정 > 화면출력 > 선택 화면에서 목록만으로 해주셔야 갤러리형이든 어떤 것이든 잘 나오게 되어 있습니다. 목록+내용을 하시게 되면 카테고리 선택화면에서 너무 느려지고, 내용만 하면 아예 갤러리형이나 리스트형을 사용하실 수가 없습니다. 위 설정을 꼭 확인해주셔야 합니다.



취향에 따라 카테고리 출력을 변경

  1.4버전부터 새로 3가지 유형의 카테고리 유형을 선택하실 수 있게 옵션을 넣어두었는데요,

  지금 첨부한 사진은 List형이고, 기본값으로는 Gallery로 되어 있습니다. 자신의 티스토리에 처음 방문하는 사람이 Gallery형태로 글 목록을 보기를 원하지 않으시면 skin.html에서 한 글자만 수정하시면 기본값이 변합니다.




rMode = getCookie('rMode');
if (rMode == '') {
	rMode = 0; // Deafault Mode
}
if (rMode == 0) {
	document.getElementById('search_gallery').style.display = 'block';
	document.getElementById('search_list').style.display = 'none';
	document.getElementById('search_title').style.display = 'none';
} else if (rMode == 1) {
	document.getElementById('search_gallery').style.display = 'none';
	document.getElementById('search_gallery').className = '';
	document.getElementById('search_list').style.display = 'block';
	document.getElementById('search_title').style.display = 'none';
} else if (rMode == 2) {
	document.getElementById('search_gallery').style.display = 'none';
	document.getElementById('search_gallery').className = '';
	document.getElementById('search_list').style.display = 'none';
	document.getElementById('search_title').style.display = 'block';
}
	

  위 코드에서 Default Mode라고 되어있는 곳 왼쪽의 숫자를 바꾸시면 됩니다. 0이 기본값인 갤러리형, 1이 리스트형, 2가 심플타이틀형입니다. v1.3버전에서는 1로만 쓸 수 있었죠.


v1.4 버그 공지


  Soulkey님이 제보해주신 것인데, 0이 아닌 다른 값으로 하면 쿠키값이 저장이 안된 처음 방문하는 방문자의 경우에는 현재 리스트가 보이지 않는 버그가 있는 것으로 보입니다. 위에서처럼 수정하신 다음에, 다시말하면 rMode = 1 or 2; 로 하신다음 그 바로 밑줄에 아래 코드를 추가해주세요. rMode를 2로 한 예를 들면,


  rMode = 2;

  setCookie('rMode', rMode, 365);


  이런식으로 될 것입니다. 기본값을 방문자의 컴퓨터 브라우저 쿠키에 저장하는 코드입니다.



(갤러리형으로 쓰고 계신 분들은 상관 없습니다.)



  사실 위 내용들은 따로따로 포스팅 되어 있던 내용들입니다만 잘 발견하지 못하시는 분들이 계시는 것 같아 합쳐서 포스팅 해보았습니다. 이외에도 상단바 색상 바꾸기, 배찌 색상 바꾸기 등등 여러 커스텀에 대해서도 연재>FastBoot 카테고리에 포스팅해두었으니 참고하시면 좋을 듯 합니다.


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 오~ 저렇게 리스트뷰 전환이 가능하군요
    저는 아예 보기 설정에 따라서 리스트 뷰 배치 방식을 바꿔볼까 하고 있습니다.
    특정 카테고리는 섬네일 masonry가 아니라 내용이 함께 뜨는 가로 스크롤이 되도록 해보려고요 ㅎㅎ
    일단 목록 + 내용을 다 했을시에, 어떻게 하면 내용을 불러오는데도 빠르게 로드를 시킬지가 관건일 듯합니다.
    • Category마다 다르게 적용하는 것도 좋은 것 같습니다. ㅎㅎ 목록 + 내용을 다 하려면 ajax요청할 때 한번에 다 가져와서 이미지와 내용을 가져와야 되겠네요. 각 게시글에서 이미지를 가져올 때 $('.article').text()로 내용을 같이 가져오면 간단할 듯 싶습니다.
  2. 1.4 가 나온지 얼마 되지도 않았는데... 벌써부터 1.5 버전이 기다려지네요 ㅎㅎ
    • 이번엔 좀 많이 수정된 다음에 배포하려구요...
      아 어제 그 사건 이후에 방명록에 답변 달았더니 또 답변 받고 지우고 튀는 분이 있네요. 이러다가 질문을 안받을 수도 있겠습니다. 쩝..
    • 이런... 동일인물 아닐까요? ㅜㅜ;; 질문하는 사항에 대해서 답변을 달아주는게 얼마나 힘든건지... 그들은 몰라서 그런걸꺼에요...

      전문적으로 알고 있는 사항들이던지, 잘은 모르지만, 웹 검색 조금하면 알아낼 수 있는 사항들이라던지...

      한사람을 이해시켜야 하기 때문에 ... 내가 잘알고 있는 사항이라고 하더라도 설명 해주기는 매우 어렵죠 ㅜㅜ;

    • 동일인물 맞네요.. 다른 분 블로그를 도용해서 질문적고 답해주니까 지우고 튀었더군요. IP 기록해놨으니 반복되는 행동을 하면 조치를 취해야겠습니다. 이거 답변할 맛 싹 사라지네요.
  3. Readiz님 블로그 자주들리니 스킨이 눈에 익숙해지네요
    테스트해보구 한번 써봐야겟어요ㅎㅎ
    • 기존스킨 백업해두시고 부담없이 테스트 해보세요~
    • 이시간에 안주무시고 계시네요 ㅎㅎ
    • 낼 수업이 오후라.. ㅎㅎㅎ
    • kokos
    • 2014.03.24 14:04 신고
    Readiz님 안녕하세요.
    좋은 스킨을 무료로 배포해 주시고 계속 업데이트를 해 주시는데 감사드립니다.
    Readiz 같은 분이 계셔어 블로그를 하기 재미있네요^^
    Readiz님이 개발한 스킨은 초보자도 쉽게 수정도 할수 있게 설명을 해주셔어 감사드립니다.
    저는 1.4를 다운받아 일부 수정을 하여 사용을 하고 있는데요.

    1.카테고리를 클릭하면 겔러리 스타일이 겹쳐서 나왔었는데 님이 말씀하신데로
    플러그인을 사용하지 않으니까 겔러리가 정상으로 펼쳐지더군요
    하지만 플러그인을 사용하면 겔러리가 겹쳐지고 사용하지 않은면 펼쳐집니다.^^

    2.카테고리 클릭을 하면 겔러리가 펼쳐지긴 하는데 문제가 발생합니다
    2~3회 반복을 하면 티스토리 서버가 끊겨버리는 현상이 발생하고
    티스토리나 다음 블로그에 로그인을 할 수가 없습니다.
    어느정도 시간이 지난뒤 로그인을 하면 정상으로 되지만
    역시 반복을 하면 티스토리 서버가 끊기는데 허용하지 않는
    자동화를 사용해 블로그 사용 중단이라는 안내가 나옵니다.

    3.그래서 Readiz님 블로그나 다른분 블로그 카테고리 부분을 클릭해 보았더니
    역시 티스토리 서버가 끊겨버리는 같은 현상이 오더군요.

    4.참고로 저의 컴은 8.1를 사용하고 있습니다.
    재미있고 좋은 스킨인데 방문자가 카테고리를 클릭 했을 때
    저와 같은 현상이 발생한다면 방문자가 ㅠㅠ 이렇게 할 것 같습니다.

    Readiz 님 좋은 스킨을 무료로 배포해 주시고 업데이트를 해 주셔어
    님의 스킨을 사용하는 사람들이 늘어 가고 있더군요.
    서버가 끊기는 현상만 없다면 Readiz님 반응 스킨은 재미있어 하고
    좋은 스킨이 될 것 같습니다. 수고하시고 좋은 하루 되세요.




    • 이게 썸네일을 가져오는 것이 티스토리 서버측에 또다른 페이지를 요청하는 것이라 아마 문제가 생기는 걸겁니다. 그럴것이라 예측은 하고 있었는데 2~3회만에 그렇게 되지는 않던 것 같은데 티스토리에서 아마 요청을 제한했나 하고 생각해봅니다. ajax를 이용하는 방법 말고 다른 방법이 있다면 참 좋을텐데.. 아쉽게도 현 구조상 갤러리형에서는 어쩔수 없군요.. ㅠㅠ 개선방법은 늘 찾고 있습니다.
    • 아 그리고 플러그인 관련해서는 티스토리에서 요즘 패치를 안한지 너무 오래되어서 기본적으로 깔기만 해도 에러나는 플러그인들이 있습니다. 이런 플러그인들은 자바스크립트 동작을 멈추게 하기 때문에 갤러리 역시 겹치는 겁니다. 갤러리에 사용하는 masonry역시 스크립트기 때문입니다.
    • 도움이 되실만한 글을 http://blog.readiz.com/174 에 작성해보았습니다. 왜 그런 문제가 발생하는지 이해하시게 될것이라 믿습니다.
    • kokos
    • 2014.03.25 15:09 신고
    Readiz님 그런 현상이 오는 것이 티스토리에서 문제가 있다는 것은 짐작하고 있었습니다.
    1.4를 다운 받기전 여러번 Readiz 스킨을 클릭을 반복해 보았었습니다.
    제가 보기엔 모바일에서나 테블릿에서 작동이 잘되고 이만한 반응형 스킨 없다고 생각합니다.

    이름을 밝히기는 그렇고 ^^ 초보자들이 설치하기 힘든 스킨을 설치해 어렵게 몇일을 수정 수정해
    사용을 해보았는데 모바일.테블릿에서 깨끗한 면은 있지만 민빗한 것이 그렇더군요

    그래서 Readiz 님 스킨으로 바꾼겁니다.
    Readiz 님이 개발한 스킨 눈을 즐겁게 한다는 것이 저는 맘에 들거든요^^
    님이 차기작 기대하고 있습니다 ^^ 보고 싶네요 ^^
    Readiz님이 무료로 많은 유저들을 위해 수고해 주신다는 것에 다시 한번 감사드립니다.
    별로 아는게 없어 도움을 드리진 못하지만 자주 방문해 응원하겠습니다.^^
    Readiz님 홧팅!^^




    • jjukimtk
    • 2014.03.28 11:43 신고
    와우~제가 찾고 있던 스킨입니다.
    감사합니다. 덕분에 내 고민을 덜 수 있었습니다.
  4. 덕분에 스킨잘 쓰고 있습니다^^
    제가 html도 모르고 css도 모르다보니 몇가지 질문 좀 드리려고요
    1. .rMode = 0; // Deafault Mode 로 되어 있는데도 갤러리형으로 안나오네요;;
    2. 상단 메뉴바에서 선택했을 때 색은 어떻게 변경할 수 있을까요? 현재 보라색인데 영 맘에 안드는데 어떤건지 못찾겠습니다ㅠ.ㅠ
    3. 누르면 옆에서 나오는 메뉴바를 항상 나오게 할 수 있나요? 그리고 나와있으면 모바일에서도 나와있을 까요?
    몇일동안 블로그보고 참고해서 상단네비게이션바(?)랑 밑에 색은 변경했는데 더 이상 진행이 안되네요
    부탁좀 드리겠습니다.
    • 1. 기본 세팅 글 참고하시어 화면출력을 목록만으로 하시기 바랍니다.
      2. style.css
      #tt-body-page #navbar-page, #tt-body-guestbook #navbar-guestbook, #tt-body-tag #navbar-tag, #tt-body-media #navbar-media, #tt-body-location #navbar-location, #tt-body-keylog #navbar-keylog {
      background-color: #e6e9ed;
      }
      3. 현재로서는 항상 나오게 하면 화면이 잘리게 되어 있어서요.. 그리고 반응형이라 일단은 데탑에서도 나오게 되면 모바일에서도 나옵니다. ^^ 현재 제 블로그처럼 우측 상단에 데탑에서는 카테고리를 1.6에서 지원할 계획이니 조금만 기다리세요
    • 2014.07.06 15:31
    비밀댓글입니다
  5. 1.6.1에서는 rMode가 f_categoryDefaultMode를 참조하니 var f_categoryDefaultMode = 0을 수정해줘야 되는군요.
    맞나요?
  6. 안녕하세요 혹시 홈페이지로 접속을 했을때 각 게시글에 adsbygoogle = window.adsbygoogle || []).push({}); 이 뜨는데요 , 본문을 클릭하면 보이지 않고 처음 페이지만 그러는데 없애는 방법이 있을까요 ?
    • 헬로
    • 2016.05.27 18:52 신고
    안녕하세요. 스킨이 깔끔하고 좋아서 이용해보려고하는데요.
    저도 메인페이지 글 보이는 부분에 adsbygoogle = window.adsbygoogle || []).push({}); 가 자꾸 포함되네요.
    글을 보면 괜찮은데.. 글중간에 애드센스를 넣은 다른 블로그는 잘보이던데
    제블로그는 이렇게 표시되어서 좀 난감하네요.
    • 이쁘네요
    • 2016.05.27 19:29 신고
    저 이뻐서 설치는 했는데 글씨가 작게 나오는데 글씨관련 수정해야하는 부분이 있나요?

    님 글씨크기정도를 기본으로 쓰고 싶은데.
    • CSS에서 16px정도로 높여주시면 저정도 사이즈로 나오게 될 것입니다^^
  7. 안녕하세요. FastBoot 스킨 잘 사용하고 있습니다. 다름이 아니라 제가 이번에 블로그를 만들면서 Readiz님의 스킨을 사용하게 되었는데 사이드바쪽에 Writings에 썸네일 자체가 안보이더라고요.. 10개 이상일때 안보이는게 아니라 아예 글을 쓰면 썸네일 자체가 보이질 않네요.. 혹시 무슨 이유때문인지 알고 싶어서 댓글 드립니다..
    제 블로그 주소는 asiflast.tistory.com 입니다.
    • 2017.11.04 16:53
    비밀댓글입니다

티스토리 툴바