블로그 사이드 바와 폰트 변경하기

블로그의 사이드 바와 폰트를 바꿔려고 했다.
많이 참고한 사이트는 86.5도씨 | 이거하나로 GitHub Blog 만들기이다.

일단 이 블로그는 starter를 이용해서 레포를 만들었기 때문에 css에 관련된 폴더들이 없었다.
그래서 Chirpy repo 기본 테마 레포로 가서 sass 폴더를 모두 복사해 가져왔다.

1. 블로그의 폰트를 바꿔보자.

먼저 폰트를 바꾸기 위해 눈누에서 원하는 폰트를 선택하고 웹폰트로 사용에 있는 font-face를 복사 후 _sass/main.scss에 붙여넣기 해준다.

@font-face {
    font-family: 'HS-Regular';
    src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/HS-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

그 후 폰트를 다운로드 받아 zip 파일을 열고 ttf 파일을 assets/fonts 밑에 넣어 준다.

다음으로 sass/addon/variables.scss에 $font-family 부분을 변경해주면된다.

$font-family-base: Lato, 'HS-Regular' !default;
$font-family-heading: Lato, 'HS-Regular' !default;

2. 블로그의 사이드 바를 변경해보자

사이드 바에 관한 코드는 _sass/addon/commons.scss에 있다.
일단 원하는 이미지를 폴더에 저장하고 commons.scss 파일에서 #sidebar를 찾아 background에 이미지 url을 넣어주면된다.

 background: url([사이드바 배경 이미지 경로]);

그렇게 해서 완성된 사이드 바이다.