Tistory 스킨 hELLO는 2020년 3월 첫 공개 이후 지금에 이르기까지 티스토리에서 많은 블로거분들께 사랑받은 스킨이 되었습니다. 그 결과 가장 영향력 있는 개발자 커뮤니티인 깃허브에서 약 천 개에 달하는 티스토리와 관련된 모든 프로젝트 중 가장 많은 별을 받은 프로젝트로 자기매김하였습니다.
hELLO 스킨은 사용자가 직접 개조하여 사용하는 것을 허용합니다. 단, 원저작자가 누구인지를 표기해야 하며, 스킨의 코드가 담겨있는 주소인 https://github.com/pronist/hello 를 남길 필요가 분명히 있습니다. 사이드바에 있는 저작권 문구를 건드리지 않는다면 이는 문제가 되지 않습니다. 따라서, 제가 커스텀하여 사용하는 부분을 포스팅 해보려고 합니다.
1. 파비콘 추가
hELLO 스킨의 사이드바 프로필 아래에 GitHUB, Youtube, Instagram과 같은 SNS 링크를 아이콘으로 넣는 방법입니다.
수정 위치 : skin.html
`skin.html`에서 아래 부분을 검색합니다.
<s_sidebar_element><!-- 프로필-->
<li class="el text-center flex flex-col items-center my-4" id="profile">
<img class="thumb rounded-full ..." src="https://tistory1.daumcdn.net/tistory/7654248/attach/2099c51a8fdd4f1a806566d9ef13b895" ...>
<div class="tit"><a class="link link_tit ..." href="https://winterx3.tistory.com/">youn9._.hon9</a></div>
<div class="blogger text-h-400 text-sm">youn9._.hon9</div>
<!-- 👇 여기 아래에 SNS 링크를 넣습니다 -->
</li>
</s_sidebar_element>
<div class="blogger">...youn9._.hon9</div> 다음, </li> 앞이 추가할 자리입니다.
그 자리에 아래 블록을 **그대로** 넣습니다. 링크 주소만 본인 계정으로 바꾸면 됩니다.
<div class="sns-links flex gap-3 mt-[20px]">
<a href="https://github.com/본인아이디" target="_blank" class="sns-icon" rel="noopener noreferrer" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://www.youtube.com/@본인채널" target="_blank" class="sns-icon" rel="noopener noreferrer" aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.instagram.com/본인아이디/" target="_blank" class="sns-icon" rel="noopener noreferrer" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
</div>- 사용하지 않는 SNS는 해당 <a>...</a> 블록 전체를 지우면 됩니다.
- 순서를 바꾸려면 <a> 블록 순서만 바꾸면 됩니다.
- 트위터, 링크드인 등 다른 SNS를 추가하고 싶다면, 같은 방식으로 `<a class="sns-icon">` 한 블록만 더 넣으면 됩니다. Font Awesome 6 브랜드 아이콘 이름만 맞추면 됩니다.
2. 인용 style 3 글씨 색 진하게
Tistory의 인용 중 Style3은 Notion의 콜아웃과 유사한 형태를 가지고 있습니다. 하지만 회색의 폰트색은 강조의 의미가 부족하여 색상을 조금 조정하여 사용하고 있습니다.
수정 위치 : style.css
#article .contents_style blockquote[data-ke-style=style3] {
color: #000;
}
3. 제목 Bold 처리
제 기호에 따라 제목도 Bold 처리해주었습니다.
수정 위치 : style.css
.tit,
#sidebar .el .tit,
#sidebar .el .link_tit,
#global-header .tit,
.post .content .info .header .tit,
[data-list-style] .post .content .info .header .tit {
font-weight: 700;
}
`700`이 bold입니다. 더 얇게 하려면 `600`(세미볼드), `400`(보통)으로 바꿀 수 있습니다.
4. LaTex 수식 표현하기
'$'와 '$$'를 활용한 수학 수식이 렌더링되도록 하기 위하여 다음 코드를 추가해주면 잘 적용되는 것을 볼 수 있습니다.
수정 위치 : skin.html
<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$']]} }); </script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
4. 기타 hELLO 스킨 사용 팁
- 이미지 너비
hELLO 스킨을 사용할 때, 이미지가 본문 좌우 너비를 넘어간다면, 이미지의 너비를 720으로 조정해주면 됩니다. 이 부분도 수정 가능하나, 이미지를 병렬로 사용할 때 강조되는 효과가 있어서 번거롭지만 상황에 맞춰 조정하며 사용합니다. - 카테고리 수
카테고리를 나눌 때 하위 항목 내에만 게시글이 있다면 전부 집계되어 글 수가 표현됩니다. 하지만, 상위 항목에 게시글이 있다면 그 갯수만 집계되는 현상이 있습니다.
e.g. 배움일기/AI와 배움일기/Design이 있을 때, 배움일기에 글이 있다면 하위항목에 있는 글들은 집계에서 제외되고 있음 - 커스텀 블로그 글들
hELLO 스킨은 출처를 표기한다면 커스텀을 허용하고 있어 다양한 자료들을 확인할 수 있습니다. 코드블럭의 스타일 수정, 이미지 크기 고정, 글씨체 변경등을 찾아볼 수 있습니다.
[hELLO 스킨 커스텀] 홈 피드 카드형 UX 커스텀하기
커스텀을 적용한 전/후는 아래와 같습니다! 전체 샷이런 디자인으로 개선하게 된 데에는 아래 블로그의 모습에 영감을 얻었습니다. 시작하기 전 체크!이 작업은 hELLO 스킨 기준입니다!hELLO 스킨
minsllogg.tistory.com