반응형 스킨 Doo Be Doo로 교체!

요즘 대세(?)인 반응형 스킨이 티스토리용으로도 나왔다.

그 중 Ungki(H 님)님이 만든 두비두를 선택했다.

1단(두비두)과/2단(스파이더웹)을 모두 배포하는데, 1단의 깔끔함이 더 좋아 이 쪽으로 선택.

데스크탑에서는 대략 이런 모습이 보이고…

모바일에선 대략 이런 모습이 보임

그런데, (어느 스킨이나 다 그렇듯) 이 스킨 역시 아주 약간 손 댈 필요가 있다.

- 모바일웹 스킨 OFF로 설정

- 헤더 이미지 교체

헤더 이미지는 당연히 교체해야 되고, 크기를 바꾼다면 지침에 따라 css를 약간 수정해야 한다.

- 애드 센스

애드 센스를 설치한 경우 반응형에 맞는 애드 센스를 설치하는 것이 좋다.

- 오류 수정

본 스킨엔 아주 약간의 버그가 있다.

모바일 모드에선 이미지 아래의 캡션 정렬이 조금 이상하고, 슬라이드쇼의 버튼 배열도 어색하다.

또, 일부 브라우저에서 각주 등이 오동작하거나, Syntax Highlighter가 살짝 이상하게 표시된다.

이런 문제들을 해결하려면 styles.css에 다음 내용을 추가하면 된다.

span.cap1 { width:100%!important; color: #2870A3!important;}
sup.footnote { position:static; vertical-align:super; }
.galleryControl a img, .entry-content img { display:inline; }
div.syntaxhighlighter .container:before { display:inline; }

그리고, 각주를 클릭하면 각주와 본문 간을 이동하지 못하는 버그가 있다.

app.js에서 다음 부분을 찾아서

$("[href^=#]").click(function(e) {

아래와 같이 수정해야 한다.

$("a[href=#]").click(function(e) {