Fastboot v1.6.2 블로그 링크메뉴 수정하기

Fastboot 스킨의 최상단 링크메뉴에는 

관리, 로그인 달랑 두개 밖에 없고 크기도 작아서 제겐 좀 불편해요.

그리고 주메뉴도 영어라(삐질;) 적응이 안되더라구요.

 

그래서 Fastboot v1.6.2 티스토리 스킨의 링크메뉴를 수정하도록 하겠습니다.

설명할 때 헷갈릴까봐

맨 위 조그마한 관리자용 메뉴들을 소메뉴,

아래 주 메뉴들을 대메뉴 라고 할게요.

(네이밍 센스가 바닥이네요...;)

 

ο 소메뉴 : 티스토리 홈 메뉴 추가  

ο 소메뉴 : 글쓰기 메뉴 추가

ο 소메뉴 : Login/Logout 텍스트 삭제

ο 소메뉴 : 크기 변경

ο 대메뉴 : 텍스트 및 색상 변경

ο 메뉴 마우스 오버 색상 변경

 

 

 

 

#1. 블로그 메뉴 추가 (링크메뉴) 및 수정

 

우선 소메뉴 링크를 추가합시다.

 

Html 편집으로 들어갑니다.  (관리> 꾸미기> HTML/CSS 편집> HTML)

Ctrl+F로 <graylink pull-right> 를 검색하세요. <데스크탑용 네비게이션 바 시작>으로 찾으셔도 되겠네요.

아래와 같은 화면을 찾으셨나요?  빨간 박스 영역이 소메뉴에 해당하는 태그입니다.

 

 

추가하고 싶은 메뉴를 삼각형 포인트가 가리키는 곳 중 원하는 위치에 삽입하기만 하면 돼요!

저는 첫번째 삼각형 포인트에 두 태그를 다 넣었습니다.

드래그 안 되실테니 ☞ 글쓰기_티스토리홈 링크 태그.txt

 

티스토리 링크 메뉴 :  <a href="https://www.tistory.com/" target="_blank" title="Tistory 바로가기"> Tistory</a>

글쓰기 링크 메뉴   :   <a href="/admin/entry/post" title="write"><i class="fa fa-pencil"></i></a>

 

태그를 설명하자면,

<a href= "링크될 주소" title= "마우스 갖다대면 뜨는 텍스트"><i class= "아이콘 태그"></i> 보여질 텍스트</a>입니다.

target="_blank" 는 새창으로 열고 싶을 경우 넣어주시면 됩니다.

 

 

 

Login 텍스트 삭제.

 

전, 최대한 깔끔하게 하고 싶어서 Login 텍스트를 지울 거예요.

 

 

근데 이것만으로는 안 없어지더라구요. 로그인 상태에 따라 자물쇠 아이콘도 달라지는 걸 보니 별도의 태그가 있을 것 같아요.

뒤져봅니다. 슉슉 슉슉

여기있네요!! <tmpLogin>을 검색하세요.

 

잘은 모르겠지만.. 대충보아하니 스크립트로 로그인 상태에 따라 달라지게 해놨네요.

다른 건 손대지마시고 저기 파란 줄 그어진 <Logout>,<Login>을 없애주세요. 쉼표는 지우면 안돼요!!!!

 

 

그리고 텍스트를 지웠으니, 아이콘에다가 타이틀을 걸어야 마우스를 올렸을 때 설명이 나오거든요.

아래 화면에서(캡쳐만 달리 했을 뿐 위와 같은 영역입니다.) 

<i class="fa fa-unlock fa-fw"></i> 태그에다가 title="원하는 텍스트" 를 넣어주면 돼요.

 

 

 

그럼 이렇게 됩니다.

 

 

 

 

#2. 한글 메뉴로 변경하기

 

이제 대메뉴의 영어를 한글로 바꿔봅시다.

멀지 않은 곳에 있어요~ 조금 전 수정했던 소메뉴 태그가 초록 박스고, 바로 아래 쪽 빨간 박스가 대메뉴 태그입니다.

 

검색하셔야 한다면, <graylink pull-right rightMenus> 로 검색하세요.

Home, Tags, 등 낯익은 메뉴가 보이네요. 저 부분을 한글로 바꿔주기만 하시면 돼요.

 

 

그런데 가만보니~ 대메뉴도 <a href=""></a> 태그를 이용했죠?

소메뉴 추가할 때 태그를 잘 이해하셨다면

이를 응용하여 아이콘을 넣을 수도, 추가로 메뉴를 추가 할 수도 있겠군요! 씨익.

 

 

 

 

#3. 블로그 메뉴 폰트사이즈 변경하기 (색상 변경 포함)

 

이번에는 CSS에서 놀 차례입니다. 소메뉴 크기를 수정합시다. 원하면 색상도 변경하구요~

CSS로 이동!!

Ctrl+F 하셔서 <#desktopNav .graylink a>를 검색하세요. 아래 화면을 찾으셨나요?

제 목적으로는 1번 박스만 손대면 되는데요, 혹시 모르니 아래 3개 박스에 대해 간단히 살펴봅시다.

 

1번은 소메뉴와 대메뉴 모두 적용하는 속성이고,

2번은 그 중에서도 대메뉴만 적용하는 속성입니다.

3번은 소메뉴,대메뉴에 마우스 오버할 때 따르는 속성이고, 현재는 색상만 설정되어 있네요.

 

1번에서의 글씨 크기(font-size)값은 원래 소메뉴와 대메뉴 전부 적용되어야하지만,

2번에서 대메뉴 글씨크기를 다시 정의하였으므로

1번 글씨 크기를 수정하면 소메뉴 글씨크기만 바뀝니다.

 

하지만 1번에서의 글씨 색상(color)값은 소메뉴 대메뉴 둘다 적용되겠죠? 2번에서 글씨 색상에 대해서는 따로 정의하지 않았으니까요~

 

그래서 저는 2번에도  <color:#354940;>을 추가해서 글씨 색상을 바꿨어요. (아래화면 참고)

블로그 메뉴에 대한 제 CSS속성 변경 사항은 이렇습니다.

 

 

 

귀찮아서 최소만 건드렸더니 디자인 변화가 적네요.

그래도 원하는 대로 만들어 지고 있어 뿌듯해요. 후후후...