Oreo: Bootstrap 기반의 반응형 티스토리 스킨

Oreo 스킨이 업데이트 되었습니다.

최신 버젼으로 사용해보세요 :> Oreo 0.2 살펴보기

---

자급자족하기 위해 제작한 티스토리 스킨을 Oreo라는 이름으로 공유하고자 합니다. 지금 이 블로그에 적용된 스킨입니다. Bootstrap 기반에서 큰 수정 없이 최대한 단순하게 만들었고, 색상 테마도 무난한 흰검입니다. 마음에 무채색처럼 메마르신 분들이 좋아하실 듯 합니다. (사실 bootstrap 테마 설정만 알아서 할 수 있다면 원하는 색의 테마로 얼마든지 적용 가능합니다. 도움이 필요하시면 댓글로 문의해주세요.)

이 스킨의 가장 큰 특징은 좁은 화면입니다. 화면이 넓어져봤자 가독성이 떨어지기만 한다는 생각을 바탕으로 데스크탑 화면을 패드 넓이에 맞춰서 기본적인 화면의 폭을 좁게 만들었고(750픽셀) 단순한 디자인을 위해 텍스트와 아이콘 만으로 화면을 채웠습니다. 또한 모바일 화면에 신경을 썼습니다. 스마트폰으로 화면을 확인해보신다면 꽤나 깔끔한 디자인을 느낄 수 있을 것이라 생각합니다.

다만 제가 사용하는 기능 위주로만 만들었기 때문에 스킨이 완전하지 않습니다. 현재 사이드바 기능으로 최근 글/댓글, 태그, 글 저장소, 조회수 부분만 구현되어 있습니다.

혹시 사용하시는 분이 계시다면, 미흡한 부분이 분명히 있을 터이니 부담 없이 저에게 알려주시면 제가 부담 없이 반영해드리겠습니다. 아니면 github에서 issue로 직접 문의하셔도 좋구요. 소스코드와 설치 방법은 아래 링크를 참조하시면 됩니다.

다운로드: https://github.com/dgkim5360/oreo
개발로그: http://dgkim5360.tistory.com/entry/making-bootstrap-skin-for-tistory
관련공지: http://dgkim5360.tistory.com/notice/27

애드센스 사용 팁

제가 광고를 넣은 방식을 설명하겠습니다. 광고 단위의 사이즈를 728x90과 반응형 이렇게 두 가지만 써봤습니다. 사실 반응형은 원하시는 위치에 그냥 넣으시면 되는데, 꼭 container 클래스 안에 넣어야 합니다.

<section class="container">
    <!-- 반응형 애드센스 코드 -->
</section>

728x90 사이즈의 광고를 넣고자 하는 경우 유의할 점이 있습니다. 모바일 화면을 옆으로 뚫고 나오기 때문에 모바일 화면에서 728x90 광고를 숨겨줘야 합니다. hidden-xs 클래스를 추가하면 됩니다. 아래는 제 블로그에 쓰이는 코드입니다.

<section class="container" id="notices">
    <!-- 공지 사항 리스트 -->
</section>

<section class="container hidden-xs">
    <!-- 728x90 애드센스 코드 -->
</section>

<section class="container" id="articles">
    <!-- 메인 중단 부분 -->
</section>

그리고 저는 반응형 광고를 글의 끄트머리 부분에 집어넣었는데, 티스토리 치환자 <s_permalink_article_rep>의 끝부분에 넣으면 됩니다.