Blogger CSS 수정 및 스크롤 고정하기

Blogger CSS 수정 및 스크롤 고정하기

  오후 6:10    홍다슬

---

* Blogger 테마 중 '세련' 테마 적용 중에 작성하였다.

블로그 디자인을 좀 수정했다.

간단하게 말하면 Navbar, Header 및 Tap 스크롤 고정 작업이다.
[디자인] - [테마] - [HTML 편집] 을 건드리면 된다.

고정은 모두 position: fixed; 를 추가한다.

첫번째로 Navbar.
Blogger 기본 서식에 navbar 라는 class가 적용되어 있어 이것을 추가하고 작성하면 된다.
z-index는 중첩시 우선순위를 결정하는 것으로, 어느정도 높은 수치를 주면 된다.
(그렇지 않을 시 스크롤때마다 다른 항목들에 가려지면서 흔들리는것같은 효과를 가진다.)
기본 서식은 배경이 반투명한 색이나, background-color 속성을 추가하면 불투명한 해당 색상으로 바뀐다.

.navbar {
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 99;
}



Header는 header-outer 라는 class로 지정되어 있다.
기본 서식에 있으니 수정해주면 된다.

.header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    position: fixed;
}



Tap 은 왼쪽 기준으로 column-left-outer라는 class로 지정되어 있다.
마찬가지로 기본 서식에 있으니 수정해주면 된다.
위치는 margin-right와 top, 크기는 width와 height를 조정해주면 된다.
overflow-y: auto; 는 스크롤바를 생성한다.

.main-inner .column-left-outer,
.main-inner .column-right-outer {
    margin-top: $(widget.outer.margin.top);
    position: fixed;
    top: 180px;
    margin-right: -300px;
    width: 120px;
    height: 600px;
    overflow-y: auto;
}



덤으로, 게시물 내용이 너무 왼쪽으로 붙어있어서 padding-left를 추가했다.
post-outer 를 수정하면 된다.

.post-outer {
  padding-bottom: 10px;
padding-left: 50px;
}