혹시 모를 오류가 있을 수 있으니 사용 중인 스킨은 반드시 백업해주시고 스킨을 적용해주세요.
(1) 일부 메뉴에 한해 글 목록의 썸네일 이미지를 숨겨주는 코드입니다.
- 40열과 45열의 '/category/☆' 부분에 자신의 카테고리 주소를 넣어주세요.
- 한 가지 메뉴에서만 썸네일을 숨기고 싶은 경우 44열의 <script>...</script>는 지워주시고 39열의 스크립트만 수정해주세요.
- 메뉴를 더 추가하고 싶다면 원하는 만큼 해당 스크립트 구문을 복붙한 후 수정하시면 됩니다.
(2) 웹에서 출력되는 메뉴입니다.
- ★과 ☆ 부분을 지워주시고 자신의 블로그 카테고리 주소로 변경해주세요.
- 메뉴를 없애거나 추가하고 싶은 경우 <ul>...</ul> 부분을 지우거나 복붙해서 사용하시면 됩니다.
- 메뉴 갯수가 여섯 개를 초과하게 되면 레이아웃이 일그러질 수 있으므로 이 경우 css에서 별도 조정이 필요합니다.
(3) 모바일에서 출력되는 메뉴입니다.
- <!-- mobile menu 1 -->은 패드에서, <!-- mobile menu 2 -->은 스마트폰에서 보여지는 메뉴입니다.
- 마찬가지로 ★과 ☆ 부분을 자신의 블로그 카테고리 주소로 변경해주세요.
- 메뉴를 없애거나 추가하고 싶은 경우 <li>...</li> 부분을 지우거나 복붙해서 사용하세요.
(4) 스킨 상단 부분에 출력되는 내용입니다.
- 116열의 내용을 원하시는 문구로 변경해주세요.
(5) 스킨 최하단 부분에 출력되는 내용입니다.
- 398열의 <div class="footer">...</div> 안의 내용을 원하시는 문구로 변경해주세요.
(6) 본문에 첨부된 사진이 없을 때 썸네일로 나타날 이미지를 설정합니다.
- 기본 썸네일을 다른 이미지로 변경하고 싶은 경우 원하는 이미지를 xxx.png로 저장해 새로 업로드해주세요.
- 또는 이미지를 업로드한 뒤 132열의 "./images/xxx.png" 부분을 "./images/이미지 이름"으로 변경해주세요.
(7) 메뉴의 로켓 모양 탑 버튼을 삭제합니다.
- <!-- top --> 부분에 해당하는 74열 소스를 지워주시고, 아래 </div> 부분은 지우지 말아주세요.
(8) 배경색을 바꾸고 싶어요.
- CSS에서 Ctrl+F를 누른 뒤 background: #fff;와 background-color: #fff를 각각 검색한 다음, 체크되는 부분 모두 원하는 색상 코드로 수정해주세요.
- body { ... } 안에 background-color: #색상; 을 추가해주세요.
(1) 이전 스킨을 적용하면 메뉴의 탑 버튼이 좌측으로 쏠리는 현상 수정
- CSS에서 /* menu */와 /* top */ 소스를 모두 지워주시고 아래 소스를 복사해서 붙여넣어주세요.
/* menu */
.header { z-index: 100; display: block; position: fixed; width: 80px; height: 105%; margin-top: -50px; overflow: hidden; border-right: 4px solid #000; background: #fff; }
.header ul { display: inline-block; list-style: none; width: 80px; line-height: 80px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); text-transform: lowercase; color: #000; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 26px; }
.header ul a { color: #000 !important; }
/* top */
.icon { bottom: 4.5%; display: block; position: absolute; line-height: 100px; width: 100px; height: 100px; margin-left: 13px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
(2) 모바일 화면에서 헤더 메뉴가 오른쪽으로 밀려있는 현상 수정
- CSS 맨 아래에 /* mobile screen */에 해당하는 구문들을 전부 지워버리고 아래 파일을 다운 받아서 안에 있는 소스를 그 자리에 복붙해서 넣어주세요.
모바일 메뉴 수정.txt
