티스토리 반응형 웹 마크쿼리 Spider’s Web 스킨의 상단 로고 이미지 넣는 방법 및 네비게이션 메뉴 고정 방법

오랜만에 포스팅 남깁니다.^^

오늘은 상단 로고이미지 넣는 방법을 공유해 드릴려고 합니다. 

현재 이 블로그는 마크쿼리 님께서 반응형 웹의 최적화된 디자인으로 공개, 배포해주신 스켈레톤 티스토리 스킨으로 꾸며져 있습니다. 

따라서 다른 스킨으로 만든 티스토리 블로그는 내용이 틀릴 수도 있으니 참고하시기 바래요.

마크쿼리님의 싸이트에 가면 이 스켈레톤 티스토리 스킨을 배포중이며 사용법에 대해서 설명해 놓았습니다. 더불어 커뮤니티 카테고리에는 스킨의 수정사항에 대한 질문 답변 게시판도 있으니 활용하시면 되는데요. 

제가 오늘 포스팅할 이 내용은 커뮤니티 질문답변 게시판에서 아무리 찾아봐도 없길래 찾으시는 분들을 위해 올려드려 봅니다.

티스토리 반응형 웹 마크쿼리 Spider’s Web 스킨의 상단 로고 이미지 넣는 방법

제 블로그의 상단을 보시면 이와같이 로고가 들어가 있습니다.

처음 스킨을 깔게 되면 블로그 이름이 노출되는 것을 보실수가 있는데요.

관리자 화면의 html/css 편집란으로 들어가서 Ctrl+F로 <header role 을 찾습니다.

그럼 아래와 같은 소스가 보이실껀데요.

<header role="banner" class="container skeleton-nav">

<nav id="menu" class="nav" role="navigation" aria-label="Main menu">

<a rel="home" href="(##_blog_link_##)" class="nav-brand">(##_title_##)

※ 주의 ##_blog_link_##와 ##_title_##의 대괄호가 인식이 안돼 그냥 괄호( 표시로 해놨습니다. 

위의 소스에서 (##_title_##) 부분을 로고이미지가 있는 경로로 수정해서 입력하면 됩니다. 

저같은 경우에는 아래처럼 변경이 된 것이죠.

더불어서 아래 그림처럼 상단 네비게이션 메뉴가 고정이 되어 스크롤 할 때 같이 따라 내려왔으면 하는 분들도 계실 듯 하여 이 내용도 알려드립니다.

티스토리 반응형 스킨 Spider’s Web의 상단 네비게이션 메뉴 바 고정 방법

역시 관리자 화면의 html/css 편집란에서 <header role= 을 찾은후에 nav-fixed를 추가합니다.

<header role="banner" class="container skeleton-nav nav-fixed">

다음에는 style.css로 가서 

body의 padding-top: 50px;를 감싸고 있는 /* */를 제거해 줍니다!

/* style
-------------------------------------------------- */
body {
  position: relative; /* For scrollyspy */
  /* padding-top: 50px; */  /*Account for fixed navbar */
  background-color: #f8f8f8;
}

* style 부분에 body 클래스 부분에 주석으로 처리된 /* padding-top: 50px; */ 부분을 주석 삭제.

/* style
-------------------------------------------------- */
body {
  position: relative; /* For scrollyspy */
  padding-top: 50px; /*Account for fixed navbar */
  background-color: #f8f8f8;
}

마지막으로 /* Small devices 부분을 찾아서 주석으로 처리된 /* body { padding-top: 0; } */ 부분의 주석 을 삭제하면 됩니다.

수정전

/* Small devices < 768px
------------------------- */
@media screen and (max-width: 767px) {
  /* Remove any padding from the body */
  /* body { padding-top: 0; } */

/* Small devices 부분을 찾아서 주석으로 처리된 /* body { padding-top: 0; } */ 부분을 주석 삭제.

/* Small devices < 768px
------------------------- */
@media screen and (max-width: 767px) {
  /* Remove any padding from the body */
  body { padding-top: 0; }

PC나 테블릿, 스마트폰의 화면크기에 상관없는 반응형 웹페이지가 대세인 만큼 이렇게 좋은 스킨을 제공해주신 마크쿼리님께 감사드립니다. 

서두에 말씀드렸듯이 상단의 홈자리에 로고 이미지 넣는 방법과 상단 네비게이션 바 고정하는 위 방법은 스킨 종류에 따라 틀릴 수 있답니다. 

스킨을 배포하신 분께 여쭤보던지 커뮤니티 게시판을 활용해 보시는 것도 좋은 방법이랍니다.^^