블로그 이전 완료

스킨도 기존과 거의 동일함. popeye님께 감사드릴 뿐.

그간 약 3주에 걸쳐 진행한 티스토리 → 텍스트큐브닷컴 블로그 이전을 완료했다.
마지막 작업은 2차 도메인 맞추기. 이건 아무래도 하루 정도 시간이 더 걸릴 것 같다.

그동안 한 작업들 중 공개할만한 가치가 있는 것들은 별도로 포스팅 예정임.

티스토리와 텍큐닷컴이 유사한 점이 많기는 하지만, 특히 image 폴더에 대한 접근 규칙이 달라서 여러모로 애먹은 점이 많았다.

티스토리 → 텍큐닷컴 이전 준비 중간보고

이전을 결심한 뒤에 가장 먼저 추진한 것은 다름아닌 기존의 티스토리 블로그와 유사한 화면을 유지하도록 하는 것이었다.
이를 위해 추진되는 중간상황을 정리함.


1. 스킨

직접 iNove 스킨을 변환하려하다가 금방 포기했지만, popeye 님께서 이 지존급 스킨을 텍큐닷컴 용으로 변환해주셨더라. 다시 한 번 감사드린다.

참고로, popeye 님의 버전은 티스토리용과는 다르게 검색창, 하단 등을 모두 사이드바로 분리해서 관리한다.
즉, 디자인은 물론, 스킨 자체의 완성도 역시 ㅎㄷㄷ한 수준인 거다.

2. TeCumulus 플러그인 변환

명품 플러그인 Cumulus를 텍큐닷컴에서도 사용할 수 있도록 변환했다.
텍큐닷컴은 확장자가 js인 파일을 업로드할 수 없기 때문에 파일명을 j_cumulus.gif로 변경함.

3. 글목록/링크 드롭다운리스트 적용

별거 아니지만 역시 javascript를 사용하기 때문에 약간의 꼼수 사용.

4. BBCode & 입력 도우미

BBCode는 물론 적용했다. 이미 많은 분들께서 텍큐닷컴에 적용하셨기 때문에 전술한 확장자 js 외엔 별 문제 없었음.
단, 중간에 버그가 발견되어 패치하느라 약간의 시간 소요됨.

입력 도우미는 티스토리와 구조가 완전히 바뀌어 약간 애를 먹음.
너무 구조가 특이하게 변해 일반화하기 어렵다. 역시 도우미 쪽은 포스팅하기 곤란함. ㅠ.ㅠ

5. to-do jobs

아직 작업을 다 못한 것이 3가지다.
- 구글 검색창 달기
- JW Player 도우미
- 각주 풍선말 구현 (가능은 할까?)
- Syntax Highlighter 추가 문법

참, Syntax Highlighter는 텍큐닷컴에서 기본적으로 제공하기 때문에 작업할 필요가 없더라. ^^;

오직 IE6만을 위한 iNove스킨 패치 (젠장!)

독일 출장중에 처음으로 올리는 포스트임. v^.^v

독일에 출장을 왔는데, 여기 사무실 PC엔 IE6만 깔려있다.
게다가 관리자 권한 따윈 절대 주지 않기 때문에 이놈의 구닥다리 웹브라우저를 쓸 수 밖에 없다.

덕분에 IE6에서 iNove 스킨을 유심히 쳐다볼 수 있었는데, 메뉴바가 약간 이상하게 나오는 문제가 있더라.

메뉴바가 1픽셀 아래로 밀려서 나옴

다른 브라우저에서는 아무 문제 없는데, IE6에서만 말썽을 일으켰길래 IE6 핵을 이용해서 문제를 해결했다.

우선 스킨 편집으로 가서, style.css에서 아래와 같은 내용을 찾는다.

#navigation {
    margin:1px 0;
}

이 부분을 아래와 같이 수정한다.

#navigation {
    margin:1px 0 !important;
    margin:0;
}

IE6의 버그를 이용하는 수정으로 정상적인 브라우저는 2행을 적용해야 하지만, IE6는 같은 스타일을 두번 지정하면 무조건 마지막에 지정된 스타일을 적용하여 3행을 적용한다. 희안한 놈.

티끌만치 나아지긴 했지만, 구닥다리 브라우저란 점은 변함이 없다

iNove 스킨 버그(?) 3가지 수정 (내용 추가)

1. 각주의 인덱스를 숫자로 변경

 iNove 스킨을 쓰면 각주(footnote)의 인덱스가 숫자 대신 불릿으로 표시된다.
스킨 제작시의 의도일 수도 있지만, 본문과 숫자로 연결되다 보니 좀 불편하다.

이는 ordered 와 unordered list 태그의 속성을 일괄적으로 부여해서 나타나는 현상이다.
style.css에서 아래의 내용을 찾는다.

.article li {padding-left:10px; list-style-position:inside; list-style-type:disc;}

이 부분을 아래와 같이 수정한다.

.article ol li {margin-left:25px; }
.article div ol li {margin-left:30px; }
.article ul li {padding-left:25px; list-style-position:inside; list-style-type:disc;}

또, BBCode에서 [list] 태그를 사용하면 앞에 숫자가 제대로 나오지 않는다.
이것 역시 원인은 마찬가지다. 이것을 해결하려면 style.css에서 아래 내용을 찾는다.

#commentlist ol, 
#commentlist li {
    list-style:none;
}

이 부분을 아래와 같이 수정한다.

#commentlist ul li { 
    list-style:none;
}

#commentlist .nobbcode ol li { 
    list-style-position: inside;
}

수정된 결과는 아래와 같다.

BBCode의 [list] 태그 예제는 생략. ^^;

2. 하단 페이지 번호중 현재 페이지 표시

하단의 페이지 인덱스 번호에서 현재 페이지가 별도로 표시되지 않는다.
그저 마우스 커서를 갖다대었을 때 커서의 모양으로만 식별이 되는데, 이게 은근히 불편하다.

현재 페이지가 표시되게 하려면 style.css에 아래의 내용을 추가하면 된다.

#pagenavi span.selected {
    color:#fff;
    font-weight:bold;
    background-color:#2970A6;
}

수정된 결과는 아래와 같다.

3. pre 태그에서 따옴표 표시 없앰

Syntax Highlighter에서는 코드를 <pre> 태그로 감싼다.
그런데, iNove 스킨에서는 <pre> 태그는 인용(<blockquote>)과 같은 스타일로 지정이 되어있다.
그래서, 코드를 변환하기 전에 따옴표가 화면에 표시가 되는데, 이게 은근히 거슬리더라.

이 문제(?)를 수정하려면 <blockquote>와 <pre> 태그의 스타일을 구분해서 지정하면 된다.
style.css에서 아래의 내용을 찾는다.

blockquote, pre {
    background:#F5F4F5 url(images/blockquote.png) 3px 3px no-repeat;
    border:1px dashed #CCC;
    padding:8px 12px 8px 36px;
    margin:5px 0;
}

이 부분을 아래와 같이 수정한다.

blockquote {
    background:#F5F4F5 url(images/blockquote.png) 3px 3px no-repeat;
    border:1px dashed #CCC;
    padding:8px 12px 8px 36px;
    margin:5px 0;
}

pre {
    border:1px dashed #CCC;
    padding:4px 8px;
    margin:5px 0;
}

수정된 결과는 아래와 같다.
(문법이 변환되기 전의 잠깐의 모습임)

iNove 스킨 버그 수정: 댓글 아이콘 버그 수정

댓글 아이콘이 좀 밀린다. ㅠ.ㅠ

은근히 신경이 쓰였던 버그인데, 귀차니즘으로 넘어가려고 했다.
그런데... miru님께서 댓글을 통해 지적을 하셨다.

지적을 받았는데도 수정을 하지 않는 건 도리가 아니다. 그래서 수정했다!
(이거 왠지 군대 필이군...)

이 문제의 원인은  아이콘 스타일의 버그가 아니라 아이콘 주변 흰 영역의 폭이 잘못 지정되어 있기 때문이다.
이 문제를 해결하려면 style.css에서 .cmtauthor 스타일을 조금만 수정하면 된다.
일단 아래와 같은 내용을 찾는다.

.cmtauthor {
    float:left;
    width:81px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

여기서 폭(width)의 속성을 80px로 수정한다. 그럼 아래와 같이 된다.

.cmtauthor {
    float:left;
    width:80px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

수정된 결과는 아래와 같다.

짜잔~ 이제 깔끔하다!

덧. 이 버그는 FireFox 3에서 확인했다.

iNove 스킨 수정: IE6에서도 정상적으로 나오도록 수정

iNove 스킨을 사용하다보니 IE6에서 정상적으로 나오지 않는다는 사실을 발견했다.
스킨의 스타일 파일은 모두 정상이지만, IE6이 css 스타일을 정상적으로 해석하지 못하기 때문이다.

이게 뭐니 이게... IE6...

이 문제를 해결하려면 멀쩡한 css를 수정해야 한다. (젠장!)
우선 아래 부분을 찾는다.

/* content START */
#content {
    background:#FFF url(images/sidesep.gif) right repeat-y;
    min-height:400px;
    line-height:165%;
    width:100%;
}
/* content END */

여기서 표시한 width 부분을 아래와 같이 수정하면 된다.

/* content START */
#content {
    background:#FFF url(images/sidesep.gif) right repeat-y;
    min-height:400px;
    line-height:165%;
    width:936px;
    margin:0 auto;
}
/* content END */

이렇게 수정된 스킨은 IE6에서도 아래와 같이 나오는 것을 볼 수 있다.

iNove 스킨 수정: more/less 아이콘 추가

iNove 스킨을 사용하다보니 more/less 아이콘이 없더라.
아이콘을 달려면 아래와 같이 하면 된다.


1. 아이콘 업로드

아래 파일을 다운받아 압축을 푼 뒤에 스킨→직접올리기에서 올린다.

morelessicons.zip

2. style.css 수정

style.css의 끝부분에 아래의 내용을 추가한다.

/* more/less */
.article .moreless_fold { background:url(images/icon_more.gif) left 5px no-repeat;  padding-left: 30px; border-top: 4px double #eeeef1; }
.article .moreless_top { background:url(images/icon_less.gif) left top no-repeat;  padding-left: 30px; border-bottom: 1px solid #eeeef1; color: #344399; }
.article .moreless_bottom { background:url(images/icon_lessR.gif) right 5px no-repeat;  padding-right: 25px; border-top: 1px solid #eeeef1; color: #344399; text-align:right; }
.article .moreless_top span,
.article .moreless_bottom span,
.article .moreless_fold span { display:block; }
/* more/less */

아이콘이 달린 more/less는 아래와 같은 모습이 된다.

iNove 스킨 버그 수정: 트랙백 걸기 추가

화면 구성을 조정하는 과정에서 E, T, D로 짧게 적었습니다

헨리 님께서 공개하신 iNove For Tistory 스킨은 워드프레스 스킨을 변환한 것인데, 디자인과 색감이 깔끔해서 많이들 사용하고 계십니다.
그런데, 약간의 버그가 있습니다.

1. 본문 제목 부분에 트랙백 및 삭제 아이콘이 없어 트랙백을 걸거나 삭제하려면 관리메뉴로 가야 함
2. 불필요한 편집 메뉴가 있음

이 버그를 수정하는 방법은 아래와 같습니다.


1. 파일 추가

새로 추가할 트랙백 및 삭제 기능에서 사용할 아이콘을 추가합니다.
아래 파일을 다운받아 압축을 푼 뒤 관리메뉴의 스킨→직접 올리기에서 올립니다.

icons2.zip

2. css 추가

추가할 기능에서 사용할 아이콘을 css에 등록합니다.
아래 내용을 style.css 맨 끝에 추가하면 됩니다.

/* trackback icon 버그패치 */
.post .edtrackback, 
.post .eddelete {
    background:url(images/icons2.gif) no-repeat;
    padding-left:22px;
    height:16px;
    line-height:16px;
    display:block;
    font-size:11px;
}

.post .eddelete {
    background-position:0 -16px;
}
/* trackback icon 버그패치 */

3. 트랙백/삭제 메뉴 추가

skin.html에서 아래와 같은 부분을 찾습니다. 원본 파일의 경우 189행부터 시작됩니다.

<s_article_rep>
    <div class="post">
        <h2><a href="[#\#_article_rep_link_#\#]">[#\#_article_rep_title_#\#]</a></h2>
        <div class="info">
            <span class="date">[#\#_article_rep_date_#\#]</span>
            <div class="act">
                <span class="comments"><a href="[#\#_article_rep_link_#\#]#commentlist"><s_rp_count>[#\#_article_rep_rp_cnt_#\#] Comments</s_rp_count></a></span>
                <s_ad_div>
                    <span class="editpost"><a href="[#\#_s_ad_m_link_#\#]">Edit</a></span>
                </s_ad_div>
            </div>
            <div class="fixed"></div>
        </div>

표시해 둔 9행 다음에 아래의 두 줄을 추가합니다.

<span class="edtrackback"><a href="#" onclick="[#\#_s_ad_t_onclick_#\#]">Trackback</a></span>
<span class="eddelete"><a href="#" onclick="[#\#_s_ad_d_onclick_#\#]">Delete</a></span>

4. 불필요 편집 메뉴 삭제

skin.html에서 다음과 같은 부분을 찾습니다. 원본 파일의 경우 167행부터 시작됩니다.

<s_article_protected>
    <div class="post">
        <h2><a href="[#\#_article_rep_link_#\#]">[#\#_article_rep_title_#\#]</a></h2>
        <div class="info">
            <span class="date">[#\#_article_rep_date_#\#]</span>
            <div class="act">
                <s_ad_div>
                    <span class="editpost"><a href="[#\#_s_ad_m_link_#\#]">Edit</a></span>
                </s_ad_div>
            </div>
            <div class="fixed"></div>
        </div>

여기서 표시된 6~10행을 삭제합니다.

이것으로 스킨의 버그 수정은 끝났습니다.
멋진 스킨 잘 쓰시기 바랍니다.

스킨 변경 공지

스킨을 변경했습니다.
바뀐 것이 거의 없어보이겠지만, 베이스 스킨을 윤초딩님이 공개한 iNove에서 헨리님의 iNove로 바꿨습니다.

BBCode, Cumulus 등등 모든 기능을 다시 적용했습니다

이런 뻘 짓을 한 이유는 다름 아닌 표절의혹 때문입니다.

두 스킨을 비교하는 과정에서 불쾌한 인상을 받았습니다.
한 스킨은 다른쪽 스킨을 갖다가 약간의 수정만 거친 후에 자기 id를 붙여서 공개한 것이란 결론을 내렸습니다.

두 스킨의 구성이 100% 동일하다는 점 외에도 이런 결론을 내린 근거는 다음과 같습니다.


1. 약간의 버그가 있는데, 버그마저 100% 동일함

정상적인 스킨이라면 자신의 블로그에 보면 제목 바로 아래 위와 같은 메뉴가 있어야 합니다.
이 중 특히 "트랙백 보내기" 메뉴는 관리화면에서 보내는 것이 더 불편하기 때문에 있는 것이 정상입니다.
이 메뉴를 사용하려면 ##_s_ad_t_onclick_## 치환자를 써야 합니다.
그런데, 두 스킨 모두 똑같이 이 치환자가 없습니다.

※ 제목에 버그라고 적었지만, 없어도 보내는 것은 가능하므로 버그가 아닐 수도 있습니다.

또, 보호글에는 편집(Edit) 메뉴가 필요없는데, 굳이 이 메뉴가 있다는 버그도 동일합니다.

편집(수정) 치환자인 ##_s_ad_m_link_## 가 있어도 기능은 동작하지 않습니다.
로그인 상태에서는 바로 해당글로 들어가고, 로그인 상태가 아니라면 클릭해도 아무런 일도 벌어지지 않습니다.

2. 사용하지 않는 이미지가 똑같이 들어있음

두 파일들 모두 *_1col.gif  파일 4개가 있습니다.
아마도 워드프레스용 원본 스킨에 들어있던 파일인 것 같은데, 이 파일 4개가 동일하게 들어있습니다.
워드프레스 스킨을 티스토리 용으로 변환하는 과정에서 삭제하는 파일이 한둘이 아닌데 유독 저 파일들이 똑같이 들어있다니요...

3. 워드프레스 로고가 css에 남아있음

헨리님 스킨 하단에는 워드프레스 로고가 찍혀있는데, 윤초딩님 스킨 하단에는 이 워드프레스 로고가 없습니다.
그런데, 윤초딩님 버전의 css를 보면 아래와 같이 워드프레스 로고에 대한 css가 선명히 남아있습니다.

a#powered {
    background:url(images/wp-logo.png) no-repeat;
    display:block;
    width:92px;
    height:57px;
    float:left;
    margin:0 10px 0 5px;
    text-indent:-999em;
}

이것으로 윤초딩 님의 스킨은 헨리님 스킨의 html에서 워드프레스 로고를 출력해주는 아래 부분만을 제거하고 css는 그대로 뒀다는 것을 알 수 있습니다.

<a href="http://wordpress.org/" id="powered">[##_tattertools_name_##]  [##_tattertools_version_##]</a>