블로그를 모바일 앱처럼! FastBoot v1.5.1 배포

Posted by Readiz
2014.03.29 02:10 반응형 티스토리/FastBoot



Fast, Mobile First, Responsive, Gallery Type Category Skin



  v1.6 공개되었습니다: http://blog.readiz.com/214

  어느덧 v1.5.1입니다. 처음 제작했던 알파버전과 비교하면 정말 많이 변했다고 제 자신이 느끼는 중입니다. 점점 블로그 돌아다니다보면 제 스킨이 많아지는 것 같아 뿌듯하게 느끼고 있습니다. 이제 커스텀 강좌와 조금 다른 형태의 스킨도 배포하면 2단형이 별로 좋지 않다고 생각되시는 분들도 제 스킨을 달게되지 않을까.. 생각하고 있습니다.



  

  





Major Specification


1. Offcanvas



  Offcanvas란 메뉴버튼을 눌렀을 때 화면 전체가 우측으로 이동하면서 좌측에 메뉴가 뜨는 것을 말합니다. 상단 스크린샷에서 자세히 보실 수 있습니다. 기본적으로 사용자의 아무 설정 없이도 모바일에서 Offcanvas기능을 사용하실 수 있습니다. 카테고리가 자동 적용되어 나타납니다.



2. Compatible with IE 7



  IE 7에서도 작동하는 스킨입니다. 반응형 스킨이 대부분 IE 7까지는 고려하지 않지만 이번 버전업으로 IE 7에서도 블로그를 방문하는 사람들이 글을 읽을 수 있습니다. 물론 스킨이 조금은 다르게 표현됩니다.



3. RSS Image Fetch



  갤러리형 스킨은 Ajax를 이용하여 이미지를 불러오고, FastBoot역시 마찬가지이긴 합니다만, 블로그의 RSS를 먼저 읽어서 이미지를 가져온 다음에 Ajax를 활용하기 때문에 이미지를 로딩하는 속도가 훨씬 빠릅니다. 특히 최근글만 읽어올 경우에는 Ajax 요청이 0입니다.



4. Locator



  엑수시아님이 배포하는 Locator 소스를 활용하여 본문 상단에 Locator가 추가되었습니다. 사용자들이 현재 어느 위치에 있는지 파악하기 쉽습니다.



5. Full-Responsive without any additional settings

  다른 설정을 하지 않으셔도 완전한 반응형으로 구동됩니다. 티에디션만 제외하면.. 



ETC

  미세한 레이아웃 차이들이 있습니다. 코멘트 메뉴라던가 하는 부분들에 CSS-Transition이 적용되었습니다.





Details



FastBoot v1.5.1

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



 3가지 제보받은 문제점 마이너 업데이트 합니다. 하단 부분에 수정된 부분 추가해두었으니 간단하게 수정하세요~



FastBoot v1.4 (참고)


Demo


Download


Setup(Recommended)



  이번 버전은 긴 말이 필요하지 않은 것 같습니다. 여태 낸 버전 중 제일 자신있는 버전입니다. 현 스킨을 백업하시고 한번 적용해보세요. 자신의 블로그가 모바일에 어떻게 표현되는지.. :) 그리고 구조상(특히 Offcanvas 때문에) 워낙 많은 변화가 있었던 만큼 업그레이드는 비추천합니다. 하다가 꼬일 가능성이 많으며 이는 저도 어떻게 해드릴 수가 없습니다. 새로 적용하신 다음에 커스텀했던 부분을 적용하시는 것이 빠를 듯 합니다.


  적용과정에 문제 있으신 분들은 이 글 코멘트나 방명록 활용하시면 됩니다. 다만 비밀글로 하시면 정보공유에 도움될 것이 없으니 자제 부탁드립니다. 커스텀에 관련해서는 왠만큼 답변해드리고 있지만, 경우에 따라 도와드리기 힘들 수도 있습니다. 기초적인 커스텀은 이 블로그에서 왠만큼 소개하고 있으니 읽어보세요.



Lisence


  이 스킨의 최대 목표는 모바일 지원이 좋지 않은 티스토리에 널리 퍼져나가서, 티스토리가 더더욱 Awesome한 서비스가 되도록 하는 것입니다. 검색엔진 순위에서 티스토리가 네이버 블로그 등에 밀리고 있는데, 이러한 상황에서도 티스토리가 1등 블로그가 되었으면 하는 바람에서 제작중인 스킨입니다. 따라서 스킨이 퍼지기 위해서라도 스킨 적용을 하시는 분께서는 다른 접속자가 자신의 스킨을 어디서 받을 수 있는지 명기하셔야 합니다. Footer를 수정하실 때, 특히 이점 지켜주셨으면 합니다. 아무런 대가없이 무료로 배포하고 있는 스킨인 만큼, 이 부분 만큼은 꼭 지켜주십시오.





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

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



  v1.5 버전이 나오면서 이제 처음 목표로 잡았던 기능들은 어느정도 구현이 완료되어서.. 다음 업데이트는 이제 마이너한 것들이 될 가능성이 큽니다. :) 응원해주신 여러분들 감사합니다.







2014/03/29 알려진 문제점

(v1.5 받으신 분들에 해당, 1.5.1에서 패치되었습니다)




1. IE8에서 상단바 메뉴 안열리는 문제

  style.css에서

	
.navbar {
  opacity: 0.9; 
  filter: alpha(opacity=90);
} 
	

에서 filter: ~ 부분을 삭제하셔서,

	
.navbar {
  opacity: 0.9; 
} 
	

로 만드시면 정상적으로 열립니다. IE8에서도 메뉴 이쁘게 보이게 한다고 투명도를 준게 기능을 작동 안시킬 줄은 꿈에도 몰랐군요. 이놈의 IE버그..




2. 카테고리의 리스트형과 심플타이틀형에서 제목에 '가 들어가면 글이 노출 안되는 문제

  1차적으로 얼른 수정하시려면 제목에 작은따옴표 '이 들어간것을 제거하시면 됩니다. 글 제목 수정 없이 코드 수정으로도 해결이 가능합니다. 


  아래 부분을 찾아주세요. (Ctrl+F로 찾으시면 편합니다)

	
<script>
	srchL.innerHTML += '<li><a href="[$$_list_rep_link_$$]"><span class="thumb"><img src="http://cfile6.uf.tistory.com/image/2714794F5303740F17001C" alt="" class="dno"></span>[$$_list_rep_title_$$]</a> <span class="cnt badge badge-danger">[$$_list_rep_rp_cnt_$$]</span><br/><span class="date">[$$_list_rep_regdate_$$]</span></li>';
	srchT.innerHTML += '<li><span class="date">[$$_list_rep_regdate_$$]</span> <a href="[$$_list_rep_link_$$]">[$$_list_rep_title_$$]</a> <span class="cnt badge badge-danger">[$$_list_rep_rp_cnt_$$]</span></li>';
</script> 
	

  아래 코드로 바꿔주세요.

	
<div id="titleTmp">[$$_list_rep_title_$$]</div>
<script>
	var titleTmp = document.getElementById('titleTmp');
	srchL.innerHTML += '<li><a href="[$$_list_rep_link_$$]"><span class="thumb"><img src="http://cfile6.uf.tistory.com/image/2714794F5303740F17001C" alt="" class="dno"></span>'+titleTmp.innerHTML+'</a> <span class="cnt badge badge-danger">[$$_list_rep_rp_cnt_$$]</span><br/><span class="date">[$$_list_rep_regdate_$$]</span></li>';
	srchT.innerHTML += '<li><span class="date">[$$_list_rep_regdate_$$]</span> <a href="[$$_list_rep_link_$$]">'+titleTmp.innerHTML+'</a> <span class="cnt badge badge-danger">[$$_list_rep_rp_cnt_$$]</span></li>';
	titleTmp.parentNode.removeChild(titleTmp);
</script> 
	

  티스토리 블로그에 ##가 치환자라 입력이 안되어 ##는 $$로 표기하였으니 코드 삽입하실 때 유의하시기 바랍니다.





3. 최근글 목록 이미지 안뜨는 문제

  여러가지 요인이 있는데, 우선 발행한 글에서만 이미지가 뜹니다. 왜냐하면 이번 버전부터 최근글 목록 이미지를 RSS에서 불러오기 때문이구요.

  또한 티스토리 주소 스타일을 문자 (http://notice.tistory.com/entry/티스토리-환영합니다.)로 하신 분들은 지금 제대로 이미지가 뜨고 있지 않습니다. 숫자로 주소 체계를 바꾸시면 근본적으로 깔끔하게 문제 해결이 되고, 문자가 들어가는 주소 스타일을 고수하고 싶은 분들이시라면 다음 절차를 밟아주세요.


  skin.html 하단 스크립트 부분에 다음과 같은 부분이 있습니다. (Ctrl+F 활용하세요)

var link = $(this).children('link').text(); link = link.replace('http://',''); link = '/' + link.split('/')[1]; var des = $(this).children('description').text();

다음 코드로 바꿔주세요.

var link = $(this).children('link').text(); link = link.replace('http://',''); if (link.split('/')[2]!=null) link = '/' + link.split('/')[1] + '/' + link.split('/')[2] ; else link = '/' + link.split('/')[1]; var des = $(this).children('description').text();

 

 한 부분 더 있습니다. 비슷한 위치에 있습니다만 마찬가지로 Ctrl+F로 찾아가시면 편합니다.


	
if (t==recent_items_link[i]) { 
	

이 부분을,
	
if (t==decodeURIComponent(recent_items_link[i])) { 
	

이렇게 수정해주세요. 이러면 이제 문제 해결입니다.





저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. 감사히 잘 쓰겠습니다 !! 감사합니다 ^^
  3. 너무 깔끔하고 산뜻해서 적용해 봅니다. ^^;
    • 네 감사합니다. 버전업된 버전도 있으니 참고하세요.
  4. 그 우측 하단에 links라는 칸에 링크를 만들려면 어떻해야 하나요?
    • 티스토리 관리자에서 링크추가하세요~
  5. 최신글 목록에 이미지가 안떠서 알려주신대로 했는데 여전히 전 이미지가 안떠서
    포스팅을 올리고 수정을 해야 이미지가 뜨는데......왜 그럴까요ㅠ
    • 브라우저에서 캐싱을 하기 때문에 적용되기까지 시간이 걸리는 것으로 보입니다. 올리신 후에 타 브라우저로 확인해보시면 바로 적용되는 것 보실 수 있습니다.
  6. 네^^ 확인해보니 되네요~^^
  7. 그저 감사드립니다. 아직 웹페이지 초보인데 많이 배워갑니다 :D
  8. "검색엔진 순위에서 티스토리가 네이버 블로그 등에 밀리고 있는데, 이러한 상황에서도 티스토리가 1등 블로그가 되었으면 하는 바람에서 제작중인 스킨입니다." <-- 동의합니다. 감사히 사용하겠습니다 ~
  9. ###
  10. ###
  11. 2014/09/01 21:32
    멋진 스킨~ 테스트 후 적용 해보려 받아갑니다. 감사합니다.
  12. 잘쓰겠습니다 ㅎㅎ.ㅎ 넘이뻐요^^
  13. 정말정말 감사합니다!! 덕분에 멋진 블로그 만들기를 시작할 수 있게 되었어요~
  14. 안녕하세요^^ 1.5버전 사용자입니다.
    덕분에 많은 도움 받고 있습니다. 다름이 아니라.. 혹시 1.5 버전에서 상단에 따라오는 "하늘색" 상단메뉴바의 색상을
    변경할 수 있을까요? 혹시 방법이 있는지, 가능한지 궁금합니다 ㅠㅠ 부탁드리겠습니다.
  15. 감사합니다.
    반응형 티스토리 스킨을 하루종일 검토한 결과 저에게 제일 맞는것 같습니다.
  16. 최신 버전은 1.6이지만 레이아웃이 1.5버전이 너무 이쁘고 맘에 들어서 적용해보았습니다^^ 스킨 정말 잘 만드신 것 같아요!
    • 알케미
    • 2015.06.03 01:00 신고
    FastBoot 1.6.1 스킨으로 이제 블로그를 시작하려는 초보입니다.
    좋은 스킨 감사드립니다.

    궁금한 부분이 있어 여쭙고 싶은데요,
    카테고리를 클릭하여 Title 형태로 화면에 보여줄 때,
    날짜, 제목, 댓글 개수로 표시되는데,
    여기에 각 페이지별 tag도 표시하고 싶습니다.
    어떻게 해야 할까요?
    감사합니다.
  17. 안녕하세요. 스킨 너무나 감사히 잘 쓰고 있는 1인입니다.
    1.4까지는 그런대로 잘 적용 되는듯 한데 1.5부터는 아에 메인에 내용이 하나도 안뜨고 게시물 누르면 위에 위치 잡아주는 부분이 안번하더군요 ㅎㅎ 제 잘못이지만 서두... 그리고 카테고리 누를시에 표현되는 이미지겔러리사 그림이 3분의1부분만 나오는 이유는 뭘까요 http://adamfiji.tistory.com/ 현재 1.4버전 적용중입니다.
  18. 스킨 좋습니다.^^
    잘 사용해보겠습니다.^^
  19. 아직 초짜라 무한 루프 예상되지만 ㅎㅎ 공들여 만들어주신 스킨 열공해서 잘 쓰겠습니다. 감사합니다
  20. 스킨을 너무나도 잘 사용하고 있습니다.
    이렇게 정성들여 스킨을 만들어주셔서 너무 너무 감사드립니다.
    다름아니라 제 블로그에서 검색을 하게되면 검색리스트가 나와야 하는데,
    검색어가 포함된 본문글 하나만 떡하니 나오고 나머지 검색된 글들은 밑에 1,2,3,4 이런식의 화면이동으로만 전환이 가능하더라구요.
    검색을 했을때 검색리스트를 쭉 보여주고 그 리스트 중에 하나를 선택하면 본문글이 나오도록 하고싶습니다.
    다시한번 감사드립니다.^^

티스토리 툴바