이번 주 시네21에 블로그 관련 기사가 떴습니다. 지난 번에는 필름2.0에 관련 기사가 나왔었지요. 태터툴즈, 티스토리를 비롯해 자주 가는 곳도 소개가 되어 카메라로 찰칵찰칵.

기사 전체를 찍은 건 아니고 그냥 이름들 중심으로 찍었으니 기사를 보실려면 직접 사서 보셔야 할 듯 합니다. (온라인에는 기사가 안 뜬 것 같군요. 원래 이런 비영화 기사는 안 뜨던가 싶기도 하고.)

클릭하면 크게 볼 수 있습니다.

씨네21 기사 #1

제목은 [블로그 혁명 시작되나]


씨네21 기사 #2

티스토리가 제일 처음으로 언급되었군요. 네이버 블로그 시즌 2와 싸이월드 C2도 함께 나오고요.


씨네21 기사 #3

다인님의 블로그도 소개됐습니다. 꽃등심 이것저것으로 안나왔네요? ^^


씨네21 기사 #4

서명덕님의 블로그도 소개되었죠. 그런데, 이런… 올블로그 이름에 오타가 났네요. 올브로그;;;


씨네21 기사 #5

다음의 블로거 기자단도 나왔습니다. 사실 주목을 좀 받을 것도 같은데 활동에 비해 크게 알려지지 않은 것 같아요.


씨네21 기사 #6

박스 기사입니다. 태터툴즈와 티스토리가 팀블로깅을 지원한다고 소개되었군요.


씨네21 기사 #7

웹2.0 시대의 개방과 공유라는 흐름을 거스르지 말자고 합니다.


,
스킨을 배포합니다.

Letter To You 1.1

Letter To You 1.1 스킨입니다.


스킨명

Letter To You 1.1


개요

예, 편지입니다. 제가 예전에 좀 멀리서(^^) 블로깅을 한 적이 있었는데, 블로그에 접속해서 글을 적고 답글을 달고 하다보니 마치 편지를 적는 듯한 느낌이 들더군요. 안부를 묻고 전하고 그런 느낌 말이죠. 그 때 생각했던 컨셉을 완성했습니다. 편지봉투와 편지지 그리고 연필로 분위기를 잡아주고 있습니다.


내용

- 2단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
  단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않으나
  위의 편지봉투와 메뉴들 간의 레이아웃을 고려하면서 수정하는 게 쉽지는 않을 듯 합니다.

- 하지만 당근 직접 수정을 하실 수도 있지요.
  역시 style.css 와 index.xml 만 수정하면 됩니다.
  대부분의 경우 style.css의 주석에 적어둔
  contentWidth과 관련된 수식에 맞춰서 수정하면 큰 문제는 없을 것입니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.



그리고 몇 가지 설명할 게 있습니다.

0. 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

1. 관리자 로그인을 하려면 우측 상단의 연필심 부분을 클릭해주세요.
   따로 버튼이 보이지는 않습니다.

사용자 삽입 이미지

2. 좌측 상단에 From 부분의 이름은 블로그의 주인장 이름입니다.
    이름에는 rss 링크가 걸려있어요.
    (물론 사이드바 하단에 rss 버튼이 따로 존재합니다.)
    skin.html 을 열어서 조사 (~가, ~이)를 수정할 수 있습니다.
    <div id="blog-author"><a href="[ ##_rss_url_## ]" onclick="window.open(this.href); return false;" onfocus="this.blur();">[ ##_blogger_## ]</a>가.</div>
    18번째 줄이죠.

사용자 삽입 이미지

3. 물론 편지봉투 좌측 하단에 나타나는 어두운 갈색 바탕의 글자는 블로그 제목입니다.

4. To 즉, 받는 사람의 경우에는 skin.html 을 열어서 직접 수정할 수 있습니다.
   <div class="blog-receiver">그대에게.</div>
   22번째 줄이죠.

사용자 삽입 이미지

5. From 과 To 의 이름을 css의 float으로 맞춰놨는데, 이상하게도
    파이어폭스와 인터넷 익스플로러, 오페라에서 모두 제각각 나타나더군요.
    브라우저마다 조금씩 위치가 다릅니다. 이점 이해해주시고,
    혹시 완전히 이상하게 나오는 (혹은 아예 안나오는) 브라우저가 있으면 알려주세요.



다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Letter To You 1.1



그리고

익스플로러 7에서 제목 부분에 문제가 있다고 하는군요. ㅜ.ㅜ 이 스킨으로 보자면 [To. 그대에게] 부분과 [Skins And Bones] 부분이 겹친다고 합니다. 브라우저마다 표시가 다 다르게 되니 참 어렵군요. 이 부분은 아무래도 다른 방안을 생각해 봐야겠어요. (예를 들자면 psd 파일을 제공해서 각자 직접 이름을 적게 한다든지 하는 방안 말이죠.) 하지만, 그 밖의 브라우저에서는 별 다른 이상 없을 거예요. ==> 인터넷 익스플로러의 float-margin 버그 를 알아서 일단 제 블로그에만 조처를 해두었습니다. 만약 이게 여러 브라우저에서 잘 보이면 이 방법으로 패치를 할 생각입니다.

또한 코멘트 폼에서 탭키를 누르면 순차적으로 이동해서 '댓글달기'버튼으로 가게 되어있는데, 익스플로러 7에서는 역시 사파리에서 잘 안된다고 합니다. 으윽; (그래도 이건 치명적인 건 아니니까;;; )



그리고

2007년 2월 3일 6시 30분 이전에 받으신 분들 중 키로그 출력이 잘 안되시는 분들은 다시 받아서 skin.html을 재설치 해주세요. (특히 티스토리를 쓰시는 분들) 키로그 쪽에 주석을 달아뒀는데, 그게 출력에 영향을 끼친다는 걸 발견했습니다. 설치용 태터툴즈용 주석을 지우니 잘 작동되는군요. 죄송합니다. :|



그리고

설치형 사용자들 중에서 빨간테두리가 나오시는 분들은 style.css에 가서 136번째 줄의 border:1px solid #f33; 으로 되어 있는 걸 지워주세요. 디버깅용으로 남겨두었던 것인데 제가 위의 주석 지우다가 다시 활성화시켰더군요. 죄송합니다. 물론 지금 다운로드 버전은 괜찮습니다. 스킨 배포 하면서 실수가 정말 많군요.
,
Mess Around 1.1

Mess Around 1.1 스킨 모습입니다.



스킨명

Mess Around 1.1


개요

어지럽혀 보고 싶어서 만든 스킨입니다. 포스트잇과 구겨진 종이[각주:1], 여기저기 튄 잉크가 컨셉입니다. 예, 정말 메스 어라운드하죠. 하지만, 내공이 부족하여 윗부분에 조금 어지럽하는 척만 하고 말았습니다. (다음번엔 꼭!)

(참고로 제가 '어쿠스틱 마인드'의 써머즈입니다. 어쿠스틱. ^^)


내용

- 1단형 스킨입니다.

- 사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
   (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)
   예를 들어 카테고리가 옆으로 주루룩 나오기 때문에 보기 싫으신 분들은 살짝 빼두실 수 있다는 뜻이지요.

- 화면이 세로로 길어지는 바람에 위 아래로 이동하는데 불편하여 자바스크립트를 넣어두었습니다.
   마우스를 더블클릭하면 제일 아래로, 혹은 제일 위로 이동합니다. 한번 해보세요.
- 자바스크립트 에러가 난다고 합니다. 이 기능을 빼야 할 것 같습니다;;;

- 블로그 로고 이미지를 보여줍니다.
  가로 크기 80px 이상인 이미지들도 무조건 80px 로 고정되서 표시가 됩니다.
  처음부터 적당한 크기로 줄여서 사용하시는 게 좋고, 가로 세로 크기가 비슷한 이미지가 보기 좋습니다.

- 가로폭은 기본적으로 650px이지만 원하는 폭으로 수정하기가 그리 어렵지 않습니다.
   style.css 와 index.xml 만 수정하면 됩니다.
  수정 방법은 style.css 안에 주석으로 넣어두었습니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Mess Around 1.1


그리고

- 본문폭 500px 블로그, 800px 블로그를 위한 스타일시트와 xml를 만들어 두었습니다.
  다운 받아서 이름만 style.css 와 index.xml 로 변경해서 사용하시면 됩니다.

invalid-file

CSS & XML for various widths (Mess Around 1.1)



그리고

- 이 스킨을 티스토리에 설치하시면 자바스크립트 에러가 난다고 합니다. 더블클릭하면 위아래로 이동하는 기능 때문인데요, 불편하신 분들은 해당 스크립트를 삭제하시고 쓰시면 되겠습니다. (설치형에서 테스트할 때는 별다른 에러가 나지 않았는데 티스토리에 설치하니 나는 것 같군요.)

skin.html 의 11번째줄 <script language=javascript> 부터 51번째줄 </script> 까지를 삭제하시면 됩니다.
  1. 참고로 종이 구겨진 건 예전에 진짜로 종이를 구겨놓고 카메라로 찍어서 손봤던 샘플입니다. ^^ [본문으로]
,
Docs Triple 1.1

Docs Triple 1.1은 이렇게 생겼습니다.


스킨명

Docs Triple 1.1


개요

일종의 닥스 3종세트 (^^) 입니다. 가격은 3만 9900워… 코발트 블루, 브라운, 그린 이렇게 3가지 테마의 스킨 모음입니다. 좌측에 관리자 로그인 버튼 등의 조그만 스몰바가 위치해 있지만 기본형의 느낌을 그대로 갖고 있는 스킨입니다.

(압축파일을 풀면 총 3개의 스킨이 들어있습니다. 각각 Docs Green 1.1, Docs Blue 1.1, Docs Brown 1.1 입니다.)


내용

- 총 3가지 테마의 스킨이 들어있습니다.

- 각각의 스킨은 모두 동일한 모양이며 2단형 스킨입니다.

- 사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
   (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 좌측에 있는 스몰바에는 RSS, 로그인, 글쓰기 이렇게 3가지 버튼이 들어있고,
  상단의 블로그 메뉴는 위치로그, 태그, 방명록 이렇게 3가지 버튼이 들어 있습니다.

- 하나의 포스트에서 댓글과 트랙백 영역은 색깔을 달리하여
  하나의 문서가 본문/피드백으로 구분되는 효과를 주려 하였습니다.

- 블로그 로고 이미지를 보여줍니다.
  단, 가로 220px 이상이 넘지 않게 해주세요.

- 가로폭은 기본적으로 610px이지만 원하는 폭으로 수정하기가 그리 어렵지 않습니다.
   style.css 와 index.xml 만 수정하면 됩니다.
  수정 방법은 style.css 안에 주석으로 넣어두었습니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 최대한 웹표준을 준수하려고 노력했습니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Docs Triple 1.1


그리고

▶ 본문폭 500px 블로그를 위한 스타일시트 다운받기 (3가지 색상 모두 있습니다.)

주의 : 만약 이 스타일시트를 받으면 index.xml 마지막 부분에 있는 contentWidth 값도 변경시켜주세요.
    <contentWidth>610</contentWidth> 이 부분을
    <contentWidth>500</contentWidth> 이렇게 변경시켜야 블로그를 사용하기 편합니다.


그리고 2

▶ 혹시 사이드바의 크기를 300px 이상으로 하시고 싶은 분들은 아래 파일 받으셔서
    자신이 선택한 색깔을 골라  이미지 디렉토리에 덮어 쓰세요.
    그렇게 크게 하실 분이 있을까 싶었는데 있었군요;;;
     (사이드바를 600px까지 사용할 수 있게 됩니다.)


그리고 3

- 참고로 이 스킨에 사용한 폰트는 윈도우에 기본으로 들어있는 Tahoma 입니다. 각각의 버튼이나 타이틀들이 심플한 편이니 비교적 쉽게 다른 버튼이나 타이틀을 추가하거나 수정하실 수 있을 듯 합니다.
,
스킨을 배포합니다.

Colorful Waves 1.1 스크린샷

Colorful Waves 1.1의 모양은 이렇습니다.


스킨명

Colorful Waves 1.1


개요

컨텐츠 영역이 중앙 정렬되는 가변폭 스킨입니다. 좌우측에 각각 상반되는 색감의 파도 혹은 구름 모양의 배경들이 레이어로 쌓여있는 느낌이 나도록 했습니다. 사이드바는 통째로 하단으로 내려가 있습니다. 좌우측 파도 배경에 쓰인 붉은색과 파란색 계열의 색상은 컨텐츠 영역에서도 어느 정도 역할을 분담하고 있습니다.


내용

- 1단형 스킨입니다.
   사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
  단, 가로 250px 에 최적화되어 있습니다. 주의해주세요.

- 컨텐츠가 들어가는 영역의 폭이 브라우저의 크기에 따라 변하는 변동폭 스킨입니다.
  하지만, 브라우저가 작아진다고 해서 무한정 줄어들 수는 없겠지요.
  컨텐츠 영역의 최소폭은 500px 입니다. 브라우저가 커지면 자연스럽게 늘어나지요.

- 여러 브라우저에서 중앙정렬 및 레이아웃 유지 등을 구현하기 위해
   불가피하게 table 태그라든지 투명 이미지 등을 skin.html에 넣었습니다만,
   대부분의 경우 - 폰트 크기라든지 색깔, 사용된 이미지 등은
   style.css 파일을 수정하는 것만으로 가능합니다.

예를 들어 제목이 표시되는 폰트는 Trebuchet MS 입니다.
영문에는 잘 어울리는데, 한글 제목일 경우에는 좀 어색한 감도 있습니다.
이럴 때 style.css 를 열여서
h1 { font-size:1.8em; font-family:"Trebuchet MS" Georgia Verdana Tahoma Gulim; font-weight:bold;}
부분을 찾아서 변경해주면 됩니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Colorful Waves 1.1


그밖에.

- FootNote 플러그인으로 작성한 후 각주의 번호가 표시되지 않는다고 합니다. 물론 각주의 내용은 잘 표시되고요. 참고로 이 현상은 파이어폭스와 오페라에서 생기는 걸 확인했습니다. 인터넷 익스플로러에서는 잘 표시되네요. @.@ 처리 완료했습니다.

,