5. 스킨 옵션 - 기본 메뉴

이미지를 활용해 다양한 기능을 제공하는 반응형 스킨

탕비수다 이마고 스킨에서 제공하는 메뉴는 크게 (기본) 메뉴와 고정 메뉴 그리고 서브 메뉴로 구성되어 있습니다. 이번에 설명할 기능은 바로 (기본) 메뉴입니다. 즉 페이지 접속후 늘 볼 수 있는 영역입니다. 상단 메뉴는 왼쪽으로 홈링크가 있고 그 옆에 카테고리가 출력됩니다. 마지막으로 오른쪽에는 작은 기능이 모여 있는 작은 메뉴가 존재합니다. 기본적으로 메뉴는 폰트와 배경 색상을 설정할 수 있으며 홈링크 방식을 텍스트로 설정할 경우 홈링크에 표시할 텍스트를 지정할 수 있습니다.

설정하기

기본 메뉴와 관련된 모든 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 기본 메뉴는 폰트 색상, 배경 색상 그리고 관련 기능은 홈링크 방식 및 참조값을 제공합니다.

폰트 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 메뉴 폰트 색상이 변경됩니다. 제목에 배경이미지를 사용하지 않는다면 원색 계통의 색상을 추천합니다. 만약 배경이미지와 함께 확장을 선택했다면 그림자 효과를 설정하면 효과를 볼 수 있습니다.

배경 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 메뉴 배경 색상이 변경됩니다. 나중에 설명할 제목 배경이미지를 적용할 때 이 기능은 중요한 역활을 합니다. 즉 배경이미지를 설정하고 더불어 확장까지 선택하면 해당 영역을 투명으로 선택해야 정상 출력됩니다.

홈링크 방식

기본적으로 홈을 상징하는 아이콘이 표시됩니다. 추가적으로 홈링크 방식을 '텍스트'로 선택하면 아래 홈링크 참조값이 출력됩니다. 블로그 명을 사용하면 모바일 화면에서 중복되어 보일 수 있으니 홈이나 기타 홈을 대표하는 단어를 사용할 것을 권합니다.

홈링크 참조값

홈링크 방식을 '텍스트'로 선택했을 때 홈링크 참조값에 입력한 값이 해당 영역에 출력됩니다.

기본 메뉴가 정의된 곳

61
62
63
64
65
66
67
/* 메뉴 색상 */
#header.thumb ul.category_list .link_item.link { color: [##_var_header-menu-font-color_##] }
#header .svg-icon path{ fill: [##_var_header-menu-font-color_##]}
#header .home a { color: [##_var_header-menu-font-color_##] }
#toggle-menu span { background-color: [##_var_header-menu-font-color_##] }
.header-wrapper { background-color: [##_var_header-menu-background-color_##] }
.header-wrapper .blogtitle a { color: [##_var_header-menu-font-color_##] }
cs

탕비수다 이마고 스킨에서 제공하는 스킨 옵션을 이용하면 다양한 효과를 연출할 수 있습니다. CSS는 기본 메뉴와 관련된 내용입니다. '블로그관리 > 꾸미기 > 스킨 편집'의 [html 편집]에서 'HTML'에서 확인할 수 있습니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 9개 입니다.

      • 안녕하세요. 관련 기능에 버그가 있는 듯해서 문의드립니다.
        카테고리 메뉴 방식을 '드롭다운'으로 설정하면, '메뉴 폰트 색상'이 변경되지 않아 '검정색'으로만 나옵니다. 물론 홈버튼이나 다른 버튼들은 모두 적용되고요. '섬네일' 방식에서는 발생하지 않는 문제입니다. 확인 및 문제 해결을 좀 부탁드립니다.
        감사합니다~~

      • 아 확인해보겠습니다. 아마도 스킨옵션 스타일에 관련 기능만 추가하면 해결될 것 같습니다.

      • 롤랑존님,
        어떻게 하면 해당 문제를 해결할 수 있을지 알려주시면 고맙겠습니다.

      • 안녕하세요. 답변이 많이 늦었습니다. 회사일이 바빠 처리를 못했어요. 내일부터 좀 쉬니 확인 후 연락드리겠습니다. ㅜㅜ

      • 안녕하세요.

        주메뉴 색상이 변경되지 않는다는 말씀이시죠?

        html 편집에서 아래 내용을 찾아 한 줄 추가하면 될 것 같습니다.

        * line 75번
        /* 카테고리 메뉴 색상 */
        .
        .
        .
        #header.dropdown .gnb .category_list > li > a { color: [샵샵_var_header-submenu-font-color_샵샵] }

        댓글에 제대로 치환자가 표시되지 않을 수 있어서요. 샵을 특수문자로 변경해 적용해보세요.

        고맙습니다.

    *

    *