지금 이 블로그에 쓰이고 있는 bootstrap 기반의 티스토리 스킨입니다.

세부적인 디자인을 변경하고, 아이콘 로딩으로 인한 느린 속도를 개선했습니다. 또한 지금 이 블로그에 달려있는 광고 칸을 쓸 수 있도록 했습니다.

사용한 외부 자원들

Font Awesome을 제거하고, Bootstrap이 기본으로 제공하는 glyphicon으로 대체했습니다.

  1. jQuery
  2. Bootstrap

변경 사항

  1. 파일 폴더 구조를 바꿨습니다.

    image 폴더를 제거하고, oreo 폴더에 모든 파일을 넣었습니다. oreo 폴더에 있는 것만 모두 긁어서 업로드하시면 됩니다.
    또한 직접 편집해서 쓰실 분들을 위해 verbose 폴더에 최소화(minify)하지 않은 파일들을 따로 담아두었습니다.

    최소화된 html과 그렇지 않은 html의 차이는 들여쓰기을 전부 제거한 것 뿐입니다. 줄나누기를 없애는 것은 용량 감소가 적은 것에 비해 유지 보수가 좋지 않아져 하지 않았습니다. 그래도 직접 코드를 수정하실 때에는 verbose 폴더에 있는 파일을 수정하는 것이 편하실 겁니다 :)

  2. Font Awesome을 제거하고, Bootstrap이 기본으로 제공하는 glyphicon으로 대체했습니다.
  3. 도구 버튼들을 모두 그룹으로 묶었습니다. 글 제목 아래에 있는 편집 등의 버튼들, 댓글 옆에 붙는 버튼들이 이에 해당됩니다.
  4. 애드센스 광고 쓰는 분들을 위해 skin-with-adsense.html 파일을 따로 작성해두었습니다. 이 html 파일은 제 블로그에 집어넣은 두 가지 광고를 위한 코드만을 포함합니다. 이 파일에 adsense 코드를 복사해서 붙여넣으면 됩니다. 그리고 업로드할 때에는 꼭 파일명을 skin.html로 해야 하는 점을 잊지 마세요. 광고 코드를 넣는 위치를 빨리 찾을 수 있도록 아래 코드를 첨부합니다.
    
    ... 생략 ...
    
    <body id="[##_body_id_##]">
    <s_t3>
    <section style="position:fixed;right:20px;top:22vh" class="visible-lg-block">
    // your adsense code for 우측 큰 광고 (skyscrapper)
    </section>
    
    ... 중략 ...
    
    <section class="container" id="notices">
    <s_rct_notice>
    <ul class="notice-list margin-bottom-10">
    <s_rct_notice_rep>
    <li>
    <a href="[##_notice_rep_link_##]"><i class="glyphicon glyphicon-info-sign"></i> [##_notice_rep_title_##]</a>
    </li>
    </s_rct_notice_rep>
    </ul>
    </s_rct_notice>
    </section>
    
    <section class="container margin-bottom-10">
    // your adsense code for 반응형 광고
    </section>
    
    <section class="container" id="articles">
    <s_local>
    <div class="article">
    <h3>위치 로그 페이지가 없습니다.</h3>
    </div>
    </s_local>
    
    ... 후략 ...
    
  5. 글 안의 링크가 색깔이 기존 테마 색깔과 똑같아서 구분이 안되는 부분을 개선했습니다. 글 안의 링크는 초록 색깔로 나타납니다.

부디 개선만 됐으면 좋겠네요...

아래는 미리보기 화면 :>

Preview :: Bootstrap Tistory skin Oreo version 0.2 update

신고

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

4월의 초대장 나눔  (52) 2017.04.09
2017년 3월 티스토리 초대장 나눔  (42) 2017.03.05
Oreo 0.2 업뎃 (디자인 및 속도 개선, adsense 예제)  (22) 2017.02.12
2017년 2월의 초대장 나눔  (47) 2017.02.05
2017년 1월 초대장 나눔  (15) 2017.01.01
12월의 초대장 나눔  (34) 2016.12.03

  • 2017.02.28 16:35

    비밀댓글입니다

    BlogIcon 동건 2017.02.28 23:38 신고

    1. 우선 skin.html 파일에서 다음 부분을 찾아보세요.
    <s_article_rep>
    <s_index_article_rep>
    ...
    </s_index_article_rep>

    2. 여기 내용물 안에 치환자 [#_article_rep_summary_#]
    를 잘 사용하시면 될 것 같습니다. 다음 링크 부분에 있어야 할 치환자 같은데 설명이 안돼있네요 ㅠㅠ
    http://www.tistory.com/guide/skin/step3#2-8-1
    링크에서 보시듯이 치환자의 샾(#) 기호는 2개씩 넣어주세요, 원래대로 넣으니 댓글에서 안보이네요.

    더 상세한 설명이 필요하시면 댓글주세요:)

  • 2017.03.12 14:23

    비밀댓글입니다

    BlogIcon 동건 2017.03.12 14:47 신고

    안녕하세요 :>

    제 예상으로는 인터넷 주소가 띄어쓰기가 없는 특성으로 인해 어쩔 수 없는 문제일 것 같긴 합니다만...

    예제 삼아 저에게 문제가 되는 페이지 주소 하나를 알려주실 수 있으실까요? 제가 한 번 봐볼게요^^;;

    2017.03.12 14:54

    비밀댓글입니다

    BlogIcon 동건 2017.03.12 21:57 신고

    영상의 경우에는 iframe을 넣으실 때마다 직접 width="100%"를 조절해주시는 게 좋을 것 같습니다. (저도 그렇게 쓰고 있습니다 ^^;)

    예제로 주신 글을 예로 들자면
    <iframe src="http://videofarm.daum.net/controller/video/viewer/Video.html?vid=v0642yZ5dwSvcOJdiSJSJSw&amp;play_loc=daum_tistory&amp;alert=true&amp;m_use_inline=true&amp;m_prevent_sdk_use=true" scrolling="no" allowfullscreen="" frameborder="0" width="640" height="360"></iframe>

    이렇게 쓰고 계신데요. width="640" 대신 width="100%" 로 바꿔보시고 테스트 해보세요.

    링크 주소의 경우에는... 음... 저도 아직은 명쾌한 해답을 드리지 못할 것 같습니다 ^.ㅠ 추후에 뭔가 개선 방법을 찾으면 다시 알려드리겠습니다!

    스킨 사용 감사드려요 :>

    2017.03.12 21:59

    비밀댓글입니다

    BlogIcon 동건 2017.03.12 22:06 신고

    늦은 답변에도 좋게 봐주셔서 감사할 따름입니다, 바닉님도 좋은 주말 마무리하세요 ;]

  • 2017.07.12 11:20

    비밀댓글입니다

    BlogIcon 동건 2017.07.12 21:43 신고

    안녕하세요! 답변이 늦어 죄송해요, 아직 퇴근길입니다 ^^;;

    지금 배포된 코드와 제 블로그에 적용한 광고 관련 코드 확인 후 답변 드리겠습니다. 감사해요:]

  • 2017.07.12 22:08

    비밀댓글입니다

    BlogIcon 동건 2017.07.13 00:29 신고

    가장 답변하기 어려운 1번이 해결되어서 다행이네요! 나머지 사항에 대해 답변 드릴게요!

    2. 커스텀으로 수정하시는 것은 자유이지만, 따로 수정없이 바로 사용 가능합니다.

    3. 어떤 버전의 익스플로러를 쓰시나요? 최신 버전의 익스플로러 11에서는 별 문제가 없을 것이라 생각됩니다.

    우선은 제가 할 수 있는 코드 수정을 해서 올려두었습니다. 해결이 될련지는 모르겠네요 ^^;; 새로운 코드로 적용해보시고 확인해보실 수 있으신지요 ;]

  • BlogIcon 어노잉제이 2017.07.13 00:40 신고

    아 집에서는 또 잘 나오는걸 보니 아마도 회사컴이 버젼이 낮아서 그랬나봐요

    모든문제가 해결되었네요 감사합니다

    BlogIcon 동건 2017.07.13 00:48 신고

    오늘 코드 수정을 통해서 익스플로러 버전 8~11 까지는 문제가 없으리라 예상하지만... 확실하진 않네요 ㅠ

    무튼 제 스킨 좋아해주셔서 무척 감사합니다. 귀여운 .. 친구도 감사해요 ㅋㅋ

    또 도움 필요한 게 있으시면 물어봐주세요.

  • 2017.07.15 11:22

    비밀댓글입니다

    BlogIcon 동건 2017.07.15 11:45 신고

    안녕하세요! 저도 그런 메일을 종종 받은 적이 있는데요. 저의 개인적인 추측으로는 오른쪽 광고 고정 자체가 문제라기보다는 글의 내용 중에 화살표 같은 기능을 하는 글자 같은 것이 합쳐져서 (저는 절대 그렇게 의도한 것이 아니고 그런 효과가 없음에도 불구하고) 광고 클릭을 유도한다고 탐지가 되는 것 같습니다.

    저는 그냥 수정했다고 처리했더니 더 괴롭히지 않아서 그냥 잘 쓰고 있습니다 ^^;; 놀라셨겠네요. 그래도 알려주셔서 감사드려요:)

    2017.07.15 13:01

    비밀댓글입니다

    BlogIcon 동건 2017.07.15 15:56 신고

    앜ㅋㅋㅋㅋㅋㅋ아니에요 스킨때문에 당황하셨을 것 같아 송구하네용 ^.ㅠ

  • 2017.07.23 21:49

    비밀댓글입니다

    BlogIcon 동건 2017.07.25 20:16 신고

    연의 :D 님 안녕하세요, 답변이 꽤 늦어 죄송한 마음입니다. 초록 링크 색깔은 custom.css 또는 custom.min.css 에서 바꾸실 수 있습니다. 아래 selector를 찾으셔서 컬러 코드를 바꾼 후 적용 해보시겠어요?

    .article-pager a {color: #5cb85c} (기본 색깔)
    .article-pager a:hover, .article-pager a:focus {color: #3d8b3d} (마우스 오버 색깔)

    가장 마지막에 있는 것 같네요 :)

  • 2017.08.11 20:23

    비밀댓글입니다

    BlogIcon 동건 2017.08.15 11:28 신고

    안녕하세요. 다음과 같은 CSS 코드를 custom.min.css (또는 verbose/custom.css) 에 추가하셔야 할 것 같습니다.

    body {font-family: "원하시는 폰트";}

    참고로 기본으로 사용하고 있는 google noto sans 폰트를 위해 font.css 파일이 자성되어 있습니다. 혹시 웹폰트를 불러서 쓰실 때 참고하셔도 될 것 같습니다.

    스킨 사용해주셔서 감사합니다! 더 설명이 필요하시면 말씀해주세요.

티스토리 툴바