기존의 스킨이 가독성이 떨어지는 것 같아 스킨을 변경하려고 했다.
기본으로 주는 스킨을 막 변경해보다가 마음에 드는 것이 없어 그냥 원래 쓰던 스킨을 사용하려고 했다.
근데 블로그 처음에 스킨 설정해준 것이 워낙 오래전이라....
나는 기본 스킨 그대로 사용했다고 생각하고 저장도 안 해두고 바꿔버렸다.
메뉴바에 사진을 넣어준 것도, 글에 수식을 적을 수 있게 html 파일 설정해준 것도 있다는 것을 까먹고 있었다.
이왕 이렇게 된 김에 스킨 이쁜 걸로 바꿔보자 하고 검색했는데
마음에 드는 스킨이 있어서 바꿨다.
hELLO. 티스토리 스킨을 소개합니다.
hELLO 스킨은 본래 기능의 많이 없었다가, 최근 반응이 나쁘지 않아서 여러 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기능과 품질
pronist.tistory.com
여기서 다운 받아서 적용해서 사용했다.
근데 막상 적용해보니,
이상하게 적용되는 부분들도 있고, 내 마음에 들도록 수정하고 싶은 부분들도 있다.
그래서 얄팍한 html, css 지식을 사용해서 조금 수정해보려고 한다.
근데 이번에는 어느 부분들 수정했는지 적어놔야 다음에 또 잘못 건드렸을 때 수정할 수 있을 것 같아서 적어놓으려고 한다.
하다가 느낀 점은 역시 뭐든지 코드로 되어 있는 것들은 쉽게 삭제해버리면 안 된다...
다크 모드 삭제
기본이 다크 모드로 설정되어 있는 듯한데
복사 붙여 넣기 한 글들이 거의 전부 흰색으로 배경색이 들어가 있었고
글을 수정해도 사라지지 않았다.
(그렇다고 200개 정도 되는 글들을 하나하나 수정할 수도 없는 노릇이고...)
그리고 라이트 모드가 색이 다양하게 들어가 있어 더 이쁘다.
html : 뒷부분 btn에 '다크 모드' 지워줌
css : 뒷부분 'html[data-theme='dark']'에 해당하는 부분들을 모두 지워줌.
수식 추가
여기 참고하여 수식 관련 코드도 넣어줌.
MathJax를 사용하여 티스토리에 수학 수식 작성하기
3D 게임 프로그래밍과 관련한 기초 수학을 정리하다보니, 수학 수식을 적어야하는 일이 생겼다! 구글 문서의 ‘부가기능’을 추가해서 작성해보았지만 수식이 이미지로 저장되는터라, 수정도
hellowoori.tistory.com
보통 '$$ ~~~ $$'으로 수식을 적는 방법은 작성 시에는 한 줄에 수식과 다른 글들을 같이 쓸 수 있지만,
작성해서 올린 글을 보면 수식에서 줄 바꿈 되어 나타나 진다.
위의 블로그 밑으로 내려보면 이를 해결할 수 있는 방법이 나오고, '$ ~~~ $'로 수식을 작성해야 한다.
카테고리 중복
글 마지막에 '~~' 카테고리의 다른 글 목록이 2개가 뜬다.
하나는 티스토리에서 기본으로 적용해주는 목록인 것 같고 하나는 스킨에 들어있는 목록인 것 같다.
개인적으로 기본으로 적용해주는 목록이 더 이쁜 것 같아서, html에서 해당 부분을 지워주었다.
<div class="permalink__related"><strong>'Small Talk' 카테고리의 다른 글</strong>
<ul>
<s_article_related_rep>
<li><a href=""></a></li>
</s_article_related_rep>
</ul>
</div>
코드 블록 스타일 바꾸기 (라이트 모드 ver.)
hELLO 스킨을 적용하면서, 티스토리에서 플러그인으로 제공해주는 Syntax Highlight이 적용이 안됐었다.
그래서 그냥 hELLO 스킨 스타일대로 코드 블록을 놔두었었는데, 문득 코드 블록의 배경색이 너무 연해서 눈에 잘 띄지 않아 바꿔야겠다고 마음먹었다.
티스토리 스킨 적용하기 (feat. hELLO, highlight.js)
티스토리 기본 스킨만 쓰다가 식상해지고 불편하기도해서 새해맞이 기념으로 다른 스킨을 적용하기 위해 검색하다가 괜찮은 스킨을 찾아 적용시킨 김에 어떻게 적용하는지 포스팅 적어봅니다.
leeporter.tistory.com
이곳을 참고했고, 이 분도 hELLO 스킨을 적용 중이시기 때문에 대부분 따라 하면 잘 적용된다.
한 가지 바꿔서 적용해야 하는 점은,
html 파일을 수정할 때,
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="이곳">
<script>hljs.initHighlightingOnLoad();</script>"이곳" 이라고 표시한 곳을 자신이 고른 테마로 수정해주어야 하는데,
나의 경우 a11y-dark 테마가 마음에 들어서
<link rel="stylesheet" href="./images/a11y-dark.min.css">이렇게 수정해주었다.
그런데, 코드에는 스타일이 잘 적용되었는데 코드 블록의 배경색은 그대로였다.
배경색이 그대로면 의미가 없기 때문에... 다시 한번 구글링....
[Tistory] Code Highlight 적용하기 (hELLO 스킨 사용시 에러 해결)
티스토리에서 플러그인을 통해 기본으로 제공하는 code highlight을 사용하면 line number도 없고 아무튼 뭔가 맘에 안 든다. 무엇보다, 지난 번에 MATLAB 글을 작성할 때 MATLAB code highlighting을 티스토리의
tuttozurich.tistory.com
이곳을 참고하여 css 파일의 다음 부분을 주석 처리해주었다.
여기까지 해주니 배경색까지 a11y-dark 테마로 잘 적용된다!
(추가로 처음 블로그에 나와있는 확장(폰트 및 글자 크기 변경, 박스의 모서리 둥글게 하기, 가로 스크롤 기능 추가, Line Number 추가 등을 같이 해주었다.)
코드블럭 폰트 사이즈 변경
관리 페이지 → 꾸미기 →스킨 편집 → html 편집 → head 태그 안에 다음의 style 태그를 추가한다.
<head>
...
<style>
pre > code { font-size: 1.1em; }
</style>
...
</head>'Small Talk' 카테고리의 다른 글
| 2024.08.05 - Github Profile 꾸미기 (0) | 2024.08.05 |
|---|---|
| 2021.11.02 - 시대고시 SSAFY SW적성진단 (0) | 2021.11.02 |