내 블로그에 포스팅된 글자크기 조절용 버튼 및 자바스크립트 적용하기

로그나 사이트 같은 온라인 매체는 운영자 자신을 위한것이 아니고, 그 매체를 이용하는 이용자의 것이기 때문에, 이용자가 좀더 좋은 환경에서 관리자가 포스팅한 글을 보고 느낄 수 있도록 최대한의 방법을 강구하는 해야 할 것이다.

요즘, 많은 인터넷 뉴스나 블로그등 대부분의 미디어 및 언론사 사이트에 내용물을 보면 제목 옆에는 항상 글자크기를 변경하는 버턴들이 존재하는 것을 많이 보았을 것이다. 뭐.. 젊은 층 유저라면, 디자인상 잡아놓았던 문자크기에 크게 문제될 게 없겠지만, 어느정도 연세가 있으신 어르신들께서 보기에는 좀 작다고 느껴지는 것이 바로 요즘 웹상에서 주로 사용하는 문자크기가 아닌가 싶다.





<---- 현재 이 블로그에 사용되어 지고 있는 글자크기 변경아이콘








<-- 인터넷 뉴스 사이트에 사용되어는 글자크기 변경 아이콘






<-- 포털사이트에서 사용되어지는 글자크기 변경 아이콘







그래서, 티스토리나, 설치형 블로그 또는 일반 웹사이트 같은곳에서 작성된 내용의 글자 크기를 사용자가 원하는 만큼 키우거나 줄여서 볼 수 있는 방법에서 대해서 이번에 기술한다. 안타갑게도, 티스토리 블로그에서는 이 글자크기 변경하는 기능이 기본적으로 존재하지 않는다.
물론, 현재 이 블로그 처럼 블로그 운영자가 직접 만들어 넣거나, 아니면, 이렇게 만들어져 있는 스킨을 쓰지 않는한, 기본적으로 없는 기능이다.

솔직히 크게 있어도 그만, 없어도 그만인 이 기능을 추가하는 것은 위에서도 언급했지만, 시력의 차이로 인해 발생하는 불편함을 최소화 시키고자 하는 것이 이 기능의 주 목적일 것이다.

이 글자크기 변경은 기존에 많은 스크립트들이 만들어져 있고, 또한 많은 곳에서 사용되어지고 있다. 여러분들이 큰 마음먹고 변경하고자 한다면, 이 온라인상에서 얼마든지 정보를 수집하고, 여러분들의 블로그에 적용할 수 있을 것이다. 그리고, 이 포스팅은 그런, 어렵고(?), 수고스러운(?) 부분들을 많이 해결해 드리고자 작성하는 글이다.ㅎ

 

이 기능은 자바스크립트로 이루어져 있으며, html 부분에 대해서 소스를 조금 변경(?), 추가 해야 한다.
크게 어려울게 없는 방법이라 조금만 노력하면 충분히 성공할 수 있으리라 생각한다.^^

 

글자크기 조절용 스크립트를 내 블로그 HTML소스에 삽입하기.


아래 자바스크립트 소스코드를 skin.html에 그대로 복사 해서 붙여넣는다.

<SCRIPT type=text/javascript>
var SeoGDFont = 12;   // 기본 글자크기 //글자크기조절
function fontSz(val) {
        if(val == "inc") {
            SeoGDFont++;
        }
        if(val == "dec") {
            SeoGDFont--;
        }
        if(val == "standard") {
            SeoGDFont = 12;
        }       

 // skin.html 에서 포스트 본문 출력이 되는 <div class="article">를 찾아서,
 // <div class="article" id="print_area">이렇게 id를 추가하고 print_area 이름은 만든다.
 document.getElementById('print_area').style.fontSize = SeoGDFont +'px';

 // style.lineHeight : 줄간격 조절할때 사용
 // document.getElementById('print_area').style.lineHeight = currentFontHe +'px'; 

        // Resize된 Font의 값을 쿠키에 적용
        var ExpDate = new Date();
        ExpDate.setTime(ExpDate.getTime() + 1000*60*60*24*365);
        SetCookie('SGDFontSz', SeoGDFont, ExpDate);
}
 /* 쿠키설정 */
 function SetCookie (name, value) {
  var argv = SetCookie.arguments;
  var argc = SetCookie.arguments.length;
  var expires = (2 < argc) ? argv[2] : null;
  var path = (3 < argc) ? argv[3] : null;
  var domain = (4 < argc) ? argv[4] : null;
  var secure = (5 < argc) ? argv[5] : false;
  document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}
</SCRIPT>

여러분들의 블로그 관리자 -> 스킨 -> HTML/CSS편집 에서   skin.html 상단 </head> 를 찾는다.
그리고, 바로 앞에 위 자바스크립트 코드를 붙여넣는다.
여러분의 스킨파일에서 </head> 는 대부분 skin.html 상단쯤에 위치하고 있어 찾기 쉽다.
<title>[_title_] :: [_page_title_]</title>

<!-- 이자리 쯤 위 자바스크립트 늘 붙여넣기 -->

</head>
<body id="[_body_id_]">
 
위와 같은 방법으로 스크립트를 삽입하면, 스킨파일이 많이 복잡해진다...ㅋㅋ
그래서 좀더 심플한 방법을 제시한다면,

FontSeoGD.js
위 스크립트 파일을 다운 받아서, 관리자모드 -> 스킨 -> HTML/CSS편집 -> 파일 업로드 에서 여러분의 블로그로 업로드 시킨다.

그리고, HTML/CSS 편집에서 위와 같이 </head>를 찾아서, 그 앞에 <script src="./images/FontSeoGD.js" type="text/javascript"></script> 와 같이 삽입한다..
<title>[_title_] :: [_page_title_]</title>

<script src="./images/FontSeoGD.js" type="text/javascript"></script>

</head>
<body id="[_body_id_]">

요렇게 스크립트를 링크로 넣어면, 스킨파일은 참 깔끔하게 존재하며, 스크립트 수정은 js파일만 수정해서 언제든지 파일업로드 시켜서 올리면, 바로 적용되는 것을 볼 수 있다.

자.. 이렇게 가장 중요한 스크립트 설치가 끝났다..


이제부터 여러분들의 블로그나 사이트에 글자크기 조절용 버튼을 달고, 그 버튼이 작동할 수 있게끔 설정하자.


우선 관리자모드 -> 스킨 -> HTML/CSS편집 -> skin.html 에서 "CTRL + F" 키를(찾기) 눌러 class="article" 라고 검색하면 두군데에서 검색이 된다.
첫번째 검색되는 것은 공지사항 글 본문이 출력되는 곳이고, 두번째 검색되는 것이 포스트 본문이 출력되는 곳이다.
이렇게 찾은 곳에는 <div class="article"> 라고 되어 있는데, 이것을 <div class="article" id="print_area"> 라고 id="print_area" 라고 두군데 다 추가한다.

id="print_area"  추가하는 이유는 자바스크립트에서 글자크기가 변경된 영역을 print_area 라로 정해놓았기 때문에 쓰는 것이다.


그리고, 원하는 위치에 글자크기를 조절할 이미지나 문자를 추가해야 한다.
추가될 위치는 위에서 print_area 위치와 마찬가지로 두군데에 동일하게 추가하면 된다.

우선, "CTRL + F" 키(찾기)를 눌러 <span class="date">[$$_article_rep_date_$$]</span>를 찾는 다.
<span class="date">[$$_article_rep_date_$$]</span> 이 코드 바로 아래에 다음과 같은 코드를 추가하면 된다.
##_article_rep_date_## 가 등록이 안되 $$ 를 붙여습니다. $$를 ##으로 변경해서 보시길 바란다.

<span class="date">[$$_article_rep_date_$$]</span>
<!-- 위의 날자출력 바로 아래 붙여넣기 하면 된다. -->
<div class="print_icon">                     
<a href="javascript:fontSz('dec')">[-]축소</a>
<a href="javascript:fontSz('standard')">원상태</a>
<a href="javascript:fontSz('inc')">[+]문자확대</a>
</div> 
이렇게 공지사항 및 본문 포스트 내용 출력하는 두곳에 버튼을 추가하면, skin.html에서 하는 일은 간단하게 끝이 난다.
문자 대신 이미지 아이콘으로 바꾸고 싶다면, 파일업로드로 직접만든(?) 아이콘을 저장하고,
<a href="javascript:fontSz('dec')"> <img src="./images/ICON_SeoGD_Name.gif" alt="풍선말작성" /> </a>
와 같이 문자대신 <img> 태그를 이용해서 아이콘을 출력시키면 된다.


마지막으로 style.css에서 추가한 아이콘 또는 문자버튼에 대해서 위치등 스타일을 변경한다.

지금까지는 skin.html에서 자바스크립트를 추가하고, 크기가 조절될 포스트 위치를 정하고, 버튼아이콘도 추가했다.
위와 같이 수정이 끝났다면, 하단에 있는 저장 버턴을 한번 눌러주자..^^ 작업하다가 날아가면, 깝깝해지니깐.ㅋ

그리고, 이렇게 추가된 아이콘의 위치등을 잡아야 하는데.. 이것은 style.css에서 수행하게 된다.

css는 어디에 추가해도 상관은 없으나, style.css 제일 하단에 새롭게 만들질 스타일을 간단하게 추가한다.^^

.print_icon {margin:5px 0 0 0px; }
.print_icon a { margin-left:2px;} 

작업 마무리하며,

style.css까시 수정이 끝났다면, 하단에 있는  하단에 있는 저장 버턴을 눌러 저장한 다음, 테스트 한번 해보시고, 특별하게 오류가 없다면, 그대로 운영하셔도 좋고, 나름대로, 아이콘의 위치등을 여러분들의 블로그 또는 사이트 디자인에 맞게 수정해서 사용하면 된다.

그리고, style.css 상단에
* {~~~~~~} 이런 스타일이 있고, 그중에 font-size:00px; 코드가 있다면, 과감하게 지우거나 body { font-size:값; ~~} 이렇게 위치를 바꾸자
* {~~~~~} 이 CSS코드는 현재 페이지상에 있는 모든 태그에 공통적으로 스타일을 먹이는 것이기 때문에
* {font-size:값;} 이렇게 존재한다면, 글자크기 변경이 아에 되지않거나, 되는 것도 있고 안되는 것도 있을 것이다.

스크립트는 위 소스를 그대로 받아 사용하고, 버턴에 있는 스크립트 호출자도 그대로 이용한다면, 특별하게 에러는 발생하지 않을 것이다.

위 소스는 현재 http://esajin.kr (서관덕의 시간이 머문 작은공가)에서 적용하고 사용하고 있는 소스이다.

좀더 특별한 블로그 또는 사이트를 한번 만들고 싶다면, 이런 소소한 것부터 바꿔나가면, 꼭 필요한 분들에게 참 유용한 블로그로 존재하게 될 것이다.

기본적으로 티스토리 라는 블로그를 기본적으로 코드 삽입 및 내용변경에 대해서 설명했다. 이것은 포털블로그를 제외하고, 소스를 직접적으로 다룰 수 있는 곳이라면, 적용될 위치정도만 바꿔서 충분히 활용할 수 있을 것이다.

HTML/CSS에 대해서 어느정도 알고 계신분은 크게 어렵지 않겠지만, 그렇치 못한 분께서는 처음에는 어렵다고 느껴지시겠지만, 차근차근 따라 가시다보면, 쉽게 적용할 수 있을 것이다.
포기하지 마시고, 한번 도전해보자..^^

Comments 3