FastBoot 스킨 좌측 삼각형 메뉴 아이콘 조절-크기,
인터넷에서 정보를 찾다 보면 FastBoot 스킨을 적용하는 티스토리 블로그가 상당히 많이 보인다. 본 블로그도 FastBoot 스킨을 사용하고 있다. 티스토리를 이용하면서 반응형 스킨에 적응하는데 많은 시간이 걸리고 있다. 평소 브라우저 크기를 축소해서 보는 편이라 본 스킨의 좌측 삼각형 메뉴 아이콘 이 본문 글을 가리는 경우가 종종 있다. 그래서 좌측 삼각형 메뉴 아이콘을 조절할 생각이 있는데 모바일 메뉴 아이콘 에 지장을 줄 것 같아서 조심스러웠다. 우연히 '눈썹있는 모나리자'님(http://hadongguk7.tistory.com)의 블로그를 방문하게 됐다. 하루 방문자가 3,000을 상회하는 능력맀는 블로거였다. 이분도 FastBoot 스킨을 사용하는데 좌측 삼각형 메뉴 아이콘이 안 보였다. 개발자도구로 찾아보니 의외로 복잡한 방법이 아니었다 . Good 아이디어였다 .
- 없애기(숨기기)-'눈썹 있는 모나리자'님 방법
- 크기 조절하기
skin HTML상 좌측 삼각형 메뉴 아이콘이 위치하는 요소는 위의 붉은 박스의 <div id="lnav"></div>로 보이는데 내용이 없는 빈 요소다. 삭제 또는 스타일에 display: none을 적용한 바 모바일 메뉴에서 에러가 났다.
HTML 마지막 부근의 위에 보이는 스크립트 'fastboot_offcanvas.min.js'에서 내용을 삽입하고 있다. ie8 이상에서만 작동하는 조건부 스크립트다. 익스플로러 개발자도구에서 ie8 모드로 변경해보니 ie8에서는 메뉴 아이콘이 나오지 않았다. 본 스크립트에서 id #lnav 요소에 class .lntoggle의 span 요소를 추가한다.
메뉴 아이콘 없애기(숨기기)
없애는 것이 아니고 숨기는 방법이다.
▶style.css 파일에서 보면 왼쪽 이미지 #lnav의 좌측 위치는(left) -220px로 본 요소(너비 220px)를 안보이도록 위치 시키고
▶오른쪽 이미지 #lnav>.lntoggle의 스타일 속성에서 left 220px로 좌측 끝에 보이도록 원위치 시킨다.
▶lnav>.lntoggle의 left를 0px로 변경 또는 삭제(주석 처리)한다.
이제 메뉴 아이콘은 안 보이고 모바일 메뉴는 건재한다.
뭐 하나 수정하는데 길게
말하나 하겠는데 모나리자님의 착안이 아주 좋았다.
메뉴 아이콘 크기 조절
본 스킨의 기본 폰트 사이즈는 14px이다. 추가된 span(class lntoggle)의 내용은 <i class="fa fa- caret-right fa-3x"> 이다. fontawesome의 아이콘이다. fontawesome에 대해서는 본인도 많이 알지는 못한다.
▲fa-caret-right: 오른쪽 삼각형 화살표 아이콘
▲fa-3x: 기본 또는 폰트 사이즈의 3배 크기 글꼴
▶본 그래픽 폰트는 스킨 HTML에 없으므로 변경하려면 스크립트를 고쳐야 한다.
▶본 그래픽 폰트는 상위 부모 요소의 폰트 사이즈를 기준으로 한다.
▶상위 요소 #lnav에 inline font-size를 설정한다. 기본 14px인 사이즈를 7px로 설정한다.
▶<div id="lnav" style="font-size: 7px"></div>
▶.lntoggle의 속성을 width: 25px height: 30px로 변경해본다.
이런 모양으로 축소될 수있다.
이상 간단한 내용을 읽어 주신 데 감사드린다.
2017/12/16 - [웹페이지] - fastboot 스킨 수정-메뉴버튼 비활성 로그인아웃 표기 오류
2017/11/28 - [웹페이지] - 반응형 블로그 FastBoot 스킨 가로 너비폭 조절 방법 3가지-스킨 본문 사이드바
2018/01/19 - [웹페이지] - FastBoot 스킨 사이드바 긴 수직형 애드센스 광고 올리기와 여백 처리