상단바 제목 입맛대로 수정하기

FastBoot 티스토리 블로그 스킨 제목 입맛대로 수정하기

  FastBoot의 타이틀은 자동적으로 블로그 제목으로 치환이 되도록 되어 있습니다만 개인의 취향에 따라 수정하는 것이 더 좋겠죠. 또한 너무 제목이 길면 상단바가 2줄이 되는 현상도 있으니 참고하셔서 수정하시면 되겠습니다. skin.html에서 어느 부분을 이야기 하는 것이냐면,

	

<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="fa fa-book"></i> [$$_title_$$] <span class="fa fa-caret-down"></span>
</a>

  이 부분을 이야기 하는 것입니다. [$$_title_$$] 부분을 지우시고 원하는 제목을 넣으시면 그 제목으로 출력이 될 것입니다. 블로그 제목이 긴데 상단바에는 더 짧은 제목을 출력하시고 싶으신 분들은 그렇게 하시면 됩니다.

  그리고, 좌측의 책모양 아이콘을 거슬려 하시는 분도 계실텐데요, 아예 아이콘이 나오기를 원하지 않는다 하시면 <i class="fa fa-book"></i>부분을 삭제하시고(v1.2에는 없었습니다). 혹은 바꾸고 싶다 하시는 분들은 다른 아이콘으로 바꾸면 되는데, 그 부분은 아래 사이트에서 확인하실 수 있습니다.

http://fontawesome.io/icons/

  대충 느낌은 오시죠? fa-book 대신에 원하는 아이콘의 클래스를 넣으면 됩니다. 예를들면 fa-circle과 같이요. 그렇게 되면 책모양의 아이콘 대신 원모양의 아이콘이 나오겠죠. 쉽죠? 위 링크타고 들어가시면 아이콘이 많이 있으니 참조하시면 됩니다.

  또한, 제 블로그처럼 아예 이미지로 치환하시고자 하는 분도 계실텐데요, 그렇다면 우선 상단바가 높이가 50px라는 것을 인지하셔야합니다. 높이 50px의 이미지를 만든뒤 그 뒤 위 코드 <a></a>사이에 <img>태그를 이용하여 이미지를 넣고, 

	

  <a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="#"><img src="https://t1.daumcdn.net/cfile/tistory/247FD74952DB7A411F"/></a>

  이미지야 뭐 비공개포스팅으로 티스토리 서버에 올려줍니다. 링크 따와서 저런식으로 <a>사이에 넣어주시면 되구요,

  또한 아래코드를 style.css에 삽입합니다.

	
.navbar-brand {
  padding: 0;
} 
	

  위 코드를 넣지 않으시면 이미지로 로고부분을 넣었을 때 상단바 크기가 늘어날 것입니다. 참고하셔서 개성있게 수정해보세요~