티스토리 블로그 폰트 크기 변경 버튼 만들기

폰트가 너무 작거나 커서 블로그 컨텐츠 보기가 불편할 경우가 있을 거 같아서 추가한 기능입니다.

 

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

 

html 편집을 클릭 합니다.

 

그럼 다음과 같은 HTML 에디터가 뜨는데,

여기에 실제 동작에 필요한 소스 코드를 작성을 해 보겠습니다.

 

하단에 script 태그 안쪽에 다음과 같은 코드를 작성합니다.

script 태그가 없으면 body 태그 안쪽 끝 부분에 작성을 하시는 걸 추천드립니다.

function changeFontSize(type) {
    var fontSize = $('html').css('font-size');
    fontSize = Number(fontSize.substr(0,fontSize.length-2));
    if(type === '+') {
        fontSize += 0.5;
    } else if(type === '-') {
        fontSize -= 0.5;
    } else {
        fontSize = 16;
    }
    var percent = (fontSize/16)*100;
    $('html, body, textarea, button, input, p, a').css('font-size',percent+'%');
    $('.change-font-btn').blur();
}

먼저 최상단의 폰트 크기(font-size)를 가져 옵니다.

제 블로그 기준으로 16px더군요.

이 값을 기준으로 비율을 적당히 잡아서 값을 가감합니다.

저는 16에서 ±0.5씩 조절하였습니다.

그리고 변경하고자 하는 태그의 폰트 크기가 모두 다를 수 있기 때문에

퍼센트로 값을 변경하여 할당해 주었습니다.

 

그리고 만든 함수를 호출할 수 있는 폰트 크기 변경 버튼도 만들어 주었습니다.

<!-- 폰트 크기 변경 버튼 -->
<div id="change-font-box" class="change-font-box">
    <button class="change-font-btn" onclick="changeFontSize('+')">
        [ + ]
    </button>
    &nbsp;
    <button class="change-font-btn" onclick="changeFontSize('-')">
        [ - ]
    </button>
    &nbsp;
    <button class="change-font-btn" onclick="changeFontSize('')">
        [기본]
    </button>
</div>

 

실제 적용하여 테스트 해 보았습니다.

잘 되는군요.

 

참고 바랍니다.

감사합니다.