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>의 끝부분에 넣으면 됩니다.

'뻘글' 카테고리의 다른 글

10월의 초대장 나눔  (35) 2016.10.06
9월 티스토리 초대장 나눔  (51) 2016.09.16
Oreo: Bootstrap 기반의 반응형 티스토리 스킨  (56) 2016.08.15
8월의 티스토리 초대장  (33) 2016.08.05
7월 초대장 나눔  (16) 2016.07.03
티스토리 초대장 나눔  (35) 2016.06.13

  • 이전 댓글 더보기
  • 스킨 진짜 이쁨 2016.10.22 11:59

    안녕하세요. 정말 스킨 이쁘네요.. 정말 신의 손이시네요..
    근데 http://cultpd.com/entry/%EA%B0%A4%EB%9F%AD%EC%8B%9C%EB%85%B8%ED%8A%B87-%ED%99%98%EB%B6%88%EA%B5%90%ED%99%98%EC%97%90-%EA%B0%A4%EB%9F%AD%EC%8B%9CS8-%EC%B6%9C%EC%8B%9C%ED%95%98%EB%A9%B4-%EB%AC%B4%EC%83%81-%EA%B5%90%EC%B2%B4-%EA%B0%A4%EB%9F%AD%EC%8B%9CS8-%EC%8A%A4%ED%8E%99%EC%98%88%EC%83%81 이분 블로그 아래 보시면 "많이본 글"이 썸네일로 나오는데.. 이 스킨에서는 구현할 수 없는건가요? 그게 아니더라도 썸네일로 아래쪽에 목록처럼 나오게 되면 진짜 좋을 것 같은데.. 가능할까요.ㅜㅜ 이것만 되면 이 스킨으로 블로그 만들고 싶네요.. 끝으로 스킨 정말 예뼈요~~

    BlogIcon 동건 2016.10.22 14:22 신고

    안녕하세요!
    말씀해주신 썸네일 리스트는 제가 시간 있을 때 작업해볼게요. 칭찬 고맙습니다 :)

  • BlogIcon Hangil33 2016.10.22 12:48 신고

    비밀글 기능이 작용하지 않습니다.

    BlogIcon 동건 2016.10.22 14:34 신고

    말씀하신 비밀글은 보호글을 말씀하시는 건가요? 보호글 기능은 마련되어있고, Hangil33님 블로그에 찾아가서 보호글이 작동하는 것도 확인했습니다. (자물쇠 아이콘이 달려있고, 클릭하면 비밀번호를 요구하지요)

    이 사항이 아니라면 알려주세용!

  • 2016.10.22 14:35

    비밀댓글입니다

    BlogIcon 동건 2016.10.22 14:38 신고

    정말 그렇군요. 제가 살펴보고 알려드리겠습니다. 제보 감사해요^^

    BlogIcon 동건 2016.10.22 14:53 신고

    오타가 있어서 수정했고, 엔터 치면 보호글을 읽을 수 있는 것을 확인했습니다. github에 반영해두었으니 다시 받으셔서 적용하셔야 될 것 같습니다.

  • BlogIcon Hangil33 2016.10.22 15:19 신고

    감사합니다.

    BlogIcon 동건 2016.10.22 15:31 신고

    저두 감사합니다, 좋은 주말 되세요 ;]

  • 2016.10.23 03:59

    비밀댓글입니다

  • BlogIcon Hangil33 2016.10.23 04:09 신고

    해외에서 댓글을 달나서 그런건지..ㅡ티스 토리 로그임을 안해서구런건지..

    BlogIcon 동건 2016.10.26 21:19 신고

    어떻게 그렇게 되신건가요? ㅠㅠ 글도 아니고 댓글을 남길 수 없다니... 무슨 상황인지 전혀 모르겠어요. 어찌 잘 해결하셨나요?

  • BlogIcon 그.리.다. 2016.10.31 14:16 신고

    대박 정말 감사드려요!!! 스킨 너무 예뻐서 감탄하고 적용하고 감탄했어요!! 복 많이 받으세요!!

    BlogIcon 동건 2016.11.02 00:07 신고

    우와... 저도 대박 고맙습니다!!! 그리드 형식으로 류준열씨가 엄청 많네요. 좋은 커스터마이징입니다:]

  • 파일이... 2016.11.08 14:03

    zip로 다운 받아서 티스토리에 업로드하고 저장 누르니깐....

    index.xml 파일이 유효기간이 어쩌고하면서 머가 뜨던데...

    저만 그런건지... 다운로드 방법이 잘못된건지 모르겠네요...

    BlogIcon 동건 2016.11.27 12:20 신고

    답글이 늦어 죄송합니다. 저도 제 파일을 새로 받아서 압축을 푼 뒤 테스트용 블로그에 적용해본 바, 같은 문제가 나오지 않아서 어떻게 도움을 드려야 할 지 모르겠습니다ㅠㅠ 뭔가 저에게 더 알려주실만 한 것이 있을까요?

  • BlogIcon Hangil33 2016.12.07 10:03 신고

    방명록에서 어떤 누군가가 비밀글을 작성해서 제가 비밀글을 달면.. 글쓴사람이 볼수가 없네요 ㅠ ㅠ

    BlogIcon 동건 2016.12.07 12:28 신고

    한길님 안녕하세요! 제가 알기로는 (아닐 수도 있지만요) 티스토리 자체적으로 그런 것 같습니다..ㅠㅠ 댓글에 비밀 댓글 달아도 글쓴 사람이 볼 수 없는 건 똑같은데, 티스토리가 방명록을 댓글 모듈로 만든 것 같더라구요 :(

  • BlogIcon Hangil33 2016.12.07 15:36 신고

    ㅋㅋㅋㅋㅋ... 구럼 비밀댓글은 댓글쓴 본인만 볼수잇다는 건데...그런 필요없는기능을 왜넣엇는지 ㅠ ㅠ..네...감사합니다

  • BlogIcon 갖은 2016.12.26 12:15 신고

    스킨 너무 예뻐요ㅠㅠ 잘 쓰겠습니다 감사합니다!

    BlogIcon 동건 2016.12.26 21:03 신고

    앗 감사해요 *_*

  • BlogIcon Hangil33 2017.01.05 18:47 신고

    안녕하세요~! 오랜만입니다. ㅠ 좌우 여백 이 너무 넓은거 같아 본문 내용이 좁아 보이는데. ..수치 조절은 어디서 할수 있죠>?

    BlogIcon 동건 2017.01.07 16:08 신고

    한길님 안녕하세요! 가장 쉬운 방법은 styles.css 를 직접 수정하는 방법입니다. 근데 이 파일이 minify가 되어있어서 좀 눈이 아프실 수도 있는데요... 파일을 열으셔서 ctrl+f로 "container"를 찾아보시면 다음과 같은 부분이 있습니다.

    .container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:750px}}@media (min-width:1200px){.container{width:750px}}

    여기 보시면 "width:750px"이라고 지정되어 있는 부분이 현재 적용되고 있는 수치입니다. 이를 수정해보시면서(늘려보시면서) 테스트해보시면 될 것 같습니다:)

    BlogIcon 동건 2017.01.07 16:12 신고

    "@media (min-width:???px)" 라는 부분은 사용자가 보는 스크린의 폭이 어느 정도냐에 따라 다르게 적용할 수 있는 조건입니다.
    min-width:768px => 아이패드 크기
    min-width:992px => 작은 모니터 크기
    min-width:1200px => 와이드 모니터 크기
    이므로 조건에 따라 다른 폭을 주실 수 있습니다. 저는 기본적으로 다 같은 750px을 줬기 때문에 큰 모니터에서도 패드 크기의 폭을 갖도록 해놨었습니다 ^^;;

    도움이 됐으면 좋겠구요, 여러 불편한 점이 있으신대도 이 테마를 이용해주시고 계속 물어봐주셔서 감사할 따름입니다 :)

  • BlogIcon Hangil33 2017.01.07 18:10 신고

    해결했습니다. 저야 말로 감사드려요 ㅠ ㅠ 항상 친절히 답해주셔서 감사히 쓰고있습니다. +_+

    BlogIcon 동건 2017.01.08 00:13 신고

    별 말씀을요 ^^ 늦었지만 새해 복 많이 받으세요!

  • BlogIcon 유령 고양이🐾 2017.10.05 21:23 신고

    스킨 잘쓰고있어요 고맙습니다. ^^ . 스킨이 너무 보기편하게 되어있어서 좋아요. 근데 쓰다보니까 한가지 불편한점이라면 댓글창 바로 아래에있는 페이지 넘기는 숫자있잖아요. 그거 누르면 색상 변하게 할수는 없을까요? 어떤 페이지에 있는지 알수있게 요. 커서를 올려놓으면 회색이되는데 클릭하고 치우면 다시 하얘지네요. ^^ 제가 해보려고했는데 html은 하나도 몰라서 봐도 모르겠네요 ^^;;

    BlogIcon 동건 2017.10.05 23:10 신고

    유령고양이님 안녕하세요. 현재 제가 드릴 수 있는 해결안은 글자 색만 바꾸는 정도일 것 같아요. (말씀하신 것처럼 마우스 올리면 색깔 바뀌는 것과 맞춰서 배경색을 바꾸는 것을 알아봤는데, 아직 방법을 못 찾았습니다.)

    custom.css 또는 custom.min.css 사용하시는 파일 마지막에 아래 코드를 추가해보시고 잘 되는지 알려주시면 좋겠습니다.

    .pagination > li > a .selected {color: #원하시는 색깔 코드}

    스킨 써주시고 의견 주시니 감사합니다 :-)

  • BlogIcon 유령 고양이🐾 2017.10.06 16:24 신고

    제가 해봤는데 안되네요 ^^;; 정확히 넣고 다시 설치했는데 안돼요 ~

    BlogIcon 동건 2017.10.06 16:41 신고

    코드 개선해서 github 저장소에 업데이트 했습니다. 현재 선택되어 있는 페이지 숫자는 초록색으로 나타나게 해두었어요. 다시 다운 받으셔서 확인해보세요 :)

  • BlogIcon 유령 고양이🐾 2017.10.06 16:42 신고

    저도 녹색으로 하려고했었는데 ^ㅁ^ 우와 고맙습니다 .

    BlogIcon 동건 2017.10.06 23:54 신고

    해결이 잘 되어서 다행입니다. 연휴 잘 보내세요 !

  • BlogIcon 유령 고양이🐾 2017.10.07 02:28 신고

    아 정말 고맙습니다. 스킨 잘쓸게요. 주말 잘보내세요 .^^

  • BlogIcon .log 2017.11.30 21:16 신고

    감사합니다!!

    BlogIcon 동건 2017.12.01 23:02 신고

    저도 감사합니다!

  • BlogIcon 사진의미학 2018.03.19 00:05 신고

    흑백이 조화로운 스킨입니다. ㅎ

    BlogIcon 동건 2018.03.19 14:04 신고

    좋은 평가 감사합니다 ^^!

  • BlogIcon momomaru 2018.05.02 17:17 신고

    너무 맘에 드는 스킨이네요*~ 고맙습니다.

    BlogIcon 동건 2018.05.06 13:14 신고

    감사해요 :)