지금 이 블로그에 쓰이고 있는 bootstrap 기반의 티스토리 스킨입니다.
세부적인 디자인을 변경하고, 아이콘 로딩으로 인한 느린 속도를 개선했습니다. 또한 지금 이 블로그에 달려있는 광고 칸을 쓸 수 있도록 했습니다.
사용한 외부 자원들
Font Awesome을 제거하고, Bootstrap이 기본으로 제공하는 glyphicon으로 대체했습니다.
- jQuery
- Bootstrap
변경 사항
- 파일 폴더 구조를 바꿨습니다.
image폴더를 제거하고,oreo폴더에 모든 파일을 넣었습니다.oreo폴더에 있는 것만 모두 긁어서 업로드하시면 됩니다.
또한 직접 편집해서 쓰실 분들을 위해verbose폴더에 최소화(minify)하지 않은 파일들을 따로 담아두었습니다.
최소화된 html과 그렇지 않은 html의 차이는 들여쓰기을 전부 제거한 것 뿐입니다. 줄나누기를 없애는 것은 용량 감소가 적은 것에 비해 유지 보수가 좋지 않아져 하지 않았습니다. 그래도 직접 코드를 수정하실 때에는verbose폴더에 있는 파일을 수정하는 것이 편하실 겁니다 :) - Font Awesome을 제거하고, Bootstrap이 기본으로 제공하는 glyphicon으로 대체했습니다.
- 도구 버튼들을 모두 그룹으로 묶었습니다. 글 제목 아래에 있는 편집 등의 버튼들, 댓글 옆에 붙는 버튼들이 이에 해당됩니다.
- 애드센스 광고 쓰는 분들을 위해
skin-with-adsense.html파일을 따로 작성해두었습니다. 이 html 파일은 제 블로그에 집어넣은 두 가지 광고를 위한 코드만을 포함합니다. 이 파일에 adsense 코드를 복사해서 붙여넣으면 됩니다. 그리고 업로드할 때에는 꼭 파일명을skin.html로 해야 하는 점을 잊지 마세요. 광고 코드를 넣는 위치를 빨리 찾을 수 있도록 아래 코드를 첨부합니다.... 생략 ... <body id="tt-body-page"> <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=""><i class="glyphicon glyphicon-info-sign"></i> </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> ... 후략 ... - 글 안의 링크가 색깔이 기존 테마 색깔과 똑같아서 구분이 안되는 부분을 개선했습니다. 글 안의 링크는 초록 색깔로 나타납니다.
부디 개선만 됐으면 좋겠네요...
아래는 미리보기 화면 :>
반응형
'In Real Life' 카테고리의 다른 글
| 4월의 초대장 나눔 (52) | 2017.04.09 |
|---|---|
| 2017년 3월 티스토리 초대장 나눔 (42) | 2017.03.05 |
| 2017년 2월의 초대장 나눔 (47) | 2017.02.05 |
| 2017년 1월 초대장 나눔 (15) | 2017.01.01 |
| 12월의 초대장 나눔 (35) | 2016.12.03 |