블로그팁: 추가된 사이드바를 기본 사이드바와 같은 모양으로 만들기

사이드바의 아이템들은 유사한(대부분 똑같은) 모양으로 디자인되어 있습니다.
태그와, 트랙백, Link 등은 대부분의 테마에서 유사한 모양을 하고 있습니다.

그런데, 플러그인을 통해서 추가한 아이템은 디자인이 다릅니다.
오른쪽 화면에서 보듯이 말이죠.
(오른쪽 화면의 테마는 제가 쓰고 있는 화이트테마 입니다)

화면에 보이는 Link부터 위로(보이지 않는) 트랙백, 태그 등은 모양이 똑같은데, 추가한 이올린 추천글과 이올린 최신글은 모양이 다릅니다.

이런 경우에 디자인을 정리하려면 태그 입력기 플러그인을 사용하면 됩니다.
추가 절차는 아래와 같습니다.

1. 새로운 스타일 추가

새로 추가한 아이템들에 적용할 스타일을 만들어 style.css에 추가합니다.

제가 사용하기로 한 스타일은 트랙백 스타일입니다.
원본 스타일은 아래와 같습니다.

/* recentTrackback */
#recentTrackback { border: 1px solid #ececec; margin-top: 10px; }
#recentTrackback ul { padding: 0; list-style: none; margin: 10px;}
#recentTrackback li { list-style: none; line-height: 1.4; }
#recentTrackback h3 { width: 170px; padding: 3px 0; margin: 5px auto;
  font-family: Verdana; font-size: 11px; font-weight: normal;
  color: #666; border-bottom: 1px solid #f5f5f5;}
#recentTrackback li .info { color: #999; }

이 스타일을 복사한 뒤, 아주 약간 바꿔서 새로운 스타일(sidebaraddons)을 만듭니다.

/* sidebaraddons : added by bluenlive */
#sidebaraddons { border: 1px solid #ececec; margin-top: 10px; }
#sidebaraddons ul { padding: 0; list-style: none; margin: 10px;}
#sidebaraddons li { list-style: none; line-height: 1.4; }
#sidebaraddons h3 { width: 170px; padding: 3px 0; margin: 5px auto;
  font-family: Verdana; font-size: 11px; font-weight: bold;
  color: #666; border-bottom: 1px solid #f5f5f5;}
#sidebaraddons li .info { color: #999; }

제목(h3)만 font-weight를 normal에서 bold로 바꿨습니다.


2. 플러그인 추가

스타일을 적용할 아이템(이올린 추천글, 이올린 최신글) 위와 아래에 태그 입력기::Replacer를 추가합니다.

이 플러그인은 해당 위치에 강제로 HTML 코드를 삽입할 수 있게 해줍니다.

적용할 아이템 위와 아래에 있는 Replacer에서 sidebaraddons 스타일을 사용하도록 설정하면 작업은 끝납니다.

맨 위에 있는 Replacer의 편집 버튼을 클릭해서 <div id="sidebaraddons">라고 입력하고 엔터를 누릅니다.
두번째는 </div><div id="sidebaraddons">, 세번째는 </div>를 마찬가지로 입력합니다.

---

작업을 마친 결과 화면은 다음과 같습니다. 원래 화면보다 기존의 아이템들과 잘 어울립니다.
제목은 의도적으로 두껍게(bold 적용) 만들어서 약간 다른 느낌을 주도록 했습니다.