블로그스팟 테마 글자/버튼 크기 수정하기
블로그스팟 무료 테마 잘 사용하고 계신가요? 😀
다행히 긍정적인 댓글이 많아서 공유해드린 입장에서 기분이 좋네요!
몇몇 구독자 분께서 글자 크기, 버튼 크기 수정을 요청하셔서 수정하는 방법
알려드리겠습니다.
블로그스팟 글자 크기 수정 방법
블로그는 가독성이 생명이라 할 정도로 글도 잘 써야하지만, 글자 크기도
중요합니다.
티스토리에서는 CSS를 추가 또는 수정하는 방법으로 수정하지만 블로그스팟은
간단합니다.
테마 > 맞춤설정 > 고급
고급 설정 메뉴에 들어와서 목록상자를 클릭하면 Post Styles 메뉴를 선택할 수
있습니다.
여기서 최대 20px 까지 설정이 가능한데 제가 스마트폰으로 보니 19px가
적당했습니다.
혹시나 작다고 느끼신다면 20px으로 설정하시면 됩니다. 그리고 저장을 누르면
됩니다.
블로그스팟 버튼 크기 수정 방법
두번째는 버튼 크기를 수정하는 방법입니다. 이 방법은 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배 커진 것을 확인할 수 있습니다.
어렵지 않죠? 이렇게하면 미리캔버스, 포토샵 등을 사용하지 않고 버튼을 쉽게 만들 수 있습니다.