택대리의 티스토리 스킨 #1 수정판

택대리의 티스토리 스킨 #1 수정판

안녕하세요 택대리 입니다.

처음으로 끄적끄적 티스토리 공식 반응형 스킨 #1 을 만들었습니다.

정말 연습삼아 이거 어떻게 만들지? 하고 고민하다가 제가 필요한 기능을 넣은 것인데

많은 분들이 공감해주시고 잘쓰겠다는 답글을 남겨주시더라구요 

그래서 조큼의 용기를 얻었습니다.

기존에 말씀드린대로 HTML5 와 css3 겨우 이해하는 정도의 수준이니 ㅠ 이해해 주시구요. 답글을 달아주신 한분께서 좌측 메뉴의 반응형으로 메뉴가 사라지는 기준이 820px이다 보니 중간 사이즈에서 메뉴와 본문이 겹치는 상황이 발생한다는 의견을 주셨습니다.

사실 근래에 나오는 모니터들은 최소 1200px은 넘기 때문에 별 신경은 안썼는데 태블릿 PC나 소형 노트북에서는 조큼 신경이 쓰더라구요

그래서 반응형 단계를 총 3단계로 나누어서 수정해보았습니다. :)

< 1200px 이상 > - 좌측 메뉴 + 티스토리 반응형 스킨 #1

< 820px 부터 1200px > - 티스토리 공식 반응형 스킨 #1 좌측메뉴 사라짐

< 820 px이하 > - 좌측 메뉴 사라지고 반응형 버튼이 생김 (  820px 이하일 때의 #1의 공식 스킨 형태)

다운로드는 아래를 파일을 클릭하시면 됩니다.

티스토리기본반응형(3단계).zip

앗 그리고 마지막으로 

스킨보시고 답글을 달아주신 분을 통해 발견한 에러는 다음과 같습니다.

- 블로그내 검색을 하였을 때 검색수만 나오고 결과물이 안나오는 경우가 있습니다.

HTML입니다.

<!--왼쪽 메뉴바-->

<div id="left_menu" class="left_menu_list">

• 분류 전체보기 (175)
  • 장사꾼택대리 (68)
  • 북촌도담 (5)
  • 인사동 마늘보쌈 (14)
  • 택대리네 고기집 (8)
  • 금융이야기 (8)
  • 택대리라이프 (41)
  • IT공부공부 (12)
  • Yammy in Korea (2)
  • CANNON 6D (13)
  • 사기관련자료정리(비공개) (0)

<ul id="left_guest">

<li ><a href="https://ptmazinga.tistory.com/guestbook">방명록</a></li>

</ul>

</div>

CSS +미디어 쿼리 입니다.

/*왼쪽 메뉴바*/

#left_menu{position:fixed;left:-5px;top:100px;width:150px;border-radius:5px;border:1px solid #dcdcdc;border-radius:5px;padding:15px;}

.left_menu_list ul li { line-height:18px }

.left_menu_list ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333;height:17px }

.left_menu_list ul li.selected > a,

.left_menu_list ul li a:hover { text-decoration:underline;color:#36b39e }

.left_menu_list ul li ul li a {  }

.left_menu_list ul li ul li ul { padding-bottom:6px; margin-top:-6px }

.left_menu_list ul li ul li ul li { color:#b4b4b4; padding-left:21px }

.left_menu_list ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }

.left_menu_list ul li ul li ul li a::before { content:'· ' }

#left_guest{margin-top: 20px;}

@media only screen and (max-width:1200px) and (min-width: 821px){

#left_menu{display:none;}}

@media only screen and (max-width:820px) {#left_menu{display:none;}

마음대로 ~ 사용하세요! :) 지금까지 택대리 였습니다