이번에 적용한 스킨의 제목 크기가 너무 작아 스킨을 조금 변경하여 제목 크기를 늘리려고 하였다. bluesky 스킨에서 일반적인 기사의 제목의 스타일이 적용되는 곳은 skin.html 의 539번째 줄이다.

기본값으로 제목은 14px(약 10.5pt)의 크기를 가지고 있다. 본문의 기본값인 9pt보다 겨우 1.5포인트 큰 값이다. 이걸로는 조금 부족한 느낌이 든다. 이것을 24px(약 18pt)로 바꿔보기로 했다.

일반적으로 1 px는 0.75 pt와 같은 크기라고 한다. 즉, 일반적으로 pt = 0.75 * px의 관계식이 성립한다. 예를 들어 7.5 pt는 10px와 같은 크기이다. 물론 이것은 절대적인 것은 아니다.
px와 pt의 크기 비교는 http://kukie.net/resources/design/font_size.html 에서 확인할 수 있다. 글꼴 크기에 대한 더욱 자세한 내용은 http://ilmol.com/wp/2006/06/07/230/ 이곳을 참조할 수 있다.

제목이 크게 나오긴 하는데, 문제는 글자의 위쪽이 잘려나가는 것이었다. 보통은 글자 크기에 맞게 자동으로 셀의 크기가 늘어나는데, 이런 일이 발생하니 의아했다.

이 문제를 해결하기 위해 우선은 셀의 크기를 임의로 변경해보았다. 셀의 높이 크기를 40정도로 변경하고 내 컴퓨터에서 잘 나오는 것을 확인한 후에 업로드하였다.
<td height="40">

여전히 글자가 잘리고 있었다. 많은 시행착오 끝에 이 문제는 CSS와 관련이 있음을 알게 되었다. 즉 style.css 파일을 수정하면 되는데, CSS에 대해서 잘 알지 못하기 때문에, CSS의 어떤 부분을 고쳐야 하는지 막막했다.
다행히도 단군넷의 Dive2Net님이 해결의 실마리를 제공해주었다.

[01:41:12] <Dive2Net> css 에 클래스 하나 더줘서 따로 지정해줘도 될듯 -_-;

이 한 문장이 결정적인 도움이 되었다. 사실, 이 bluesky 스킨은 모든 셀의 글자 크기를 9pt로 설정해놓고 있었다. 즉 12px였다. 그리고 줄 간격이 1.5em이므로, 12px의 1.5배인 18px만이 한 줄의 공간으로 할당되어 있는 것이었다.

참고로 상대적인 줄 간격의 내용은 http://www.emh.co.kr/xhtml/css_font_size.html 을 참고하기 바란다.

이 문제를 해결하기 위해 새로운 td2라는 클래스를 만들고, 이곳에 줄간격을 3em, 즉 36px정도로 주었다. 글자 크기가 24px니 8px의 적당한 여백까지 준 것이다.

.td2 {
FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 3em; FONT-FAMILY: 돋움, tahoma
  }

그리고, 다시 skin.html의 539번째 줄로 가서, <td> 로 되어있던 내용을 <td class=td2> 로 고쳐주었다.

이렇게 해서 셀 크기를 조절할 수 있었다. 적당한 크기의 제목 크기, 좀 더 나아 보인다.

도움을 주신 Dive2Net님께 감사드린다.

  태터툴즈를 설치한 지 벌써 3일이 지났다. 지금까지는 태터툴즈를 설치할 때 기본적으로 제공되는 스킨을 이용하고 있었는데, 가로 크기가 너무 작아 보기가 조금 불편했다. 스킨이 웹 표준인 800x600 픽셀을 따르기 위해서 그렇게 제작되었는지는 모르지만, 요즘 사람들 웬만하면 1280x1024 정도의 넓은 화면을 쓰고 있고 못해도 1024x768의 화면은 된다. 가로폭을 조금 더 넓혀 한눈에 더 많은 글자가 들어올 수 있게 한다면 더 좋을 것 같았다.

  태터툴즈 홈페이지에서 태터툴즈 1.0.6용으로 나온 스킨을 검색해 보았는데, 멋있는 스킨은 이미 #blog 채널 사람들이 사용하고 있었다. 다른 사이트를 둘러보다가 zippy님의 bluesky라는 스킨을 알게 되었다.

http://www.zpne.net/tt/entry/BlueSky-스킨공개

  푸른 하늘의 색상이 참 멋있었다. 디자인이 깔끔하고 가로 폭도 넓어 내 블로그에 적용하기에 알맞았다. 로고도 한번 만들어 보았다.

  zippy님의 스킨에는 댓글에 이모티콘을 쉽게 쓸 수 있도록 이모티콘을 아이콘을 눌러 입력할 수 있도록 되어 있는데, 내 블로그에는 아이콘들이 준비되어 있지 않아 제거하였다. 나중에라도 이 기능을 추가해 볼 생각이다.

  태터툴즈는 꽤 막강한 블로그 저작 도구이다. 태터툴즈의 기본 기능으로도 블로깅 하는 데에 전혀 지장이 없지만, 확장 기능을 이용하면 태터툴즈의 기능을 200% 이용할 수 있다. 이 글에서는 태터툴즈의 플러그인 중 하나인 Tags in Flash를 설치하여 자신의 블로그에 적용하는 방법을 알아보기로 하겠다.

우선 플러그인을 다운로드 받아야 할 것이다. 태터툴즈 홈페이지 (http://www.tattertools.com) 의 스킨&플러그인 메뉴에서 플러그인을 다운로드 받는다. 여기서는 버전 1.0을 사용했다.

압축을 풀고 ftp를 이용해 파일을 올린다(계정이 ssh를 지원한다면 쉘상에서 다운로드 받고 압축을 풀어도 상관없다). 파일을 올릴 위치는 "블로그가 설치된 디렉터리"/plugins/ 이다. 압축을 풀었더니 index.php 파일이 서브디렉터리 없이 현재 디렉터리에 있다면, 파일을 올리기 전에 적당한 디렉터리 이름(예: tagf)을 만든 후에 그 안에 올려준다.

파일 올리기가 완료되었으면 블로그 접속 후 관리자로 로그인하여 환경 설정을 한다. 플러그인을 관리 버튼을 누르고 새로 추가된 Tags in Flash의 상태를 클릭하여 사용중으로 바꾸어 준다.

다시 ftp로 돌아와서  상위 디렉터리로 이동한 후 skin 디렉터리로 이동한다. 그리고 tistory 디렉터리로 이동한다.(보통은 /public_html/blog/skin/tistory 일 것이다.) 그리고 skin.html을 다운받아 텍스트 편집기를 이용하여 연다.

59번째 줄로 가보자. <h3>태그</h3> 이 보일 것이다. 그 아래에 <ul> </ul> 이 있고, 몇 줄의 코드가 보인다. 태그에 플래시를 달기 위해서는 이 내용을 변경해야 한다. 만약 다른 스킨을 사용한다면 태그에 관한 정보가 다른 곳에 있을 것이다.

일단 여기까지 완료되었으면 블로그의 태그는 플래시로 바뀌어 있을 것이다. 웹 브라우저 주소 창에 http://자신의 블로그 주소/tags 를 쳐서 확인해본다. 또는 자신의 블로그에서 태그 링크를 클릭하여 알아볼 수도 있다.

index.php를 열어보자. //가로사이즈 라는 주석 아래에 $tagf_width = 730; 이라고 되어 있다. 숫자만 500으로 바꿔준다. 저장하고 업로드한다.
이제 오른쪽도 짤리지 않고 나올 것이다. 만약, 여전히 오른쪽이 짤린다면 브라우저를 종료한 후 다시 열어본다. 그런데, 짤리지 않고 나오는 대신 글자 크기가 작아진 것을 느낄 수 있다. 이것을 키우려면 tag_vars.php 를 편집해야 한다. 30번째 줄에 태그 폰트 사이즈라는 설명이 있고, 그 아랫줄에 $tagf_FontSize = 12; 가 있다. 숫자를 40으로 바꾸고 저장한 후 업로드한다. 꽤 큼직한 글자로 바뀌어있음을 알 수 있다.

마지막으로, 플래시 태그에서 한글이 모두 ㅁㅁ 처럼 깨져보이는 경우가 있다. 이는 DB의 내용이 UTF로 인코딩되어 있기 때문이다. 한글이 정상적으로 나오게 하려면 tag_vars.php를 수정해 주어야 한다.
78번째 줄에 mysql_query("set names utf8"); 를 추가하고 엔터를 누른다. 저장한 후 업로드한다.

지금까지 태터툴즈에 플래시 태그를 다는 방법을 알아보았다. 도움을 주신 단군넷 MOOYA, 햇빛소년님과 HanIRC의 아침놀님께 감사드린다.