Fastboot 스킨 최상단 메뉴 수정 방법

Fastboot 스킨은 무료로 배포된 스킨으로 보기가 편하고 HTML을 통해서 많은 수정을 할 수 있습니다. 그래서 나만의 홈페이지로 만들기도 용이합니다. Fastboot 스킨을 이용하기 위해서는 무턱대고 이용하기 보다는 HTML 수정을 어떻게 할 것인가에 대해서 알아보아야합니다. 대표적으로 친절한 효자손님의 블로그가 있습니다. 저도 효자손님의 블로그를 보고 만들었습니다.

 

Fastboot 스킨을 사용하면서 수많은 수정을 거쳤습니다. 최상단의 메뉴바라든지, 제목에 링크를 건다던지 말할 수 없을 만큼 수많은 곳에 손을 댄듯 합니다. 그런데 이렇게 손댄곳이 어디어디인지도 모르고 까먹고 다시 되돌리기 힘들다는 점에서 저는 한번 복습차원에서 포스팅을 하려고 합니다.

 

제 글을 보는 분들도 따라하시면서 자신만의 블로그를 만들면 좋겠습니다.

 

눈썹있는 모나리사 : 무엇이든 알아가는 것을 좋아하고 습득한 지식은 사람들과 함께 공유합니다.

강에서 당신이 손을 담가 만지는 물은 흘러가는 마지막 물이자 다가오는 첫 물이다. 지금 이 시간이 바로 그렇다 - 레오나르도 다빈치

@ 세상의 모든 지식을 함께 공유하고 알아가는 곳 @

@ 진솔한 생각을 적어가는 곳 @

 

 

▼ Fastboot 스킨 설치시 최초의 화면입니다. 수정을 통해서 조금 더 예쁘게 만들어 보겠습니다.

 

 

▼ 이렇게 크고 예쁘게 변경되었습니다. 처음부터 홈화면, 즐겨찾기, 글쓰기, 설정, 로그인아웃

 

 

▼ 먼저 티스토리 관리에서 HTML/CSS 편집 에 접속합니다. 편집을 통해서 많은 부분을 바꿀 것입니다. 이제 HTML/CSS와 친해져야합니다.

 

 

▼ HTML 화면으로 들어가면 다음과 같은 화면이 나옵니다. 이곳에서 desktopNav 라고 검색해주세요. HTML 창에서 CTRL+F 를 하면 찾을 수 있습니다.

 

 

▼ DesktopNav 아래부분의 <p class 부터 /p> 까지 모두 갈아 치울것입니다.

 

 

▼  아래의 파일을 받고 ★ 부분을 수정합니다. 그리고 전체 복사 후 위의 부분에 붙여넣기 합니다.

 

최상단 HTML.txt

 

 

▼ 이렇게 수정한 HTML 문구를 위의 위치에 정확하게 붙여넣기 합니다. 일단은 위의 메뉴를 모두 만들었습니다. 지금 이 상태에서는 아직 부족한 부분이 있습니다. 아래의 설정까지 함께 해주세요.

 

 

▼ 이번에 할 작업은 자물쇠 옆에 Logout 및 Login 문구를 없애는 작업입니다. CTRL+F 를 해서 찾기를 실행하고 loginout_append 를 검색해주세요. 그러면 제일 마지막 부분에 아래와 같이 나올것입니다.

 

 

▼ Logut 및 Login 부분을 주석처리 하여줍니다. HTML에서 주석처리를 하는 방법은 <!-- 주석할부분 --> 입니다. 지워도 되지만 기존에 있던 HTML 소스를 없애는 것 보다는 남겨두는 것이 낫기 때문에 남겨두는 것입니다.

 

 

▼ 이것까지 완료하면 이렇게 되었습니다. 아직 크기가 너무 작고 볼품이 없죠? 크기를 조금 더 키우고 색깔도 좀 바꿔 보아야겠습니다.

 

 

▼ HTML/CSS 편집에서 상단에 보면 HTML / CSS / 파일업로드 가 있습니다. CSS를 선택해주세요. 그리고 CTRL+F 찾기를 통해서 graylink 를 찾습니다. 아래와 같이 폰트사이즈와 색깔 그리고 마우스 오버시 색깔을 설정할 수 있습니다.

 

 

▼ Font- size 를 20정도로 설정하면 저와 같은 크기입니다. 본인의 입맛에 맞게 크기와 색상을 설정해주세요. 그리고 아래에 컬러 색상은 HTML 색상 코드에 따라서 설정 할 수 있습니다. 그리고 마우스 오버시 색깔도 설정해 보았습니다.

 

 

▼ 자 이제 다음과 같은 설정 화면이 나왔습니다. 마우스 오버시 색깔도, 기존의 색깔도 #000000으로 검정색으로 했습니다. 조금 더 진하고 보기가 좋지요?

 

 

 

이상 Fastboot 최상단의 메뉴에 대해서 설정해 보았습니다. 아직 아래의 메뉴와 중복되는 부분도 있고 해서 수정할 부분이 있습니다. 스킨 HTML 수정을 통해서 본인만의 블로그를 만들어보세요.

 

다음 포스팅에서는 최상단의 아이콘 바꾸기 방법에 대해서 알아보겠습니다. 메모장으로 그냥 가져다 쓸수 있게 해놓았지만 HTML을 통해서 본인이 원하는 아이콘으로 바꿀 수 있습니다.