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

Fast, Mobile First, Responsive, Gallery Type Category Skin

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

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

  

  

Major Specification

1. Offcanvas

2014/03/22 - [연재/FastBoot] - FastBoot 스킨에 Offcanvas 적용

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

2. Compatible with IE 7

2014/03/27 - [연재/FastBoot] - FastBoot IE7 동작

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

3. RSS Image Fetch

2014/03/26 - [연재/Tistory] - RSS Feed 이용, 최근글 목록에 이미지 넣기

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

4. Locator

2014/03/21 - [연재/FastBoot] - FastBoot스킨에 Locator 추가

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

5. Full-Responsive without any additional settings

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

ETC

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

Details

FastBoot v1.5.1

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

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

FastBoot v1.4 (참고)

http://blog.readiz.com/165

Demo

http://blog.readiz.com/

http://fastboot.tistory.com/

Download

FastBoot v1.5.zip

FastBoot v1.5.1.zip

Setup(Recommended)

2014/03/23 - [연재/FastBoot] - FastBoot v1.4 반응형 스킨 기본값 설정 해야할 것

  이번 버전은 긴 말이 필요하지 않은 것 같습니다. 여태 낸 버전 중 제일 자신있는 버전입니다. 현 스킨을 백업하시고 한번 적용해보세요. 자신의 블로그가 모바일에 어떻게 표현되는지.. :) 그리고 구조상(특히 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="https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17" 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="https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17" 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])) { 
	

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