티스토리 square 스킨 모바일 토글 버튼 추가하기
이걸 먼저 만들어서 글을 올리신 분들이 보이질 않아서..
제가 거의 최초로 올리게 된 것 같네요.
총 6시간 동안 상당한 시행착오를 한 결과, 방법을 찾았습니다.
저는 양쪽 사이드바를 만든 후,
추가로 만든 사이드바를 모바일에서도 열 수 있도록 토글 버튼을 추가하고자 했습니다.
Square 스킨에서는 잘 작동하지만,
다른 스킨에서 작동 여부는 테스트를 하지는 않았으니 참고 바랍니다.
!!! 경고 !!!
적지 않은 수정이 이루어지므로
시작 전 스킨 백업을 먼저 하시기 바랍니다.
수정 전 백업은 기본사항입니다.
백업을 하지 않고 진행하다가 문제가 발생하더라도 저는 책임지지 않습니다.
★★★★ 추가 ★★★★
치명적인 문제점이 발견되었습니다.
1. html
스킨 편집의 html에서, 거의 마지막 부분에 이 태그가 있습니다.
<div id="sidebar-toggle"><i class="icon-reorder"></i></div>
원래 있던 사이드바 토글 버튼의 태그입니다.
이 태그를 복사해서 토글을 추가해 줍시다.
<div id="sidebar-toggle"><i class="icon-reorder"></i></div>
<div id="sidebar-toggle2">목차</div>
id를 적당하게 바꾸어 줍시다. 저는 sidebar-toggle2로 정했습니다.
그리고 토글에 아이콘 대신 "목차"라는 텍스트를 입력했습니다.
만약 다른 아이콘을 사용하고 싶다면,
아래의 블로그를 참고하세요.
[Html] 웹 폰트 아이콘 Font Awesome(폰트 어썸) 사용법
웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하
coding-factory.tistory.com
이제 이 스크립트를 추가해 주어야 합니다.
<script>
$("#sidebar-toggle2").click(function ()
{ $("body").toggleClass("open");
});
</script>
기존에는 이런 코드가 html에 있었지만,
언제부턴가 사라지고 common.js에 들어가 있어서 한참을 헤매었습니다.
#sidebar-toggle2를 본인이 만들 두 번째 토글의 id로 바꾸어 줍시다.
여기서 제가 몇 시간 동안을 헤매게 만든 주요 원인이, 바로 저 "body"입니다.
원본에서의 코드는 이렇습니다.
<script>
$("#sidebar-toggle").click(function ()
{ $("html").toggleClass("open");
});
</script>
처음에는 저 html이나 open을 어떻게 잘 바꾸면 되지 않을까? 하고 이리저리 변형했지만 작동하질 않더군요.
이 코드에서 #sidebar-toggle2로만 바꾸고 했더니...
어떤 토글 버튼을 클릭하든 간에 오른쪽 사이드바만 펼쳐지던 사태가 발생했습니다.
근데 "html" 대신 "body"를 사용했더니 바로 작동이 되어서.. 상당히 허무했습니다.
2. CSS
CSS 코드는 익숙하지 않은 반응형을 건들어야 했기 때문에,
상당한 시행착오를 거쳐야 했습니다.
먼저 이 코드를 찾습니다.
#sidebar-toggle { display: none; }
바로 아래에 추가한 사이드바의 id를 사용해서 복붙해 줍니다.
#sidebar-toggle { display: none; }
#sidebar-toggle2 { display: none; }
이제 여기서부터가 매우 중요합니다.
@media all and ~ 로 시작하는 다음 코드를 찾아주세요.
"괄호( } )"까지 포함한 코드 전체를 복사해 줍니다.
@media all and (max-width: 1350px) {
#sidebar { z-index: 80;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#recent-post ul li .title {
opacity: 0.9;
top: inherit;
bottom: 0;
height: 50px;
line-height: 53px;
}
#recent-post ul li:nth-child(2n+0) .title { background-color: #333; }
#sidebar-toggle {
display: block;
position: fixed;
right: 10px;
bottom: 10px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #555;
background-color: #f1f1f1;
border-radius: 10px;
opacity: 0.9;
box-shadow: 0 0 10px #aaa;
z-index: 101;
}
html.open #sidebar { overflow-y: auto;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
html.open,
html.open body { overflow: hidden; }
#content { margin: 0 auto; padding: 0 10px; }
#content-inner { padding: 0; }
#head .date {
bottom: -10px;
right: 0;
left: inherit;
padding: 8px 5px 6px;
font-size: 11px;
}
.tag_label { padding: 0 0 10px 0; }
}
이제 이걸 붙여넣기 해줘야 하는데,
무조건 아래의 코드 "위쪽"에 붙여줘야 합니다!!!
@media all and (max-width: 639px) {
.list ul li a { display: block; }
붙여넣기 해 주었으면, 이제 하나씩 수정을 하겠습니다.
Id 수정
먼저 id 수정부터 하겠습니다.
#sidebar → #extraside
#sidebar : 현재 오른쪽 사이드바의 id
#extraside : 현재 왼쪽 사이드바의 id(따로 추가한 사이드바)
#sidebar-toggle -> #sidebar-toggle2
#sidebar-toggle : 현재 오른쪽 사이드바와 연결된 토글 버튼의 id
#sidebar-toggle2 : 왼쪽 사이드바와 연결할 토글 버튼의 id
id는 제가 쓴 거로 해도 되지만 본인이 정한 것으로 바꿔도 됩니다.
이것은 현재 적용된 저의 두 번째 사이드바와 토글버튼의 코드입니다. 이것을 이용하여 설명하겠습니다.
@media all and (max-width : 1350px) {
#extraside { z-index: 79;
-webkit-transform: translate3d(-250px,0,0);
-moz-transform: translate3d(-250px,0,0);
transform: translate3d(-250px,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#recent-post ul li .title { opacity: 0.9; top: inherit; bottom: 0; height: 50px; line-height: 53px; }
#recent-post ul li:nth-child(2n+0) .title { background-color: #333; }
#sidebar-toggle2{
display: block;
position: fixed;
left: 10px;
bottom: 10px;
width: 40px;
height: 40px;
line-height: 40px;
font-size : 12px;
text-align: center;
color: #555;
background-color: #f1f1f1;
border-radius: 10px;
opacity: 0.9;
box-shadow: 0 0 10px #aaa;
z-index: 101;
}
body.open #extraside { overflow-y: auto;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.2s;
}
body.open,
body.open body { overflow: hidden; }
#content { margin: 0 auto; padding: 0 10px; }
#content-inner { padding: 0; }
#head .date { bottom: -10px; right: 0; left: inherit; padding: 8px 5px 6px; font-size: 11px; }
.tag_label { padding: 0 0 10px 0; }
}
토글 버튼 위치 수정
#sidebar-toggle2{
display: block;
position: fixed;
left: 10px;
bottom: 10px;
width: 40px;
height: 40px;
line-height: 40px;
font-size : 12px;
text-align: center;
color: #555;
background-color: #f1f1f1;
border-radius: 10px;
opacity: 0.9;
box-shadow: 0 0 10px #aaa;
z-index: 101;
}
1) 버튼을 오른쪽에 추가할 경우
디폴트 값은 left: 0; 입니다.
따라서 left: 0; → right: 0;
2) 버튼을 왼쪽에 추가할 경우
왼쪽에 추가할 경우 위의 코드와 같이 left: 0; 으로 해주시면 됩니다.
토글 버튼 레이아웃 수정
위의 코드에서 입맛대로 수정하면 됩니다.
각 속성의 의미는 다음과 같습니다.
width: 40px;
토글 버튼의 가로길이가 40px임을 의미합니다.
height: 40px;
토글 버튼의 세로 길이가 40px임을 의미합니다.
line-height: 40px;
글자 또는 아이콘의 상하 위치를 조절할 수 있습니다.
font-size : 12px;
글자 또는 아이콘의 크기가 12px임을 의미합니다.
text-align: center;
글자 또는 아이콘을 중앙 정렬시키는 코드입니다.
color: #555;
글자 또는 아이콘의 색상입니다.
background-color: #f1f1f1;
토글버튼의 색상입니다.
html → body로 수정
body.open #extraside { overflow-y: auto;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.2s;
}
body.open,
body.open body { overflow: hidden; }
모든 html을 body로 바꿔야 합니다. 수정된 후의 코드가 바로 위의 코드입니다.
전 : html.open #extraside { overflow-y: auto; ~
후 : body.open #extraside { overflow-y: auto; ~
전 :
html.open,
html.open body { overflow: hidden; }
후 :
body.open,
body.open body { overflow: hidden; }
추가 내용
이건 꼭 추가할 필요는 없습니다만,
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
모바일에서 사이드바를 클릭 시 단어가 선택이 되면서 상당히 신경 쓰이게 만듭니다.
따라서 단어가 선택이 되지 못하게 하는 속성을 추가했습니다.
토글 버튼 노출 최소 가로길이
이제 마지막으로 수정해야 할 코드를 보겠습니다.
CSS에서 맨 마지막에 위치하고 있습니다.
@media all and (min-width: 1200px) {
#sidebar-toggle { display: none; }
}
여기서 (min-width: 1200px)의 의미는,
화면 가로길이가 1200px가 되기 전까지는 토글버튼이 보이지 않는 것입니다.
1200px보다 가로길이가 짧아지면 토글버튼이 보이게 됩니다.
어느 가로길이부터 토글버튼이 보이게 할지는 1200px 부분을 수정하면 됩니다.
이제 여기에 #sidebar-toggle2 { display: none; }를 추가하면 됩니다.
@media all and (min-width: 1200px) {
#sidebar-toggle { display: none; }
#sidebar-toggle2 { display: none; }
}
적용 결과
모든 코드를 적용하면 이렇게 토글 버튼을 추가할 수 있습니다.
gif라서 화질 저하가 일어난점 양해 부탁드립니다.
왼쪽 하단에 토글 버튼이 생성되었고, 클릭 시 사이드바가 왼쪽에서 튀어나오게 됩니다.
