티스토리(Tistory) 사이드바 글 보관함 스타일 추가

저번 시간에 사이드바 글 보관함 모듈 추가하는 것에 대한 설명을 했다.

https://java-coding.tistory.com/61

티스토리(Tistory) 사이드바 글 보관함 모듈 추가

이번에는 기본적인 글 보관함에 해당 년월에 작성한 포스트 개수에 포인트를 줄 것이다.

기본 사이드바 글 보관함에 스타일을 추가해보자!

---

✏️ 사이드바 글 보관함 코드 구조

사이드바 글 보관함을 꾸미기 전에 사이드바 글 보관함의 코드 구조를 살펴보자!

 

• 글 보관함의 현황만 보여주고 싶으면 치환자를 이용한 링크를 빼면 된다.
• 는 년/월을 현재 년/월을 기준으로 노출 설정한 만큼 이전 년/월을 출력한다.
• 해당 년월에 작성한 포스트 개수를 출력한다. (이것도 필요 없으면 빼도 된다.)

---

1. CSS에 사이드바 글 보관함 스타일 코드 추가

/* archive */
.archive {}
.archive ul {
    margin: 6px 0 0;
    padding: 5px 0 0;
    border-top: 1px solid #e9e9e9;
    list-style: none
}
.archive ul:after {
    display: block;
    clear: both;
    content: ''
}
.archive ul li {
    font-size: 0.875em;
    width: 50%;
    float: left;
    padding: 4px 0
}
.archive ul li a {}
.archive ul li a:hover,
.archive ul li a:active,
.archive ul li a:focus {
    color: #ff8149;
    text-decoration: none
}
.archive ul li a .cnt {
    font-size: 0.75em;
    color: #ff8149
}

style.css

---

그럼 이렇게 포스트 개수에 포인트를 줘서 한 줄에 2개월씩 나온다.

 

이제 6개월의 글 보관함이 출력되도록 설정해보자!

2. 사이드바 글 보관함 모듈 설정

사이드바 > 사이드바 설정

1. 사이드바에 글 보관함은 몇 개월까지 표시할 것인지 변경

2. "변경사항 저장" 버튼 클릭으로 저장

 

3. 사이드바 글 보관함 결과

css에서 꾸며준 대로 잘 나오는 것을 확인할 수 있다.