LT blog

미투데이 에서 블로그로 글을 배달하면 <ul>, <li> 태그의 기본 형태로 블로그에 포스팅된다. 다행히도(?) 포스트에 별도의 클래스를 지정하기 때문에 css (Cascading Style Sheets) 파일을 조금 수정하면 자신만의 스타일로 미투데이 내용을 블로그에 포스팅할 수 있다.

최근 본 블로그로 보내진 글의 소스 일부를 보면 아래와 같다.

<div class="me2day_daily_digest">
<ul>
  <li>내일 새벽 3시 45분 열리는 맨체스터 유나이티드와 FC 바르셀로나와의 UEFA 챔피언스리그 결승전. 벌써부터 설렌다.<span class="me2_tags">(me2DC 맨유 바르셀로나 챔스 결승)</span><span class="datetime"><a href="http://me2day.net/jaesung/2009/05/27#09:35:55" rel="bookmark" title="퍼머링크" class="datetime">2009-05-27 09:35:55</a></span></li>
  <li><a href="http://me2day.net/maruinara/2009/05/26#11:19:46">미투데이에 적은 어떤 글은 혼잣말이고 어떤 글은 단순한 메모나 기록이지만 마음 한 편으로는 이 글을 누군가가 봐주었으면 하지 않을까? 어쨋든 그러한 기록이 여기에도 남고 블로그에도 남길 수 있다는 점이 좋다.</a><span class="me2_tags">(미투데이 의미 혼잣말 메모 기록 블로그)</span><span class="datetime"><a href="http://me2day.net/jaesung/2009/05/26#11:25:56" rel="bookmark" title="퍼머링크" class="datetime">2009-05-26 11:25:56</a></span></li>
  <li>작년 채현이 결혼식 때 사진, 올해 방콕에 갔을 때 사진, 5월 초 연휴 때 사진 등 포스팅할 사진은 계속 쌓이지만 정리할 엄두는 나지를 않고…. 우선 맛배기로 방콕에서의 사진 한 장 업로드!<span class="me2_tags">(사진정리 방콕 uploader me2photo)</span><span class="datetime"><a href="http://me2day.net/jaesung/2009/05/27#11:59:25" rel="bookmark" title="퍼머링크" class="datetime">2009-05-27 11:59:25</a></span><p><a href="http://www.flickr.com/photos/liberotown/3568362357/"><img src="http://farm4.static.flickr.com/3659/3568362357_b12e2c138c.jpg" alt="me2photo"></a></p></li>
</ul>
<p style="background: transparent url(http://me2day.net/images/me2day_icon.gif) no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-right: 25px; text-align: right; font-size: 0.9em;">이 글은 <a href="http://me2day.net/jaesung" target="_blank">재성才誠</a>님의 <a href="http://me2day.net/jaesung/2009/05/27#09:35:55">2009년 5월 27일</a>의 미투데이 내용입니다.</p>
</div>

위 소스를 보면 전체적으로 'me2day_daily_digest'라는 클래스로 묶여 있고, 태그는 'me2_tag', 퍼머링크는 'datetime'로 묶여 있는 것을 알 수 있다. 따라서 현재 사용 중인 스킨의 css 파일에 아래 내용을 추가해 보았다.

/* content: me2day */
.content .article .me2day_daily_digest ul {
  margin: 0 10px 0 10px;
}
.content .article .me2day_daily_digest ul li {
  list-style:none;
  font-size: 120%;
  background: transparent url(http://me2day.net/images/me2day_icon.gif) no-repeat scroll left;
  -moz-background-clip: -moz-initial;
  -moz-background-origin: -moz-initial;
  -moz-background-inline-policy: -moz-initial;
  padding-left: 25px;
  border-bottom:1px solid #ded2c6;
}
.content .article .me2day_daily_digest ul li .me2_tags {
  font-size: 70%;
}
.content .article .me2day_daily_digest ul li .datetime a {
  font-size: 80%;
  padding-left: 10px;
}
.content .article .me2day_daily_digest ul li img {
  border: 5px solid #ded2c6;
}

사용하는 스킨에 따라서 클래스 구조가 조금씩 다를 수 있다. 위 내용을 css 파일에 추가해도 변화가 없다면 '.content .article' 부분만 삭제하고 나서 적용한다. 위 내용을 적용한 모습은 아래 이미지와 같다.

새로운 스타일을 적용한 블로그 화면.

ⓒ 2009 by 방형준(才誠)

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.