[Blog] minmal-mistakes 블로그 커스텀 2

블로그 스킨 변경

Hyeonjiwon.github.io > _sass > minimal-mistakes > skins 경로로 들어가면 여러 minimal_mistakes_skin 파일들이 있다.

오랜만에 블로그 스킨을 바꾸고 싶어 custom2.scss 파일을 생성한 후, 색상 값들을 새로 정의해 줬다.

작성한 후, _config.yml 파일에 들어가 minimal_mistakes_skin의 값을 custom2으로 변경

Before

After

블로그 목차 디자인 변경

_sass > minimal-mistakes > _navigation.scss 의 경로로 들어가서 .toc 클래스의 background 값을 변경했다.

위 사진에서 .toc 클래스의 background-color도 다른 색으로 변경, 그리고 자세히 보니 border-radius가 맞지 않아서 튀어나와 있었다 ㅜㅜ 그것도 새로 조절해서 맞췄다.

Before

After

tip. 개발자 모드로 들어가서 요소들에 대한 정보를 얻고 scss 파일에서 찾아보면 원하는 요소들에 대해 쉽게 변경 가능

blockqoute ‘>’ 뒤에 배경색 넣기

개발자 모드로 보니 이 부분은 blockqoute 요소였다. 페이지 상에서 먼저 값을 조절하면서 설정했다.

기본요소였기 때문에 _base.scss에 있을 것 같아서 검색을 해봤다.

_sass > minimal-mistakes > _base.scss 의 경로로 들어가 blockquote 검색

background-color 추가해줬다.

Before

After