반응형스킨(FastBoot)으로 갈아타다

얼마전 티스토리 블로그에 반응형 스킨을 도입할까, 말까 하는 고민이 있었는데 드디어 반응형 스킨을 도입하고 1차적인 세팅을 끝마쳤다.

티스토리에서 기본으로 제공하는 스킨은 PC와 모바일의 화면을 따로 적용해야만 해서, 스킨을 변경하더라도 모바일에서는 항상 기본적인 템플릿으로만 표시되었다.

반응형으로 만들어진 스킨은 PC와 모바일 및 다른 기기의 화면크기에서 자유롭게 변형되어 원래의 모습을 가변시키지만, 전체적인 틀은 항상유지한다. 따라서 PC에서 전체적인 테마를 잡고 작업을 해도 모바일에서 항상 같은 모습을 보여줄 수 있는 장점이 있다.

이번에 새롭게 도입한 반응형 스킨은 Readiz님(http://blog.readiz.com/)이 만들어 배포한 FastBoot라는 스킨이다. 이미 많은 블로거들이 사용중인 이 스킨은 수많은 기기들과 각 브라우저들과의 호환성이 좋다고 알려져있다.

기본적인 설치 및 세팅은 Readiz님(http://blog.readiz.com/)의 블로그를 참조하면 될 것이고, 스킨은 http://blog.readiz.com/214 이곳에서 다운 받을 수 있다.

 

스킨을 다운로드 받은 후 설치는 굉장히 쉬운편이다.

처음 설치후에 다른 세팅이 필요하지 않을만큼 예쁜 화면구성을 보여준다. 블로그에 크게 추가할 것이 없다면 기본적인 형태로 사용하는 것을 추천한다. 만약 이것저것 추가 구성을 하거나 조금의 변형을 주고싶다면 소스를 보고 각각에 맞게 수정을 해야한다.

왠만한 세팅의 소스 수정도 왠만하면 Readiz님(http://blog.readiz.com/)의 블로그에 나와 있으므로, 잘 보고 따라한다면 크게 문제없이 가능했다.

제일 문제였던 건, 메인화면의 사이드바 출력(http://blog.readiz.com/223)과 메인화면을 마음대로 구성(http://blog.readiz.com/226)하는 부분이었다. 따라한다고 따라했지만, 쉽게 적용이 되지 않았다.

저 두부분을 하나로 합치면 모바일이나 창이 줄어들때 사이드바가 자연스럽게 내려가지 않고, 계속 그자리에 머물러 원래의 메인화면을 줄여버렸다. Readiz님의 블로그에서 해결방법을 찾아봤지만, 사이드바 출력 코드와 메인화면을 마음대로 구성하는 코드를 합친 소스는 없었다.

하지만 두 소스를 잘 조합하면 된다고 Readiz님의 블로그에 나와있어 두가지의 소스를 비교하여 가능하게 했다.

이렇게 이것저것 소스를 만지니, 어느정도 FastBoot 스킨을 파악 할 수 있었다.(하지만 누굴 가르쳐 줄 수준은 아님) 장장 3일에 걸친 시간을 투자하여 드디어 1차적인 세팅을 끝내고 사용할 수 있게 되었다.

Readiz님(http://blog.readiz.com/)님의 블로그를 보며 이런저런 세팅을 따라하면서 잘 안되었던 부분들!

1. 블로그 하단 좌측에 광고 넣기(http://blog.readiz.com/206)에서는 소스를 똑같이 따라하고 미리보기로 보면 원래 표시될 광고자리에 3개의 광고 떴다.(다른 분들도 그럴까?) 그래서 왜 안되지 하면서 고민을 했었는데, 답은 의외로 미리보기에서 찾았다. 소스를 넣고 미리보기가 아닌 저장을 누른 후 새창에서 실행하니 정상적으로 광고가 출력되고 이었다. 혹시 이 문제로 고민하는 분들은 수정한 소스를 저장하고 새창에서 블로그를 열어보기 바란다.

2. 사이드바 출력(http://blog.readiz.com/223)과 메인화면을 마음대로 구성(http://blog.readiz.com/226)하는 부분의 소스를 합칠 때 창의 크기에 따라 화면이 뭉개질때에는 메인화면을 마음대로 구성(http://blog.readiz.com/226)에 나와있는 소스에 아래의 구문으로 바꾸어 해결하였다.

document.write('<style>#leftContent{display:none;}#sidebar{float:right;}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv{float:left;width:75%;margin-top:-15px;}@media screen and (max-width: 991px){#coverDiv{width:100%;margin-top:0}}#coverDiv img{float:right;padding-left:10px;max-width:100%}#coverDiv .info p{margin-bottom:50px}#coverDiv .col-md-12,#coverDiv .col-md-2,#coverDiv .col-md-3,#coverDiv .col-md-4,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-2 img,#coverDiv .col-md-3 img,#coverDiv .col-md-4 img{float:none;display:block;margin:auto;padding:0}#coverDiv .col-md-3 img,#coverDiv .col-md-2 img{display:none}#coverDiv .col-md-12 img{max-height:200px}#coverDiv .col-md-6 img{max-height:150px}#coverDiv p.des{font-size:12px}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none}#coverDiv h5{margin-bottom:5px}#coverDiv .pubDate{float:right;font-weight:700}#coverDiv .loading{height:1080px}#coverDiv img{-ms-filter:"alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8}#coverDiv img:hover{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1}#outer_btn_left,#outer_btn_right{display:none!important}@media screen and (max-width:767px){#coverDiv .col-md-12 p.des,#coverDiv .col-md-6 p.des, #coverDiv .col-md-4 p.des, #coverDiv .col-md-3 p.des, #coverDiv .col-md-2 p.des{display:none}#coverDiv .col-md-3 img,#coverDiv .col-md-2 img{display:block}#coverDiv .col-md-12 img,#coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none}}.contentPadding{background-color:#fff;padding:10px;margin:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}</style>');
}

혹시 두 부분을 합치는데 어려움이 있다면 이렇게 한번 사용하면 해결이 될지도 모르겠다. (아래의 첨부파일 이용)

해결법.txt