FastBoot 타이틀 제목 링크걸기

보통 웹사이트에는 왼쪽 상단 위에 사이트를 대표하는 이름이나 로고가 있습니다. 그리고 이것을 클릭한 경우 대부분 홈화면으로 이동하게 되구요. 그런데 BastBoot 스킨은 이러한 링크기능이 기본적으로 설정되어 있지 않습니다. 그래서 첫 화면으로 이동하고 싶을 때 처음에는 순간 당황할 수 있습니다. 조금만 관찰하면 상단 메뉴바의 제일 좌측에 있는 Home 버튼을 발견할 수 있지만, 글자가 작기도 하고 상대적으로 직관성이 떨어집니다. 

그래서 이번 포스팅에서는 위와 같이 블로그 이름을 클릭했을 때 메인화면으로 이동할 수 있도록 링크 기능을 추가해보도록 하겠습니다.

HTML에 링크 삽입

HTML 파일을 수정해 주어야 하므로, 티스토리 관리자 페이지로 이동한 뒤에 꾸미기 ▶ HTML/CSS편집을 클릭합니다.

그리고 우측 상단에서 HTML 탭을 선택한 후에, Ctrl + F 버튼을 눌러서 검색창을 열어줍니다. 그리고 검색창에 Recents 라고 입력한 뒤에 엔터(Enter)를 누릅니다.

그러면 위와 같이 Recents 바로 아래에 <h3>WIDBEE</h3> 이라고 표시된 곳이 바로 블로그의 타이틀 부분입니다. 따라서 이곳에 링크태그를 삽입해주면 됩니다.

WIDBEE을 바로 감싸는 형태로 <a href="/"> ~ </a> 태그를 넣어준 후에, 저장 버튼을 누르면 끝! 참 간단하죠(?)

WIDBEE

F5를 눌러 새로고침을 해보시면, 위와 같이 링크가 설정된 것을 보실 수 있습니다. 참고로 위의 색상은 마우스 포인터가 올라가 있는 상태이고, 마우스 포인터로 가리키고 있지 않은 경우에는 원래색상 모습 그대로 있습니다.

글 제목 링크 색상변경

위의 제목이나 본문의 링크 같은 경우 마우스 포인터를 가져가면 색상이 변하는데, 이미 발견하셨는지 모르겠지만, 포스팅 상단부분에 있는 글 제목에는 링크가 걸려있지만, 마우스 포인터를 가져가도 색상이 변하지 않습니다. 이번에는 글 제목도 변경되게끔 바꿔보도록 하겠습니다.

 이번에는 CSS를 수정해야 합니다. 따라서 CSS탭을 누른 후에 Ctrl + F 키를 눌러서 검색창을 열어주시고, h3.title 을 검색해주세요.

그러면 위와 같이 h3. title a {  라는 태그를 발견하게 됩니다. 해당 태그 안에 있는 color 라는 것이 평소 글자색상입니다. 지금은 흰색으로 되어 있네요. 그리고 아래에 다음 내용을 추가해주어야 합니다. 

h3.title a:hover { color: #3bafda; }

내용을 추가한 뒤에 저장 버튼을 누르고, 새로고침(F5)을 하면 위와 같이 마우스를 가져갔을 때 색상이 변경되는 것을 볼 수 있습니다. 해당 태그를 입맛에 따라 배경색을 추가해주셔도 되고, 폰트를 바꾸셔도 됩니다. 그러나 동일한 태그가 적용된 스킨 어딘가가 함께 바뀔 수 있다는 점도 잊지마세요.