13년 08.07~ 11/12까지 사용하였던 티스토리 스킨을 다른 티스토리 블로그에도 적용이 가능하게 바꿔서 공개합니다. 초기버전을 올릴까... 라는 생각도 해보았지만 코드도 지저분하고, 반응형도 아니라서 가장 마지막 버전이었던 2.8을 개정해 3으로 업그레이드 하였습니다.
작년 7월 하반기에 작업에 들어가서 약 일주일만에 만들어낸 스킨입니다. 물론 그 이후로 오랜시간동안 수 많은 개선작업을 거쳐와서 현재의 완성도를 가지게 되었습니다. 초창기에는 배경색도 존재하고 그림자도 여러군대 쓰인 모습이었지만 버전업을 거치면서 점점 플랫한 스타일로 바꾸어 나갔습니다. -> 스킨업데이트 내역
기본 바탕이 된 프레임웍은 부트스트랩 2.3.2이며 부트스트랩 2.x버전을 사용했기 때문에 IE7이상의 브라우저에 모두 호환이 됩니다. 웹폰트는 구글 폰트에서 끌어오고 있으며, 한글 폰트는 시스템 기본폰트를 사용하게끔 설정이 되어있습니다. 윈도우 같은 경우 맑은고딕, 맥에서는 SD네오고딕이 적용됩니다.
주요 기능을 살펴보면 반응형 스킨으로 제작되어 여러해상도를 지원합니다.
메인화면(첫번쨰 사진) 에는 티에디션 적용시 레이어 슬라이더가 위치하고 있습니다. 완벽하지는 않지만 티에디션도 어느정도 반응형이 됩니다.
포스팅 화면에서는 레이어 슬라이더가 보이지 않습니다.
스킨 견본 페이지에서 실제 모습을 볼수 있습니다.
사이드바 요소는 전부 따로 움직일수 있습니다.
사이드바는 총 5개가 제공이 되며, 사이드바1은 본문 옆이고 나머지 4개는 하단부에 위치하게 됩니다.
검색결과는 Masonry를 사용해서 검색결과 섬네일이 자동으로 배열되게 되어있습니다. 검색결과용 섬네일 이미지 소스는 Yongzz님의 Masonry 레이아웃입니다.
자바스크립트로 구동되는 드롭다운 메뉴를 기본으로 제공하며, 이 메뉴는 사용자가 자신의 용도에 맞게 수정할수 있습니다.
###html
<!--메인메뉴-->
<div class="main-menu" id="navi">
<div class="container">
<div class="clearfix fl">
<a class="mobile_menu fl" id="simple-menu" href="#sidr">Menu</a>
<ul id="nav">
<li><a href="https://est0que.tistory.com/">Home</a></li>
<li><a href="/category">Blog</a></li>
<li><a href="#">Single Button</a></li>
<li><a href="#">Tree Menu</a>
<ul>
<li><a href="#">Sub1</a>
<li><a href="#">Sub2 With Sub Menu</a>
<ul>
<li><a href="#">Sub-Sub1</a></li>
<li><a href="#">Sub-Sub2</a></li>
</ul>
<li><a href="#">Sub with sub 2</a>
<ul>
<li><a href="#">Sub-Sub1</a></li>
<li><a href="#">Sub-Sub2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://est0que.tistory.com/guestbook">Guestbook</a></li>
<li><a href="https://est0que.tistory.com/tag">Tags</a></li>
<li><a href="https://est0que.tistory.com/keylog">Keyword</a></li>
<li><a href="/media">MediaLog</a></li>
<li><a href="/location">LocalLog</a></li>
<li><a href="https://est0que.tistory.com/manage">Admin</a></li>
<li><a href="https://est0que.tistory.com/manage/entry/post">Write</a></li>
<li><a href="https://est0que.tistory.com/rss"onclick="window.open(this.href); return false">Rss</a></li>
</ul>
</div>
<a href="https://est0que.tistory.com/" class="navlogo fr">Life is a Journey</a>
</div>
</div>
<!--메인메뉴-->
HTML에서 메인메뉴 부분을 수정해주세요.
상단메뉴는 스크롤을 내리면 창위에 붙어서 따라 내려오게 됩니다.
###html
<!-- 프로필 레이어 -->
<div class="profile-layer clearfix">
<img src="https://t1.daumcdn.net/cfile/tistory/2445A538531BD56226" width="100" height="100" class="fl">
<div class="profile-text">
<p class="about-the"><i>About the Author</i> - Estoque </p>
<p>So this, is what the dream feels like, this is the victory we long for... » Contact Me: <a href="mailto:운영자 메일주소" target="_top">운영자메일주소</a></p>
</div>
</div>
<!-- 프로필 레이어 -->
이 스킨을 쓰기 위해서 HTML을 건드려야 할 부분은 거의 없도록 했습니다. 설정해줘야 할 부분은 프로필난의 메일 주소 부분인데, 이 마저도 필요 없으면 그냥 지워버리시면 됩니다.
###html
<a href="/1" class="ls-layer" style="slidedirection: left; slidedelay: 7000; durationin: 1500; durationout: 1500; ">
<img src="https://t1.daumcdn.net/cfile/tistory/255FB94952D2553101" class="ls-bg source-image "/>
</a> <!-- 견본 -->
레이어 슬라이더 같은 경우에는 위와 같은 코드 구조를 가지고 있으며, anchor에 원하는 주소를 넣고 img에 원하는 이미지를 넣으면 메인화면 슬라이더 이미지가 뜨게됩니다. 이미지는 1280X300해상도로 넣어주셔야 합니다.
유의사항
개인 별 커스텀 수정 요청 받지 않습니다. 수정 요청 금지.
하단부 저작권 표시 지우지 마세요.
티에디션은 반응형으로 지원하지 않습니다.
티에디션 기본 베이스 프레임 웍인 블루프린트와의 충돌 문제 때문에 티에디션을 반응형으로 만들기 매우 귀찮고 까다롭기에 별도로 반응형 지원을 하지 않습니다. 능력 되시는 분은 직접 수정해서 쓰시기 바랍니다.
스킨설치방법
스킨을 다운로드 받습니다.
TechAesthetic.zip
관리> 스킨>스킨등록으로 들어갑니다.
추가 버튼을 누른뒤, 다운로드 받은 스킨 폴더에 있는 내용물을 모두 업로드 합니다.
업로드 한뒤 저장을 합니다.
보관함에 가서 방금 업로드한 스킨을 적용합니다.
스킨이 정상적으로 적용 되었습니다.
스킨자체의 수정은 허용하지만 수정한 스킨의 재배포는 허용하지 않습니다.
스킨 커스텀 개조 요청은 받지 않습니다.
스킨에 관한 질문은 해당 댓글 란에 적어주세요. 방명록이나 메일로 질문할시에는 답변하지 않고 가차 없이 삭제합니다.
기부 감사합니다.
