반응형 갤러리 스킨 FastBoot v1.4 배포

Posted by Readiz
2014.03.17 20:14 반응형 티스토리/FastBoot


FastBoot v1.4를 적용하신 어재영님 블로그

http://eohjae.tistory.com/




Faster, Responsive, Gallery Type Category Skin



  FastBoot은 티스토리 블로그 스킨입니다. 반응형이고, 이번 버전부터 갤러리형으로 Default 값이 정해져 있습니다. 다만 원하시지 않는 경우 소스코드에서 변수 하나만 바꾸시면 기존 버전처럼 기본 List형태로 Category가 노출됩니다.




New Major Features

1. Bootstrap Customize, Library included



  FastBoot은 Bootstrap 기반 스킨입니다. Bootstrap은 기본적으로 방대한 양의 라이브러리를 가지고 있는데, FastBoot에서 사용하지 않는 부분들이 많아 이번 버전에서는 다 제거하였습니다. 이 작업으로 인해 Bootstrap 라이브러리의 용량이 CSS는 전 버전의 60%, JS는 전 버전의 무려 20% 수준입니다. 이로 인해 전 버전에 비해 상당한 수준의 속도 차이가 나게 되었습니다(크롬에서는 어차피 날아다니지만.. IE에서요). 또한 이 외에도 jQuery Library를 외부 서버에서 가져오던 것을 아예 포함시켜버렸습니다. 타 서버로부터 가져오지 않으므로 이 역시 로딩속도 향상에 영향을 미치게 되었습니다. 



2. Gallery Type Category





  이번 버전의 가장 큰 특징인데, 방문자가 갤러리형 / 리스트형 / 심플타이틀형 세가지로 글 목록을 열람할 수 있게 해두었습니다. 이 선택여부는 방문자의 브라우저 쿠키에 저장되어 다음 방문시에도 설정이 유지됩니다. 또한 블로그 관리자는 변수 하나만 수정하면 방문자가 보게 될 기본설정을 선택할 수 있습니다. 기본값 수정은,


	
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);


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



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




  갤러리형으로 나오게 하기 위해서는 위 그림처럼 화면출력 설정을 '목록만'으로 해주시기 바랍니다.



3. IE7 일부 지원

  v1.3.5로 반응형 스킨으로서는 드물게 IE8을 지원하였었는데, 국내 웹 환경상 IE7을 완전히 무시할 수는 없어서 IE7 사용자들에게도 경고메시지와 함께 글 내용은 볼 수 있게(본문에 삽입된 애드센스도 보입니다) 해두었습니다. 검색엔진으로 들어오는 사람들을 위한 배려이고, v1.4에서는 글 내용까지는 볼 수 있게(그 이전까지는 경우에따라 내용이 아예 안보일 때도 있었습니다) 하였습니다. 궁극적으로는 IE7에서도 잘 보이게 하는게 목표이지만 버전업을 바라시는 분들이 많아서 불완전하지만 포스팅내용만이라도 볼 수 있게 패치하였습니다. (사이드바나 메뉴는 깨지는 원인이기 때문에 출력되지 않습니다. 본문 내용만 출력됩니다.)





FastBoot v1.4

반응형 / 모바일, PC, 태블릿 겸용


FastBoot v1.3.5(참고)



테스트 블로그



Download


  파일크기는 다소 커졌습니다만 Masonry 갤러리 때문이고 평소에는 로딩속도가 오히려 더 빨라졌고 오로지 갤러리형으로 글 목록을 볼 때만 영향이 갑니다. 그나마도 Bootstrap 최적화로 인해 아마 느려진건 체감이 별로 안되실것이라고 봅니다. 적용과정에 문제 있으신 분들은 이 글 코멘트나 방명록 활용하시면 됩니다. 다만 비밀글로 하시면 정보공유에 도움될 것이 없으니 자제 부탁드립니다.



+ 스킨 저작권 관련..

  저도 이 스킨제작하면서 오픈소스를 굉장히 많이 사용하였고, 이 오픈소스들에 관련된 저작권은 skin.html에 잘 나타내려고 노력하였습니다. 다만 그런만큼 제 스킨을 사용하시는 분들도 스킨을 누가 만들었는지, 어디가서 받을 수 있는지에 관한 정보는 제거하지 않으셨으면 좋겠습니다. 오픈소스 저작권 표기부분도 마찬가지입니다. 별것 아니라고 생각하실 수 있고 footer가 이쁘지 않아서 없애시는 분들도 계신거 같긴 한데.. 그래도 앞으로도 무료로 공개하고 꾸준히 업데이트할 스킨인 만큼.. 이 부분은 지켜주셨으면 합니다. 스킨관련 정보표기는 단순히 스킨 제작자가 뿌듯해하기 위한 것이 아니라 스킨이 퍼져나가는 원동력입니다. 저는 제 스킨이 널리 퍼지기를 원하고 있구요. 그런만큼.. 저작물에 대한 저작권표시는 최소한의 예의라고 생각합니다.



   저번부터 밀고있는 슬로건이지만 FastBoot은 티스토리 정복이 목표인 스킨입니다. 티스토리를 정복하여 아예 티스토리 블로그 서비스 자체가 반응형 서비스를 구현할 때까지 버전업은 계속됩니다.

  그리고 다운로드 받아가실 때 밑에 추천버튼이랑 댓글 달아주시면 정말로 큰 힘이 됩니다.


이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. 리드이즈님 댓글 보고, 다시 모바일에서 대댓글 다는걸 해 봤는데 역시.... 메뉴가 활성화가 안되네요 ㅜㅜ;; 제 핸드폰은 .. 아이폰 4, 사파리 입니다. 제 블로그랑 리드이즈님 블로그 둘다 그러네요... 그리고 아이패드 2에서도 역시나... 안되고요... 이 부분은 계속 보이도록 제가 수정할 수 있는 부분인데... 지금은 귀차니즘때문에.. 걍 냅두고 있네요 ㅎㅎ

    그리고, 과객님이 남긴 댓글에서,,, ul, ol 관련 스타일시트와 속성은 제가 만든거를 이 글의 댓글로 남겨 보겠습니다. 지금은 ul 부분만 만들어 논 상태라서..(ol 은 잘 사용안해서) ol 도 만들어서 댓글로 남기겠습니다...
    • 사파리에서 그런 문제가 있군요. 제가 현재 쓰던 아이패드2를 처분해가지고 iOS기기를 가지고 있지 않습니다 ㅠ.. 사파리는 왠지 영역 탭한것을 CSS에서 반영하지 않는 것 같군요.

      ul, ol은 코드 지원해주시면 정말 감사하겠습니다. ^^;
  3. 본문, 포스트 영역 내에서 사용되는 리스트 태그에 스타일 시트를 적용 해 봤습니다. 아래의 스타일시트 코드를 복사해서 붙혀넣기 하시면 되고요. 예제는 ... http://onasaju.tistory.com/264 이곳에서 확인할 수 있습니다. 확인 해 보시고 맘에 드시는 분들은 아래의 소스코드를 가져가서 style.css 에 붙혀넣기 해 주시면 되고요, 스타일 시트의 속성과 값을 아시는 분들은 사용자 정의화 해서 수정해서 사용해도 될 것 같습니다.

    .article ul {
    list-style-type:circle;
    list-style-position: inside;
    margin:15px;
    padding-left:5px;
    display:block;
    border-left:5px solid #eee;
    }
    .article li {
    line-height: 200%;
    margin-bottom:5px;
    }
    .article ol {
    list-style-type:decimal;
    list-style-position: outside;
    margin:10px;
    padding-left:20px;
    display:block;
    border-left:5px solid #4CA9D3;
    }
    • 좋네요~ ㅋㅋ
      다음버전에서는 본문쪽 마크업에도 신경써야할듯 합니다.
    • 제 입맛대로.... 스타일 속성과 값을 준거라서...사용자 본인에게 맞게끔 ... 조금씩 변경해서 사용하면 괜찮을 것 같아요 ㅎㅎ

      본문쪽도... 편의사항들을 고려해서... 하나씩 집어넣다보면 끝이 없더라고요 ... 얼마전까지만 해도, 글 작성시 유용하게 사용되는 애니메이션 효과들을 10가지 이상 만들어서 사용해볼까도 생각했었는데... 귀차니즘과 시간이 오래걸려서... 일단 접어두고만 있네요 ㅎㅎ
  4. 넘 넘 감사합니다~~
    잘 쓰겄습니다~
    알랴뷰~~~♡
  5. 스킨을 찾은지 3주째... 드디어 마음에 꼭 드는 스킨을 찾았네요. 정말 감사합니다.
    오늘은 밤이 늦어 스킨 적용만 해보고, 내일 글 쓰고 잘 표시되는지 확인하려고요 ㅎㅎ
    다시한번 감사드립니다~
  6. 드디어 찾았네요

    처음 형식을 리스트 형식으로 할려면 어떻게 해야하나요?
    • 본문에 기본값 설정하는 법 있으니 다시 읽어보세요.. ㅋㅋ
      따로 포스팅도 했습니다.
      http://blog.readiz.com/173
    • BEMORE
    • 2014.03.23 17:57 신고
    정말 맘에 드는 스킨이네요!!! 감사합니다~!
  7. 반응형 스킨 찾고 있었는데 정말 감사합니다 ~!! ^^
    • 1.4 버전 올라가면서 대부분 잡힌 것으로 보입니다만 기능이상 발견하시면 꼭 좀 이야기 해주세요~
  8. 안녕하세요, Readiz 님이 제작하신 스킨을 잘 사용하고 있는 프매씨 입니다.
    다름이 아니오라, FastBoot 스킨의 사이드바 width 폭을 늘리고 싶은데, 하는 방법을 몰라서 이렇게 찾아뵙게 되었습니다.

    기존 사이드바 크기가 280대인 것 같은데 300~310대로 늘리고 싶네요.
    어떻게 하는지 알려주시면 감사합니다.

    소스가 만약 길어진다면 ruddbs5301@naver.com 으로 부탁드립니다..!
    • 사이드바가 280대인 것은 Desktop의 경우이고 그 크기는 반응형이기 때문에 유동적입니다. 본문:사이드바 비율폭을 수정하실 수 있으며 이 수정에 관련해서 따로 포스팅하였습니다.
  9. Readiz 님 질문이 있습니다!! 괜찮으시면 Help 좀 부탁드립니다^^
    다름이 아니라 카테고리를 눌러서 들어가면 페이지가 저절로 오픈이 안되더라고요.
    겔러리, 리스트 같은 버튼을 눌러야 가능하던데...이게 어느 부분을 수정해야 저절로 보여질까요?ㅎㅎ
    감사합니다^^
    • 기본값 설정에 버그가 있었네요. 제보 감사합니다. 확인하였습니다.
      rMode = 2; // Deafault Mode
      setCookie('rMode',rMode,365);
      기본값을 rMode 2로 바꾸셨던데 그 아래에 setCookie 한줄 추가해주세요.
      다음버전에서 수정해야할 문제로 보이네요.
    • 매번 감사합니다^^ 좋은 하루되세요
  10. 제가 반응형 스킨이 처음이라 몇가지 질문좀 하겠습니다. contemt부분의 너비를 조절할려고 하는데 어디를 수정해야되죠? 그리고 상단에 홈, 태그, 방명록등이 있는 메뉴(?)에 다른것을 추가도 해볼려고 하는 데 어떻게 하죠?
    • 질문을 하실 때는 정보 공유를 위해 비밀글로 하지 않으셨으면 합니다. 따로 포스팅 해두었으니 확인해보세요.
  11. 버전 1.4 다운 받아 제 블로그에 적용했습니다. ie8환경에서 이상 없이 잘 보이고 있습니다.
    제 입맛에 맞게 수정했는데,수정해 괜찮죠? 저작권 부분은 수정하지 않았습니다.
    잘사용하겠습니다. 감사합니다.
  12. 추천
    꾸욱 누르고 갑니다.
  13. 게시판마다 보여지는 형식을 다르게 할 수 있나요?!
    • 조금 응용하면 카테고리마다 달라지게 할 수 있습니다.
      이에 관해서는 엑수시아님 블로그에 잘 설명되어 있어요. 구글에서 엑수시아로 검색하시면 찾아가실 수 있습니다.
    • 2014.06.03 18:51
    비밀댓글입니다
    • 네.. 최신버전도 있으니 괜찮으시면 그걸로!
  14. 감사합니다.
    1.61버전 잘 적용되는군요~^^
    기본 스킨들보다 훨씬 좋은거 같습니다.
  15. 와 정말 예쁜 블로그스킨이네요. 공유해주셔서 감사합니다~~!♥
  16. 쓰고나서 scm music이 없어졌는데요 어떻게 해야하나요?
    • 아 다시 올려야하네요 다시 body에 너으니까 되네요
  17. 잘 사용하고 있습니다. 감사합니다. ^^
    • 2016.02.02 18:25
    비밀댓글입니다
  18. 감사합니다.

티스토리 툴바