티스토리 반응형 스킨 마크쿼리 스파이더웹 카테고리 수정 방법

얼마 전 토탈인포 블로그 스킨을 티스토리 반응형 스킨 마크쿼리 스파이더웹 4.0으로 변경하였다. 며칠 사용하다 보니 크게 손 볼 곳은 없었지만, 필수로 수정해줘야 할 곳들이 눈에 띄었다. 스킨에 몇 가지 문제점들이 있는 것 같았다. 관련 직종에 종사하는 것도 아니고, 관심을 두고 공부한 일이 없기에 틀린 내용일지도 모른다. 하지만 이 문제점들은 토탈인포에만 해당 되는 것이 아니라, 이 스킨을 적용하는 모든 블로그가 겪어야 하는 문제로 보였다. 문제점으로 보였던 곳은 크게 3가지다. 커버 이미지 문제, 무한 로딩 문제, 카테고리 문제. 토탈인포와 같이 동일한 문제를 겪고 있다면 오늘 글을 참고하여 수정하길 바란다.

한 편의 글에 3가지 문제에 대한 해결 방법을 설명하려 했지만, 내용이 너무 길어지는 관계로 여러 편의 글로 나눠 발행하도록하겠다. 오늘은 우선 마크퉈리 스파이더웹 스킨의 카테고리 수정 방법이다.

마크쿼리 스파이더웹 스킨 상단에는 메뉴바가 있다. 이 메뉴바는 만약 마크쿼리 스파이더웹 스킨이 티스토리 반응형 스킨이 아니었다면 아무런 문제도 되지 않았을 것이다. 웹스킨과 모바일 스킨을 별도로 사용하면 말이다. 이 드롭다운 메뉴, 데스크탑 웹 스킨에선 서브 메뉴로 활용하면 된다. 사이드바에 카테고리 모듈을 꺼내 놓으면 되고 말이다. 하지만 마크쿼리 스파이더웹 스킨은 반응형 스킨이기에 문제가 된다. 이 메뉴바는 모바일 스킨에서 카테고리 혹은 카테고리 링크 역활을 해줘야 한다.

모바일에서 카테고리 모듈이 글 하단에 보이도록 배치 시키면 되지 않냐고 할 사람들이 있을지 모르니 미리 답변 주겠다. 화면을 끌어 올려 카테고리를 이용하게 만드는 것이 옳다고 생각한다면 당신이 틀린 것이다. 둘레길 지도 안내판을 둘레길 끝자락에 두지 않는 것과 안내 데스크를 건물 꼭대기 층에 위치 시키지 않는 이유가 뭐라고 생각하는가? 블로그는 물론 사이트의 카테고리 혹은 메뉴는 방문자가 쉽게 접근할 수 있는 위치에 배치 시켜야 한다.

마크쿼리 스파이더웹 스킨의 메뉴바는 사용자가 직접 skin.html 스킨 편집에서 정 및 편집을 할 수 있다. 블로그 카테고리에 맞게 조금만 수정 편집 해주면 반응형 스킨 답게 바꿔 사용할 수 있다.

표시한 영역이 마크쿼리 스파이더웹 스킨의 상단 메뉴 소스 부분이다. 해당 부분의 링크와 링크명을 변경하면 된다.

예를 들면 아래와 같이 되어 있는 예시 소스 부분을

<li class="drawer-submenu-item"><a href="/category">Archives</a></li>

아래와 같이 변경하면 토탈인포의 카테고리 생활정보처럼 변경된다.

<li class="drawer-submenu-item"><a href="/category/%EB%9D%BC%EC%9D%B4%ED%94%84/%EC%83%9D%ED%99%9C%EC%A0%95%EB%B3%B4">생활정보</a></li>

굵게 표시한 검정색 글자 부분을 자신의 블로그 카테고리에 맞게 수정하면 된다. 위의 예시중 /category는 링크 URL이고, Archives은 표시되는 링크명이다. /category는 /category/%EB%9D%BC%EC%9D%B4%ED%94%84/%EC%83%9D%ED%99%9C%EC%A0%95%EB%B3%B4로, Archives는 생활정보로 변경한 것이다.

카테고리 혹은 메뉴가 더 필요하다면, <li class ... ... </li> 부분을 필요한 만큼 복사해서 붙여 넣은 후 링크와 링크명을 수정하면 된다.

<li class ... ... </li> 부분을 필요한 만큼 추가한 후 링크와 링크명을 수정하면 위와 같이 상단바에 표시되는 링크가 늘어난다.

모바일로 접속하면 예시 소스 부분은 위와 같이 보이게 된다.

하위 카테고리를 사용할 수 있는 드롭 다운 메뉴(admin 부분)를 더 많이 만들고 싶다면 해당 드롭 다운 메뉴 소스 부분을 복사한 후 필요한 만큼 붙여 넣어 사용하면 된다. 위 예제 캡쳐 이미지로 설명하자면, 109번째 줄에서 114번 줄까지 복사한 후 바로 아래에 붙여 넣으면 된다. 복사해서 붙여 넣은 소스가 115번째 줄~ 120번째 줄이다.

드롭 다운 메뉴 적용 예시는 토탈인포에 적용되어 있으니 스마트폰으로 방문한 사람이라면 화면 좌측 상단 메뉴 버튼을 클릭하여 확인하기 바란다. 컴퓨터로 방문한 사람들은 상단 메뉴바로 확인하면 되겠다.

블로그 카테고리 링크는 자신의 블로그에서 확인 할 수 있다. 카테고리에 마우스를 가져간 후 마우스 우클릭을 하면 메뉴가 펼쳐지는데, 속성을 클릭하면 해당 카테고리의 링크를 확인 할 수 있다.

주소(URL)부분 카테고리 링크를 복사하여 소스에 붙여 넣으면 된다. 복사한 링크 주소를 붙여 넣을 때 도메인 부분은 제거 하는 것이 좋다. 예를 들면 카테고리 링크 주소가 'http://totalinfo.kr/category/생활정보'라고 한다면 스킨 소스 부분에 붙여 넣을 때는 링크를 붙여 넣은 후 <li class="drawer-submenu-item"><a href="/category/생활정보">링크명(카테고리명)</a></li>로 도메인 부분을 삭제하면 된다. 붉은색 부분은 카테고리 링크주소이고, 굵은 검정색 글씨는 원하는 이름으로 적어 넣으면 된다.