블로그스팟 테마 글자/버튼 크기 수정하기
블로그스팟 무료 테마 잘 사용하고 계신가요? 다행히 긍정적인 댓글이 많아서 공유해드린 입장에서 기분이 좋네요! 몇몇 구독자 분께서 글자 크기, 버튼 크기 수정을 요청하셔서 수정하는 방법
알려드리겠습니다.
블로그스팟 글자 크기 수정 방법
블로그는 가독성이 생명이라 할 정도로 글도 잘 써야하지만, 글자 크기도
중요합니다. 티스토리에서는 CSS를 추가 또는 수정하는 방법으로 수정하지만
블로그스팟은 간단합니다.
우선 '테마 > '맞춤설정' 에서 '맞춤설정'을 클릭합니다. 풀다운(V)을 누르지
않고 맞춤설정모드로 들어갑니다.
다음으로 사이드 메뉴가 다음과 같이 나타납니다. 이때 우리는 '고급 V'펼치고 여기서 'Post Styles'을 선택합니다.
이렇게 나타나도록 사이바를 스크롤해서 'Post Styles'을 찾습니다.
다음은 'Post Page Text Font Size'를 19px로 선택합니다. 최대 값은 20px입니다.
설정된 값은 14px였습니다.
이때 폰트사이즈는 각자 자신이 선호에 따라 결정합니다. 중요한 것은 사용자의 입장에서 생각해야겠습니다.
우리들의 글은 데스크탑, 핸드폰등에서 보기 때문에 이를 감안해서 설정합니다.
혹시나 설정한 값이 작다고 느끼신다면 20px으로 설정하시면 됩니다. 혹시
설정을 되돌리고 싶다면, 'Post Styles의 고급 변경사항 적용취소'를 누르면
됩니다..
다음은 버튼 크기를 수정하는 방법입니다. 이 방법은 HTML 편집 메뉴에서
수정할 수 있습니다.
테마 > 맞춤설정 🔽 > HTML 편집
버튼의 종류가 2가지입니다. 일반 버튼과 아이콘이 있는 버튼입니다.
두가지 모두 버튼 크기를 수정해야하기 때문에 두번 나눠서 수정하도록
하겠습니다.
일반 버튼 크기 수정하기
HTML 편집에서 먼저 일반 버튼 크기에 대한 코드를 찾습니다.
먼저 기존의 일반 버튼 크기 코드를 찾아서 삭제합니다.
.post-body a.button{display:inline-block;height:36px;background-color:var(--button-bg);font-family:var(--body-font);font-size:14px;color:var(--button-color);font-weight:400;line-height:36px;text-align:center;text-decoration:none;cursor:pointer;padding:0 20px;margin:0 6px 8px 0;border-radius:36px}
기존 코드를 삭제한 자리에 아래 코드를 붙여넣기 합니다.
.post-body a.button{display:inline-block;height:54px;background-color:var(--button-bg);font-family:var(--body-font);font-size:21px;color:var(--button-color);font-weight:400;line-height:54px;text-align:center;text-decoration:none;cursor:pointer;padding:0 30px;margin:0 9px 12px 0;border-radius:54px}
오른쪽 상단의 저장(💾) 아이콘을 눌러 저장합니다.
아이콘이 있는 버튼 수정하기
이어서 아이콘이 있는 버튼 코드를 찾아서 삭제합니다.
.button:before{float:left;font-family:bootstrap-icons;font-weight:400;display:inline-block;margin:0 8px 0 0}
그리고 기존 코드를 삭제한 자리에 아래 코드를 붙여넣기 합니다.
.button:before{float:left;font-family:bootstrap-icons;font-weight:400;display:inline-block;margin:0 12px 0 0;font-size:21px}
이렇게하면 버튼의 크기가 약 1.5배 커진 것을 확인할 수 있습니다.
어렵지 않죠? 이렇게하면 미리캔버스, 포토샵 등을 사용하지 않고 버튼을 쉽게
만들 수 있습니다.
댓글 쓰기