고정 헤더 영역
상세 컨텐츠
본문
본문 글씨를 노션폰트(Noto sans KR) 로 바꾸고, 코드 블럭 테마를 변경하였다.
먼저 기존에 모든 글씨체를 'mabinogiClassic' 으로 바꿨다 보니, 블로그를 보면서도, 글 가독성, 가시성이 좋지 못했다. (분명 마비노기 할때는 보기 좋은 채팅이라고 생각했는데 말이지...)
그래서 요새 많이 보고 있는 노션 글씨체 Noto sans KR 로 바꾸기로 하고, 수정 하고자 하였다.
티스토리 본문 변경 하기
1. 블로그 관리에서 스킨 편집 항목에 먼저 들어간다.
2. CSS 탭에 .box_article .article_cont p 블럭내에 font-family: '원하는글꼴'; 을 추가한다.
추가적으로 나의 경우엔 font-size 가 17인 것이 보기 좋다고 생각해서 font-size 항목도 같이 추가해 주었다.
font-family: 'Noto Sans KR', 'sans-serif';
font-size: 17px;를 같이 추가해주었다.
코드블럭 테마 변경하기
1. 블로그 관리에서 좌측 플러그인을 누르고 코드 문법 강조를 해제 해준다.
설정이 되어있다면 해제하면되고, 애초에 설정이 안되어있다면 그냥 놔두면 된다.
2. highlightjs (https://highlightjs.org/) 에서 Demo 에서 원하는 테마 종류를 결정해서 적용한다.
메인 홈페이지 아래에 보면 As HTML Tags 라는 부분이 있는데 이부분을 복사해서 HTML 탭의 <head> </head> 블럭 사이에 추가하면 된다.
중간에 주석으로 나와있지만 중간 에 <script> 블럭 한줄은 제외해도 된다. default.min.cs라고 된부분이 default 테마로 지정되는 것인데 원하는 테마이름으로 하면 된다. (androidstudio, vs2015 등)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
그래서 실제로 나의 경우는 androidstudio 테마로 아래와 같이 적용하였다.
HTML 탭에 <head> 바로 아래에 추가해주었다.
2. 코드블럭이 간격도 좁고 폰트도 마음에 안들어서 변경할 때
CSS 탭에 code.hljs 블럭을 찾아서 해당 블럭내에 font-family를 추가하였고, line-height:를 150%로 하였다.
변경 전
변경 후
번외
- 리스트 항목이라거나
멘션 이나
기존에 써놓은 것은 mabinogiClassic 그대로 뜨고 본문만 Noto Sans KR로 잘 바뀐다.
mabinogiClassic은 제목이나 짧은 것을 읽을때 가독성 가시성이 떨어지는 것은 아니나 흐름이 긴 문장들이나 여러문장이 길게 있는 경우 읽기가 좀 힘든 면이 있는 것 같다. 리스트나 제목 등의 mabinogiClassic은 바꾸는게 좋을지 고민 을 좀 더 해봐야 겠다.
그리고 처음에 보여줬던 컬러의 차이...
'Version Up' 카테고리의 다른 글
| 테마 컬러 변경 (티스토리 magazine theme), 트랜지션(transition) 적용 (1) | 2023.12.15 |
|---|---|
| 티스토리 및 Giscus 폰트(글씨체) 변경 (0) | 2023.01.02 |
| 댓글 시스템 변경 Github 기능으로 변경 (Utterances, Giscus) (0) | 2023.01.01 |
행복은 읽고 치는옥수수팝 님의 블로그입니다.
