FastBoot 반응형 스킨으로 블로그 스킨을 변경 후 무척 만족스럽게 사용하고 있습니다. 모바일과 PC 화면에서 모두 일관된 화면을 보여주고 무겁지 않고 이 정도의 퀄리티를 보여주는 무료스킨은 일찍이 접해 본적 없었던 듯 합니다.
그렇지만 아무리 잘 만든 스킨이어도 개개인 마다 다른 취향을 모두 만족시킬 수는 없는 법이어서 제 경우에도 아주 조금씩 기본 스킨을 변경해 사용하고 있습니다.
관련 이전 글
이전 글 링크에서 보시듯 일부 화면이나 기능을 입맛에 맞게 수정을 하였는데 그 이후에 조금 더 수정을 한 부분이 있어 공유 드립니다. 이런 부분을 저 처럼 수정하고 싶었는데 방법을 모르는 경우가 있으셨다면 조금이나마 도움이 될 듯 합니다.
먼저 이번 수정은 fastboot_index.js 파일 수정을 주로 한 부분이어서 티스토리 관리자 HTML/CSS 수정에서 파일 업로드 탭을 선택 후 fastboot_index.js 파일을 오른쪽 클릭하여 다른 이름으로 저장하여 다운 받으시길 바랍니다. 당연히 fastboot 스킨으로 블로그 스킨을 변경하신 경우에만 해당 파일이 있습니다.
추후 파일을 수정하고 나면 다시 하단의 추가 버튼을 눌러 재업로드 후 상단의 저장을 선택 하시면 됩니다.
제 경우에는 티에디션 대신 fastboot에서 제공하는 플립보드 형태의 메인을 사용하고 있습니다. 기존 디폴트로 제공하고 있는 구성도 나쁘지는 않지만 PC화면에서는 다양한 사이즈의 보드 형태보다 좀더 정돈된 형태가 제 취향이었기 때문에 메인 구성을 변경해 보았습니다.
fastboot_index.js 파일에서 Var Index_design = [12, 6, 6, 6, 6, 6, 6, 6, 6] 과 같이 변경 해 주시면 현재 제 블로그를 PC로 볼 때의 메인화면과 같은 구성이 됩니다. 숫자는 박스의 크기를 의미하고 12이면 1개 박스가 한 영역을 차지합니다. 6이면 이 블로그의 PC로 볼때의 메인화면 같이 2개 박스가 한줄을 차지하게 됩니다.좀더 상세한 변경 정보를 보시려면 원작자의 블로그 글을 참조 하시기 바랍니다.
http://blog.readiz.com/226#.V9gI9maJGUk
두번째로 수정한 사항은 fastboot 이 제공하는 기본 index가 이쁘고 좋긴 한데 종종 방문자들이 상단에 메뉴바가 있음에도 불구하고 메인화면에 노출된 포스트 외에 추가 포스트를 보려면 어찌해야 될지 잘 모르는 경우가 있었습니다. PC 화면의 경우는 그나마 사이드바를 추가하여 이러한 부분을 해소 할 수 있었는데 모바일의 경우는 사이드바가 나오는 하단까지 스크롤을 내리지 않는 경우도 많아 보여 최근 포스트를 보여주는 플립보드 하단에 More Post라는 카테고리로 연결되는 링크를 추가 하였습니다.
인덱스 화면에 사이드바 추가는 원 개발자의 블로그 글 참조 : http://blog.readiz.com/226#.V9gKuGaJGUk
역시
fastboot_index.js 파일 하단 갤러리 이미지 윗 부분에 다음과 같은 링크를 추가하면 됩니다. 물론 블로그 주소는 자신의 것으로 변경 하셔야 합니다.
화면상 조금 더 명시적이어서 방문자를 추가 포스트로 유도하기 좋습니다.
FastBoot 의 플립보드형태 기본 인덱스는 썸네일 이미지에 불투명도가 설정되어 있습니다. 사진 블로그라던가 사진 노출이 중요한 블로그라면 애써 편집한 사진이 다르게 보일 수 있어 이 부분을 없애고 싶어질 수도 있습니다. 그럴 경우에는 HTML/CSS 편집에서 index를 호출하는 코드에 있는 Opacity 값을 조정해 주면 됩니다. 디폴트 페이지에서는 80으로 설정되어 있는 부분을 100으로 변경 하면 됩니다.
document.write('<style>#content,#sidebar{display:none}#coverDiv{min-height:100%;margin-bottom:50px;display:block}#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>');
이러한 부분을 수정한 후 블로그에 다시 접속해 보면 변경 사항이 바로 적용되지 않거나 나타나지 않는 경우가 종종 있습니다. JS파일을 캐시해 두기 때문인데 새로 고침을 하지 않는 이상 변경 사항이 브라우져에 나타나지 않을 경우가 많습니다. 그럴 경우 HTML/CSS 편집에서 fastboot_index.js 파일을 호출하는 부분에 version 정보를 추가해 두면 편리합니다. 아래와 같이 fstboot_index.js?version=20160931 같이 버전을 변경하면 즉시 반영되는 것을 보실 수 있습니다.
사소한 변경이지만 저와 같은 생각으로 변경을 원하는 분들께는 필요한 기능 일수도 있겠다 싶어 공유 합니다.
이제 곧 추석 연휴이군요. 방문해 주신 분들 모두 즐거운 추석 되시길 바랍니다.
