hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의
pronist.tistory.com
개발 블로그를 시작한 뒤로 너무너무 잘 쓰고 있는 hELLO 스킨
폰 케이스도 투명만 쓰는 순정주의라서 왠만하면 다 받아들이고 사는데 도저히 참을 수 없는 게 있었다. 바로 본문 글자색이 검은색이 아니라 진회색이라는 것이다. 눈이 침침해지는 것 같아서 매번 글을 수동으로 검은색을 적용해주다가 커스텀이라는 선택지도 있다는 사실을 깨달았다. 한 번 귀찮고 말자는 마음으로 도전!
참고로 이 스킨에서는 CSS 파일의 "entry-content p" 를 찾아서 바꿔주는 방법은 통하지 않았다. 폰트 색상에 지정해둔 변수가 달라서 entry-content를 찾을 수도 없었다. 크롬 개발자모드에서 태그를 찾아봤지만 본문 텍스트는 p태그만 달려 있었다. 그렇게 시작된 노가다...
1. 본문 글자색 변경
먼저 아무 내용이나 써서 글을 올리고 개발자모드를 켜서(키보드 f12) 본문 텍스트에 커서를 댄다. P 태그가 달린 박스 안에서 Color 항목의 컬러코드 #353638을 복사한다.
그대로 구글에 검색하면 이렇게 기존의 본문 폰트색이 나온다. RGB 코드는 53 54 56이다.
이제 블로그 관리-꾸미기-스킨편집-html 편집-CSS로 들어간다.
CSS 창에서 ctrl F를 누르고 53 54 56을 검색한다.
위처럼 rgb 값이 지정된 코드가 나온다. 이걸 전부 하나씩 0 0 0으로 바꿔주면 본문 폰트 색 수정 완료!
뭐가 어떤 요소를 지정하는 코드인지 알 수가 없어서 그냥 하나하나 미리보기 해가면서 바꿨다. 사이드바 글씨 까만색이면 눈에 잘 들어오고 좋지 뭐.
CSS 파일을 한땀한땀 수정한 결과 본문 폰트가 검은색으로 잘 바뀌어서 보인다. 다 하고 나니까 스킨 받을 때 다운한 파일에서 편하게 수정하고 업로드해도 됐겠다는 생각이 든다. 이 글을 보는 분들은 CSS 파일 켜서 한 번에 수정하시길.
2. 코드블럭 테마 변경
Demo - highlight.js
...
highlightjs.org
코드블럭 테마를 적용해보고 다운받을 수 있는 사이트이다. 다운로드를 누르면 모든 테마 파일이 담긴 압축 파일을 받을 수 있다.
파일 압축을 해제하고 티스토리-스킨편집-HTML 편집에 들어가서 highlight.js와 테마이름.min.css파일을 업로드한다. 그리고 HTML로 돌아가서 아래의 코드를 <head> 블럭 안에 추가한다. 찾아보기 편하게 </head> 바로 위에 추가했다.
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>
이렇게 하면 코드블럭의 테마가 적용되어 글씨 색이 바뀐다. 하지만 지금 사용 중인 스킨에 코드블럭의 배경색이 지정되어 있다. 다크모드와 라이트모드의 배경색이 다른데, 라이트모드를 계속 사용하고 싶기 때문에 색을 바꿔줬다.
CSS 편집을 누르고 ctrl F로 code.hljs를 찾으면 코드블럭의 배경색을 바꿀 수 있다. 이미 바꿔둬서 라이트모드와 다크모드의 배경색이 같다. 다행히 한 번만 바꾸면 자동 적용되어서 본문 글씨색을 바꿀 때처럼 여러 번 수정할 필요가 없었다.
코드를 적용해주면 다음처럼 코드 블럭 테마가 바뀐다.
'프로젝트' 카테고리의 다른 글
| 로컬 프로젝트 폴더 GitHub 업로드 / There isn’t anything to compare / everything up-to-date 에러 해결 (0) | 2024.07.01 |
|---|---|
| 최종 프로젝트 2주차 TIL : 한글 데이터 너무 무섭다... (1) | 2024.06.12 |
| 애증의 AI 허브 데이터 (0) | 2024.06.05 |
| Colab에서 Kaggle api로 데이터 다운 받아서 사용하기 (0) | 2024.03.27 |
| 이혼 사유 별 발생 건수는 어떻게 변화했을까? : 파이썬 데이터분석 프로젝트 (0) | 2024.03.05 |
