미넴 스킨 모바일 글 간격과 글자 크기 css 변경하는 방법

미넴 스킨 모바일 글 간격과 글자 크기 css 변경하는 방법

너무 자주 티스토리 스킨을 바꾸는 것은 아닌가 싶기도 합니다만 다양한 기능과 괜찮은 디자인의 무료 티스토리 스킨이 많다보니 하나씩 적용하고 있다는 생각도 듭니다. 무료 스킨으로 유명한 고래스킨, 어포스트 스킨에 이어 미넴스킨까지 한번 적용하고 제 입맛에 맞게 몇가지 css를 변경해보았습니다.

미넴 스킨 장점과 사용하게 된 이유

스킨 다운로드는 무료로 현재 배포중으로 미넴 스킨 링크에서 다운받으실 수 있습니다. 개인적으로 생각해본 미넴 스킨의 장점은 다음과 같습니다.

• 꾸준한 업데이트
• 자동목차 기능 있음 (사이드바도 지원)
• 다크모드 지원
• 이미지 alt 속성 사진 제목
• 구글 광고 설정이 쉬움 (메인 구글 일치하는 광고, 사이드바 구글 일치하는 광고, 본문 구글 일치하는 광고, 본문 상단 구글 광고 2개 달기, 좁은 화면 광고 게재)
• cls 속도 빠름
• 이미지 지연 로딩 기술 적용

자동목차와 더불어 이미지 alt를 자동으로 넣어주는 기능이 있는 스킨이 있을까 찾아보고 있었는데요. 자동목차를 제공하는 무료 티스토리 스킨은 많지만, 여기서 4번의 이미지 alt 속성 사진 제목 부분이 굉장히 편리한 기능이라 생각되어 미넴 스킨을 사용하기로 했습니다.

또한 빠르고 가벼운 스킨을 찾고 있었는데 cls 속도가 높게 나오는 것도 장점으로 보입니다.

배경 음악을 넣는 기능도 있고 여러 가지 기능이 많은데요. 취향에 따라 이러한 기능이 장점으로 생각되는 분도 계실 것 같네요.

미넴 스킨 모바일 글 간격 css 변경하기

디자인도 깔끔하고 마음에 들었는데요. 아쉬운 부분은 모바일에서 미넴 스킨의 경우 글자 크기와 글 간격이 너무 크게 보이는 것 같아 수정하고 싶었습니다. 혹시 모바일 버전에서 글을 다르게 보이게 하고 싶으시다면 아래와 같이 적용하시면 됩니다.

모바일 글 간격 css 수정하기

(1) 먼저 티스토리 스킨 관리자 페이지에서 [꾸미기]-[스킨 편집]-[html 편집]-[css]로 들어갑니다.

 

(2) 모바일 설정 css 부분을 찾습니다.

@media (max-width: 767px) 으로 검색하시면 됩니다. 검색 방법은 [Ctrl+F]로 쉽게 검색 가능합니다.

@media (max-width: 767px) 아래에 글 간격 속성 추가

(3) 모바일에서 본문 글 간격 css를 추가합니다.

/* 모바일 본문 간격 추가*/
.content-article {
font-size: 0.875rem !important;
line-height: 1.6 !important;
letter-spacing: -0.7px !important;
word-spacing: 2px !important;
}

미넴 스킨은 모바일 버전에서 글 간격이나 글자 크기가 설정되어있지 않습니다. 위와 같이 원하는 사이즈를 입력하시면 모바일과 pc에서 글자 크기 및 글 간격이 다르게 설정 가능합니다.

font-size	글자 크기
line-height	줄 간격 (p 태그 간격)
letter-spacing	글자 사이 간격
word-spacing	단어 사이 간격

font-size는 글자 크기입니다. 저는 PC버전보다 글씨 크기를 작게 설정하였습니다. 글자 크기 수치는 px, em, rem 등의 단위로 설정해도 무방합니다. px과 rem 수치를 변환시켜주는 사이트에서 수치를 확인하셔도 됩니다.

👉https://offroadcode.com/rem-calculator
👉https://www.toolo.kr/pxtoem

반응형 사이트에서는 유동적으로 적용되는 rem이나 em 단위를 사용한다고 하는데요. px에 익숙한 분이시라면 1rem 16px로 수치를 여러 가지 복잡하게 계산하지 않아도 쉽게 px과 em, rem을 변환시켜주는 사이트입니다.

line-height는 글 줄 간격입니다. 저는 글 간격도 줄여보고 싶어서 수치를 1.6으로 설정하였습니다. p 태그 글 간격을 더 넓히고 싶다면 더 큰 숫자로 입력하시면 되고, 글과 글 간격 사이를 줄이고 싶으시다면 더 작은 숫자를 입력하시면 됩니다.

letter-spacing은 글자 사이 간격입니다. 글자 간 사이를 좀 더 좁게 만들고 싶어서 적용하였습니다. 수치는 -0.7px로 하였는데요. 보통 -1 정도하는 것 같습니다. 너무 좁게 할 경우 글자가 겹치게 보일 수 있으니 조절이 필요합니다.

수치를 마이너스로 하면 글자 간격이 좁아지고 마이너스가 아니라 1, 2와 같이 양수로 할 경우 글자 간 간격이 넓어집니다.

word-spacing도 있는데요. 단어 간 간격을 넓히거나 줄이는 방법입니다. letter-spacing과 마찬가지로 수치를 양수, 음수로 설정할 수 있습니다. 저는 2px로 설정하였습니다.

마치며

자동목차 기능이 본문 뿐 아니라 넓은 화면에서는 우측에 등장하는 것을 비롯하여 이미지 alt 속성 자동으로 넣어주는 기능 등이 있어서 유용한 무료 스킨입니다. 꾸준한 업데이트 중이기 때문에 문제가 되는 부분이나 다양한 기능 추가가 기대가 되는 스킨입니다.

미넴 스킨 모바일 버전에서 글줄 간격 줄인 결과

스킨으로 변경하고 글을 발행해본 후 구글 검색에 긍정적인 변화가 있는지는 좀 더 사용해보고 글을 추가 작성해보겠습니다.