티스토리 블로그 스킨 메뉴 변경하기(메뉴 하나만 가능)

티스토리 블로그 스킨을 설치하고나면 잘 안쓰이는 메뉴가 있는데 이를 제거하고 카테고리의 다른 항목을 메뉴에 추가하고 싶을 때가 있습니다. 그런데 어떤 스킨은 메뉴수정이 쉽지가 않습니다. 티스토리 블로그 스킨 메뉴의 일부는 이미지를 사용하여 현재 보여지는 페이지를 표시하고 있습니다. 즉 현재 선택된 메뉴는 다른 색의 이미지로 표시되고 해당 페이지가 열려있죠. 그래서 예를들어 아래처럼 방명록메뉴를 클릭했다면 그에 해당하는 배경이미지가 메뉴에 나타납니다.

이러한 메뉴에 카테고리의 항목을 추가하거나 특정한 포스팅 글이 나오도록 메뉴를 추가할 수가 있습니다. 이것은 자바스크립트를 사용하여 현재 선택된 메뉴에 아이디 선택자를 추가하고 CSS에서 해당 아이디 선택자에 배경이미지 삽입하는 방식입니다. 그래서 기존에 있는 자바스크립트를 그대로 사용하는 것이므로 자바스크립트를 변경하지 않아도 되고 이미지를 만들어서 추가하고 CSS만 수정하면 됩니다. 다만 자바스크립트의 클릭이벤트가 어떻게 이루어지는지 알기가 어렵기 때문에 대부분 수정을 하지 않고 사용합니다. 
티스토리 블로거이신 지은님이 사용하는 블로그 스킨을 견본으로 메뉴를 수정하는 방법에 대해서 알아봅니다.

Life Stand II(Brown) 라는 스킨의 메뉴부분입니다. 이 스킨은 선택된 메뉴의 배경색이 흰색의 이미지를 사용하고 선택되지 않은 메뉴는 짙은 갈색의 이미지로 표시되고 있습니다.

구글크롬이나 쿨노보 웹브라우저를 사용하여 태그메뉴의 요소검사를 해보면 CSS에 두개의 이미지를 사용하고 있습니다. 2는 클릭해서 선택됐을 때이고 3은 선택되지 않을 때입니다. 메뉴를 클릭하면 자바스크립트에 의해서 4의 body태그에 id=”tt-body-tag”라는 아이디 선택자가 추가됩니다. 만일 포토샵이라는 카테고리 항목의 하나를 메뉴에 추가하고 클릭하면 아이디 선택자가 id=”tt-body-category”로 추가되는 것을 볼 수 있습니다. 이는 자바스크립트가 작동하여 클릭시 어떤 아이디를 추가하기 때문입니다. 그 아이디는 메뉴의 href 속성의 값인 url에서 나오게 됩니다. 이렇게 아이디 선택자가 추가되면서 CSS에서 이미 지정해 놓은 body#tt-body-tag라는 속성이 가동되어 2의 흰색배경의 이미지가 나타나고 선택하지 않았을 때는 body 태그에서 해당 아이디선택자가 제외되므로 3의 .blogMenu .tab_taglog a 라는 선택자가 작동되어 짙은 배경의 이미지가 나타나는 것입니다. 
Admin과 Write는 클릭하면 다른 화면으로 가므로 하나의 이미지만 사용합니다. 

우선 기존의 이미지를 수정해서 사용하기 위해서 관리센터의 메뉴에서 스킨-스킨업로드를 선택하고  기존의 이미지를 다운로드받아 포토샵에서 수정해줘야 합니다. 스킨업로드 창에서 위의 tab_taglogOn.png 파일과 tab_taglog.png 파일을 선택하면 좌측에 미리보기 창에서 이미지가 나타나고 우클릭하여 다른이름으로 저장을 선택해서 폴더에 저장합니다. 

포토샵에서 두개의 파일을 겹쳐놓습니다. 2의 이미지는 약간 투명입니다. 수정하는 방법은 첨부한 psd파일을 참고하세요. 글자를 새로 넣어야하므로 기존의 글자를 가리는 레이어를 만들고 그 위에 글자를 만듭니다. 두개의 이미지로 해서 저장하는데 tab-photoshop.png와 tab-photoshopOn.png 파일로 저장한 다음 블로그의 파일업로드 창에서 업로드합니다.

cfile24.uf.166611374F46FD1329AF4E.psd

html 편집창에서 Ctrl+F키를 눌러 blogMenu로 검색을 해서 사용하지 않는 메뉴를 제거하고 새로운 메뉴를 추가합니다. 클래스 선택자로 tab_photoshop이라고 입력합니다. href 속성의 url은 카테고리의 url을 입력합니다. 각 메뉴에 있는 치환자는 이와같은 url주소일 뿐입니다. title도 수정하고 이미지를 사용하므로 나타나지는 않지만 메뉴이름도 수정합니다. 검색엔진은 인식을 합니다. 이렇게 하고 저장해도 이미지는 나타나지 않습니다. CSS에서 배경이미지 설정을 해줘야하죠.

CSS 편집창에서 body#tt-body-tag로 검색하여 1부분 전체를 블럭설정 복사하여 2에서 클릭 엔터치고 붙여넣은 다음 tag는 category로 taglog는 photoshop으로 수정합니다. 여러개 있으니 다 수정해줍니다. 5와 6의 이미지 파일 이름도 변경합니다. 이부분은 메뉴를 클릭했을때 자바스크립트에 의해 body 태그에 클래스 선택자가 추가되어 CSS에서 작동 되는 부분입니다.

그러면 선택되지 않았을 때도 수정해줘야겠죠. 

.blogMenu .tab_taglog a 로 검색하여 1부분을 복사하여 마찬가지 방법으로 아래에 붙여넣고 taglog는 photoshop으로 전부 수정해주고 파일이름도 수정해줍니다. 선택자는 요소검사할때 CSS창에 나오는 부분을 복사해오면 됩니다. 저장버튼을 클릭하고 블로그 화면에서 Ctrl+R키를 눌러 새로고침하면 메뉴가 나옵니다.

포토샵 메뉴를 클릭하면 흰색배경의 이미지가 나와서 정상작동되고 다른 메뉴를 클릭하면 갈색배경으로 전환됩니다. 요소검사를 해보면 body 태그에 아이디 선택자가 추가되어있습니다. 3의 클릭했을때의 이미지부분의 CSS가 활성화되고 선택하지 않았을때의 CSS는 4처럼 작동하지 않습니다. 메뉴를 더 늘리려면 포토샵 이미지만들때 이미지 폭을 축소하고 축소한 만큼 width의 수치도 수정해줍니다.

Related posts:

  1. 티스토리 블로그 스킨 만들기 3 – 컨텐트영역 배경 이미지 만들기 스킨을 만들때는 방문자를 항상 우선 생각해야하므로 가능한한 모든 웹브라우저를 설치해서 시험해봐야하지만 최소한 5대 브라우저(인터넷 익스플로러, 구글 크롬, 파이어폭스, 애플 사파리,...
  2. 티스토리 블로그 스킨 만들기 2 – 배경색상 변경, 본문 글자색상 변경, 컨테이너 배경 이미지 바꾸기 이전 글 에서 티스토리 스킨을 만들기 위한 환경 설정에 대해서 알아보았습니다. 두가지 방법이 있었는데 가능한한 텍스트큐브를 WAMP서버에 설치하고 작업하는 것이...
  3. 티스토리 블로그 스킨 만들기 – 스킨 만들기 환경 설정 티스토리 스킨을 만들기 위해서는 환경을 만들어야합니다. 티스토리 블로그는 원래 태터툴즈 블로그를 기반으로 하기 때문에 태터툴즈 블로그 프로그램을 사용하여 환경을 만들...
  4. 티스토리 블로그 스킨 만들기 – 3단형 스킨 공개 이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이...
  5. 티스토리 블로그 스킨 만들기 9 – 제이쿼리 플러그인을 이용한 메뉴바 만들기 1 이번 글에서 만들 메뉴바입니다. 이미지로 보면 단순하지만 이곳 을 클릭하여 위 테스트 블로그로 이동하고 메뉴에 마우스오버하면 홈에 있던 회색의 박스가...

댓글 남기기