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

Posted by Readiz
2014.03.14 05:55 반응형 티스토리/FastBoot


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에는 없었습니다). 혹은 바꾸고 싶다 하시는 분들은 다른 아이콘으로 바꾸면 되는데, 그 부분은 아래 사이트에서 확인하실 수 있습니다.






  대충 느낌은 오시죠? 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;
} 
	


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


이 댓글을 비밀 댓글로
  1. 감사합니다..조만간 수정해봐야겠네요^^
  2. .navbar-brand {
    padding: 0;
    }

    코드를 넣었는데도 불구하고 Locator 를 침범하네요ㅠ
    분명 50px에도 맞췄는데...
    • 글쎄요 지금 블로그 가 보았는데 수정을 해두신 상태라 문제를 확인하기는 어렵네요..;
      저도 위 방법을 사용하려 로고를 넣은 것이라서, 확인이 안되어 왜 안되시는지 이유는 잘 모르겠습니다.
    • 기존에 올려주신 방법을 보고 토씨 하나 안빼놓고 고대로 따라해보았는데 영역을 침범한 채로 안되더라구요!
      그랬는데 레디즈님 소스 보기를 해서 그 소스를 그대로 복사해서 했는데 해결됐습니다!
      대신 화살표 방향이 사라졌네요..ㅋㅋㅋ..
    • 어디가 달랐나요? .. 화살표는 이미지에다가 삽입해둔것이라 사라집니다.
      분명 같은 코드인데..
      이유를 모르겠네요 ^^;
    • 금칙어가 있다고 나와서 http://board.readiz.com/ 에 남겨두었습니다!
    • 아.. 덮어쓰셔야 하는데 겹쳐쓰셨네요 ^^;
      class보시면 두개 중복되는게 겹쳐있죠~~
      어쨌든 지금은 해결하셨다니 다행이네요.
    • 제가 바보였군요..ㅠㅠ
      전 이제 블로그 개편 보고서 쓰고 있습니다:)
      다시 한번 감사합니다!
  3. 깔끔하고 상세한 설명 감사합니다 ^^
  4. 안녕하세요. 여기저기 돌아다니다가 이 스킨을 봤는데 너무나 맘에 들어서 잘 쓰고 있습니다.
    이 포스팅에서처럼 제목을 이미지로 바꿔서 집어넣었는데요, 모바일 웹(queenoffrost.tistory.com/m)으로 보니 상단바 아래로 집어넣은 이미지가 나오는 문제가 생겼네요. 이 문제는 어떻게 해결해야 할까요?

    덧붙여 상단바를 보면 홈-태그-방명록-검색으로 이어지는 요소들이 쭉 있는데, 저는 검색부분만 간격을 오른쪽으로 더 보내고 싶습니다. 이렇게 하려면 어떤 부분을 손대야 하는지 알려주실수 있나요?
    • 1. 그 이미지를 감싸는 <a> 태그의 class에 hidden-xs를 추가하세요
      a class="hidden-xs navbar-brand dropdown-toggle"
      이렇게 되도록요

      2. 검색바 class에 위와 비슷한 요령으로 pull-right를 추가해주시면 됩니다.
  5. 안녕하세요. 이미지로 제목을 치환하려고 하는데, 설명대로 하였는데도, 여전히 블로그제목이 뜹니다.
    1.61 스킨을 사용중인데. 1.61에는 다른 방법으로 해야할까요?ㅠ

티스토리 툴바