아재의 시선
반응형 스킨 커스텀 설정 팁 본문
Fastboot 1.6.1이 차후 버전업 됬을때를 기대하며 손쉬운 교체를 위해 이전 포스팅에선 스킨 적용시에 수정했던 애드센스 부분을 다뤘고, 이번에는 기타 부분에 대해 기록해둔다.
스킨 교체 후 검색관련 문제라던가 방문자수 감소에 대한 이야기가 있어서 테스트를 해보고자 했는데 구글 애널리틱스 코드를 추가하는 것을 깜빡해 수포로 돌아간게 좀 아쉽다.
1. 네비게이션바 배경
상단바 배경 넣기 / 상단바 색상 변경하기
블로그 전체의 분위기를 좌우하는 포인트. 리디즈님은 플랫한 색들을 추천.
하지만 문제는 패스트부트 스킨을 사용하는 경우 블로그들의 개성을 나타내기가 쉽지가 않다는 것.
그런 와중에 특색을 나타내기 쉬운 방법은 배경 커스텀이 아닐까한다.
단, 배경 이미지 파일이 너무 큰 경우 로딩이 느려지는 단점이 있다.
포토샵이 없는 경우는 여기서 https://pixlr.com/editor/
상단바를 포함하여 스킨 전체적인 색들을 조정할 때에는
Colorcop.zip이런 류의 색상추출 프로그램을 통해 검색으로 html/css 를 검색해서 수정하는 방식으로 하면된다.
2. 메인화면을 카테고리로 리다이렉트
기본 메인화면은 플립보드형인데 이상태에서 사이드바를 나오게 할 수 도있지만
개인적으로는 카테고리에서 나오는 모습을 더 선호해 메인화면을 카테고리로 리다이렉트 하는 방식을 차용.
/* FastBoot Index by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
if(url[1] == '') { location.href = '/category' }
var rssLogFlag;
if(!f_enableTedition && url[1] == '') {
3. 사이드바 추천게시물 모듈 추가 및 자리 이동
사이드바에 추천글 넣기
<s_sidebar_element>
<!-- 추천 포스트 모듈 -->
<div id="recommended" class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-home"></i> Main</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="/11"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/2174FA4C547D8B5101" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 대항해시대5 데이터 정리
<span class="name"><span>1</span></span><div class="clearfix"></div></div></a>
</li>
<li class="list-group-item">
<a href="/7"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/270C204E55F8E0E501" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 대항2 핸드폰에서 편하게 플레이 완전정리
<span class="name"><span>3</span></span><div class="clearfix"></div></div></a>
</li>
<li class="list-group-item">
<a href="/44"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/2567D64C560231E32D" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 대다음팟시대의 개막과 향후
<div class="clearfix"></div></div></a>
</li>
<li class="list-group-item">
<a href="/38"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/2113B550561536A524" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> GE엔터테인먼트 정지사건과 인터넷방송
<span class="name"><span>10</span></span><div class="clearfix"></div></div></a>
</li>
<li class="list-group-item">
<a href="/41"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/2378204F55D0B5513B" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 바이두검색과 바이두앱에서 자막보기
<div class="clearfix"></div></div></a>
</li>
<li class="list-group-item">
<a href="/28"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/242CDD475492B74021" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 대항해시대5 시나리오 공략2
<div class="clearfix"></div></div></a>
</li>
</ul>
</div>
</s_sidebar_element>
http://nacancel.tistory.com/51
Fastboot 1.6.1 애드센스와 커스텀 설정 팁1
http://nacancel.tistory.com/52
Fastboot 1.6.1 애드센스와 커스텀 설정 팁2
