Fastboot 상단 메뉴 커스터마이징 설정 방법

필자의 티스토리 블로그는 현재 Fastboot 1.6.2 반응형 스킨이 적용이 되어 있다. 이 스킨은 티스토리 공식 스킨은 아니고 Readiz 라는 능력자께서 직접 제작하신 무료 배포용 스킨이다. 따라서 수동으로 설치를 진행하여 완료를 해야 한다.



피가되고 살이되는 블로그, 친절한효자손 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#

#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#


Fastboot 상단 메뉴 커스터마이징 설정 방법


티스토리의 최대 장점 중 하나가 바로 입맛대로 꾸밀 수 있다는 장점이 있다. 이 기능은 그 어떤 블로그 보다도 정말 강력한 기능이라고 할 수 있다. 커스터마이징을 한다는 것은 내 방을 내 스타일로 꾸민다는 말과 같은 소리이다. 내 방을 내 스타일로 꾸며야 살 맛이 나지 않겠는가?


Fastboot 상단 메뉴들을 한번 변경해 보았다. 원본과 비교해보면 많은 부분이 변경이 되었는데, 우선 제일 상단의 소메뉴 부분의 Tistory 라고 하는 메뉴를 추가해서 티스토리로 바로갈 수 있게 했고, Login / Logout 문구를 없애고 그냥 자물쇠 아이콘만 나타나게 하였다. 바로 밑에 있는 대메뉴들은 한글변경, 그리고 문구 바로 왼쪽에 해당 메뉴에 맞는 아이콘을 넣었다. 그리고 색상변경 및 마우스 오버시 색 변경까지 진행하였다. 이제부터 하나하나 방법을 살펴보자.


Fastboot 타이틀제목 기본 색상 변경

Fastboot 최상단 상단바 글쓰기 아이콘 추가 방법

FastBoot 블로그 메뉴 글쓰기 관리자 넣기


이 글과 함께 진행하면 좋다. 여유 시간에 한번 같이 도전해 보도록 하자.




우선 이것이 기존에 필자가 쓰던 Fastboot 상단 스킨 메뉴들이다.




변경 후 모습이다. 어떤 부분이 바뀌었는지 알 수 있을 것이다. 여기서 최상단을 소메뉴, 그 밑에 있는 것을 대메뉴라고 가정하겠다.




소메뉴의 Tistory 바로가기 만들기


티스토리 관리자 화면의 HEML/CSS 편집으로 들어간다. 모든 커스터마이징은 이곳에서 진행된다.



HTML에서 Ctrl+F를 눌러 "데스크탑용 네비게이션" 이라고 검색하면, 위의 부분에 검색이 될 것이다. 여기에서 저기 빨간 부분의 태그만 추가로 저 사이에 넣으면 된다.


첨부파일

Fastboot Tistory 바로가기.txt


첨부파일의 태그를 그대로 저 위치에 붙여넣어주면 완료된다. 상당히 간단한 방법이다.




소메뉴 글씨 크기 및 기본색상, 그리고 마우스 오버시 색상 변경하기


제일 상단의 글씨 크기가 다소 작은 느낌이 있어서 이 부분을 좀 크게 만들고, 기본 색상도 변경하고 마우스를 올렸을 때 색상을 변경하는 방법이다. 참고로 마우스 오버시 색상은 밑에 있는 대메뉴와 동일하게 변경이 되므로 이 점을 고려해서 변경해야 한다.



이건 CSS에서 편집한다. Ctrl+F를 눌러서 #desktopNav 를 검색하여 위의 태그 부분을 찾는다. 소메뉴 부분이 바로 .graylink 라고 하는 부분이다. 저기 위에 빨간색 박스 안의 밑줄 친 부분만 수정하면 된다.


font-size : 글씨 크기 설정

color : 색상 설정 (16진수)


이렇게 되는데, 아래 빨간색 상자 부분은 a:hover 가 있으므로 이 부분은 마우스를 올렸을 때의 색상을 지정해 주는 부분이다.




소메뉴 Login/logout 문구 없애기 및 마우스 오버시 설명 나오게 하기


특별히 문구는 필요 없을 것 같아서 뺐다. 그냥 아이콘만 보여지게만 하면 될 것 같아서이다. 방법은 아래와 같다.



수정해야 할 곳은 두 곳 이다. 먼저 HTML에서 Ctrl+F를 눌러 login 이라고 검색하면 상단 부분에 하나, 그리고 제일 아래에 하나 이렇게 최종 두 곳이 검색이 될 것이다. 먼저 상단 부분에서 저 밑줄 친 부분이 아마 기존에는 login 이라고 검정 글씨로 나와있을텐데, 이걸 아예 지워줘도 되지만 필자는 나중에 또 변경할 일이 있을 것을 대비해서 아예 주석처리를 했다. 이렇게 변경해 주시는 것을 권장한다. 지워버리면 되돌릴 수 없다.




그리고 제일 아래쪽인데, 여기는 총 네군데를 편집하고 추가하면 된다. 우선 title 관련 태그를 넣는 이유는 마우스를 가져다 놓으면 나타나는 문구를 출력하기 위해서 넣은 것이다. 위의 태그처럼 수정을 해주시면 되겠다. 쉼표나 기타 다른 태그들은 절대 건드리지 마시고 위의 내용대로 진행하도록 하자. 하나만 지워져도 엉망이 된다.




대메뉴 글자색 변경 및 왼쪽 아이콘 넣기


이 부분은 다음과 같이 수정하면 되는데, 잘 응용해야 하는 필요성을 요구한다.



HTML에서 Ctrl+F를 눌러 "데스크탑용" 이라고 검색하면 주석 한 문장이 검색이 되고, 그 아래쪽에 보시면 이렇게 대메뉴 관련 태그들이 보인다. 여기에서 수정을 진행한다.




지금 밑줄 친 저 부분을 추가해주면 된다. <i>태그를 활용하여 아이콘을 생성하게 되는 것이다. 주의사항은 메뉴 이름 바로 왼쪽에 보면 한 칸이 띄워져 있는게 보이는데 일부러 띄운것이니 여기를 주의하도록 하자. 아이콘이 들어갈 자리를 일부러 만들어 준 것이다.


첨부파일

Fastboot 대메뉴 아이콘.txt


첨부파일에 확인해 보시면 태그들이 들어 있다. 단, fa fa- 다음의 이름을 설정해줘야 다양한 아이콘으로 설정되므로 이 부분은 기호에 맞게 응용하도록 한다.




그리고 기본 색상을 만들어 주는 것은 아까 소메뉴 색상 변경했었던 바로 그 위치쯤에서 태그를 하나만 추가해주면 되는데, CSS 부분에서 Ctrl+F를 눌러 #desktopNav p.rightMenus 를 검색하도록 한다. 이 부분에서 저기 밑줄 친 color 부분의 태그를 추가해주면 된다. 마지막은 항상 세미클론을 잊지 말도록 한다. 컬러는 16진수 코드로 입력하도록 한다. 참고로 대메뉴 글씨 크기는 font-size 숫자를 변경하면 가능하다.


이정도로 커스터마이징을 해보았다. 나중에 또 변경할 일이 있다면 추가적으로 계속 업데이트를 통해서 글을 작성하도록 하겠다. 끝.


블로그를 하는 이유 : 당신은 블로거인가? 리뷰어인가?

블로그관리 노하우 : 블로그 문체의 중요성

애드센스 승인 기준 및 쉽게 성공하는 방법은?


"친절한효자손 취미생활" 을 검색!


이 글을 공유하기

댓글(0)

Designed by JB FACTORY