편의성과 가독성이 좋은 hELLO 스킨을 적용하다!
그동안 기본 스킨을 썼는데, 티스토리 블로그의 편의성과 가독성을 향상하기 위해 새로운 스킨을 적용하기로 결심했다
개발 블로그에 어떤 스킨이 좋을지 찾던 중 hELLO 스킨을 발견하게 됐다
코드 하이라이트도 잘 적용되어 있고 여러 장점이 많으면서도 웹 표준을 최대한 준수하며 제작된 hELLO 스킨을 보자마자
더 이상 다른 스킨은 알아보지도 않고 이렇게 좋은 스킨을 만들어주신 정상우 님께 거듭 감사를 드리며 다운로드를 하게 됐다
너무 좋은 스킨인데 무료 까지라니!!
감사하지 않으래야 않을 수가 없었다
그래서 해당 스킨이 있는 github에 가서 star도 살포시 누르고 왔다
다크 모드 너무 이쁘뮤 ㅠㅠㅠㅠㅠㅠ
hELLO 스킨을 적용하고 추가로 수정한 부분들
1. 목록에서 글과 글 사이의 간격을 조정했다
hELLO 스킨을 적용하고 보니 목록 화면에서 글과 글 사이 간격이 가까워서 글과 글의 구분이 명확하지가 않았다
특히 이미지가 있는 글의 경우 이미지를 보여주고 이어서 글 소개가 나오는데 글과 글 사이의 간격이 가깝다 보니
이미지가 아래의 글에 대한 이미지인지 위의 글에 대한 이미지인지가 명확하지 않았다
그래서 다운로드한 스킨의 style.css의 일부를 수정했다
원래는 아래와 같았지만
.list[data-mode='default'] .item {
padding: 25px 0;
}
padding-bottom을 추가해서 아래와 같이 바꿔주었다
.list[data-mode='default'] .item {
padding: 25px 0;
padding-bottom: 100px;
}
정확히 말하면 style.css를 고친 것은 아니고
내 경우는 이미 style.css를 업로드한 뒤에 이 현상을 발견한 거라서,
티스토리 관리자 화면에서 스킨 편집을 통해 아래와 같이 고쳐주었다
그렇게 해서 적용한 결과가 아래와 같은 화면이다
이제 DB 인덱스 이미지는 바로 아래 글과 관련 있는 이미지임을 명확히 알 수 있다
2. 플러그인에서 코드 하이라이트를 껐다
hELLO 스킨은 코드 하이라이트가 정말 이쁜 스킨인데
나는 이상하게도 스킨을 적용한 후에도 코드 하이라이트가 예쁘게 되지 않았다
심지어 코드의 일부 글자들은 검은색으로 표시되면서 다크 모드에서는 가독성이 심각하게 떨어졌다
결국 문제의 원인을 찾았는데 기존 스킨을 쓸 때 코드 하이라이트를 쓰기 위해 플러그인에서 코드 하이라이트를 활성화시켜뒀었던 게 문제였다
아래와 같이 관리자 페이지에서 플러그인으로 가서 코드 문법 강조 플러그인이 적용돼 있다면 해제를 시켜주자
이렇게 해주고 나니 hELLO 스킨의 코드 하이라이트가 아래처럼 제대로 보이는 것을 확인했다
이쁘다 ㅎㅎ
(참고로 아래 하이라이트 테마는 a11y-dark)
3. 글쓰기 / 관리자 버튼을 추가했다
hELLO 스킨에는 글쓰기 / 관리자 버튼이 없다
이게 은근히 불편했어서 구글링을 통해 글쓰기 / 관리자 버튼을 추구할 수 있는 방법을 찾았고 해당 방법을 적용했다
아래 링크에서 1~3번 과정을 따라 하면 된다
👉 티스토리 블로그 관리자일 경우 글쓰기, 관리자 버튼 추가하기
참고로 2번을 수행할 때 두 가지 챙겨줘야 할 사항이 있는데
첫째로는 도메인 주소를 본인의 티스토리 도메인 주소로 바꿔줘야 한다는 것이고
두 번째로는 버튼 위치를 어디에 둘 것인지 여부다
나는 왼쪽 사이드바에서 가장 아래쪽에 버튼을 두고 싶어서 아래처럼
<div class="copyright">...</div>
아래에 버튼 관련 <div>...</div>를 추가했다
이렇게 적용하면 버튼은 아래와 같이 왼쪽 사이드바 최하단에 나타난다
4. 플러그인에서 카테고리 글 더 보기를 껐다
나는 기존에 플러그인을 통해 '카테고리 글 더보기' 설정을 적용해 뒀었다
그런데 hELLO 스킨도 자체적으로 카테고리 글 더 보기 기능을 제공한다
그러다 보니 아래와 같이 '카테고리의 다른 글'이 두 개가 존재하게 됐다
관리자 페이지에서 플러그인 -> '카테고리 글 더보기' 클릭 -> '해제' 버튼을 눌러주면 된다
그러면 플러그인으로 나오던 부분은 사라지고 hELLO 스킨이 만들어준 부분만 남게 됐다
블로그가 한층 더 업그레이드됐다
기분이 좋다
앞으로 글도 더 열심히 쓰고 파이팅해야겠다!!
