jugug.net ...NAKED

얼마전 티스토리에서 화면의 너비에 따라 2단, 3단으로 바뀌는 Moving Box라는 스킨을 만들어 배포한것으로 압니다.
배포된지 얼마 되지 않았는데도 실용성과 디자인덕분인지 사용하시는 분이 많은거 같습니다.
저도 스킨개발을 위한 서브블로그에 적용시켜 보니 이쁘네요.

그런데 한가지 문제가 있습니다. 글을 쓴 날자를 이쁘게 달력스타일의 이미지로 바꿔주는 부분이 있는데 페이지를 읽어들일때 잠깐 날자가 택스트로 보였다가 사라지면서 이미지로 보이는 겁니다. 이부분은 자바스크립트로 처리하더군요.
크게 신경을 쓰지 않는분도 계시겠지만 다른 스크립트도 로드를 많이 하시는 분은 상당히 신경이 쓰일만한 부분이라고 생각합니다.

도아님께서 스킨을 바꾸시면서 이 부분이 약간 맘에 안드신다는 글을 보고 해결방법을 생각해 보았습니다.

해당부분을 처리하는 자바스크립트가 약간 복잡하여 간소화시키고 개선해 보았습니다.

1. 스킨의 skin.html 해더부분의 자바스크립트 imgData함수를 찾아 다음과 같이 바꿔줍니다.

function imgDate(dateValue) {
   var splitDate = dateValue.split("/");
   var splitDate2 = splitDate[2].split(" ");
   var dateMonth = splitDate[1];
   var dateDay = splitDate2[0];

   document.write('<img src="./images/mon'+dateMonth+'.gif" />');
   document.write('<img src="./images/'+dateDay+'.gif" />');
}

그리고 바로 아래 pageLoad함수에서 imgDate();를 지우세요.

function pageLoad(){
   initLayoutInfo();
}

2. style.css 에서

.article_head .date_image {float:left;}

이부분을 아래와 같이 바꿔줍니다.

.article_head .imgdate {float:left; width:49px; height:53px;}

3. skin.html에서

<span class="imgdate">[\##_article_rep_date_##]</span>

이부분을 모두 찾아서 (총 두군데) 아래와 같이 바꿔줍니다.

<span class="imgdate"><script type="text/javascript">imgDate('[#\#_article_rep_date_##]');</script></span>

잘 안되신다면 천천히 따라해 보세요.