블로그 댓글 및 방명록에 BBCode 사용가능하도록 변경

우연히, 뜬금없이, 가당찮게, 할 일 없어서 등의 이유로 텍스트큐브 플러그인 사이트에 접속했는데, 눈에 띈 플러그인이 있었으니 다름 아닌 BBCode plugin for Textcube 1.1이란 플러그인이었다. 평소 댓글 등에 BBCode를 사용할 수 있게 만든 블로그를 방문하면 부러워했었는데, 그 부러움을 상쇄시켜줄만한 매력으로 다가와 직접 설치해봤다.

설치 결과는? 좋다!¹

먼저 이 플러그인 관련 정보는 아래와 같다.

• 최초로 플러그인 만드신 분: okto님으로 알고 있었으나 실제는 inureyes님
• 수정하신 분: okto님
• 관여해주신 고마운 분들: inureyes님, okto님 등등 여러분들
• 원 글: TC용 BBCode plugin + 버튼바

적용하면서 몇 가지를 수정했는데, 왜냐하면 현재 본인의 블로그에 적용된 스킨이 hi8ar님의 whiteBoard for Textcube란 스킨이기 때문이다. 그래서 이와 관련해서 적용한 내역은 아래와 같다.

• screen.css 변경
  /* ——————————————————————- */
  /* BBCode Helper */
  /* ——————————————————————- */
  .emoticonborder { border-style: solid; border-width: 1px; border-color: #cbcbcb; padding: 3px; margin: 0 0 -2px 0; height: 21px; }
  .emoticons { cursor:pointer; float: left; margin:2px 2px 1px 0; }
  .emoticonspace { float: left; margin-right:0px; }
  .emoticonusage { cursor:pointer; float: right; }
  a.rollover img { border-width:0px; display:block; }
  a.rollover img.rollover { display:none; }
  a.rollover:hover { position:relative; background-color:transparent !important;}
  a.rollover:hover img { display:none; }
  a.rollover:hover img.rollover { display:block; }

  style.css가 없기 때문에 위 부분을 screen.css에 추가

• skin.html 변경 시 width 조정
  플러그인과 같이 제공되는 bb_helper.zip 내에 있는 ‘댓글.txt’ 및 ‘방명록.txt’를 ‘skin.html’에 적용하면서 본 블로그 스킨의 댓글 및 방명록 textarea 부분의 width와 맞추기 위해 txt 파일 맨 위에 있는 ‘<div class=”emoticonborder” style=”/*width:604px*/; background-image:url(./images/bb_bg.bmp); background-repeat:repeat-x;”>’를 ‘<div class=”emoticonborder” style=”width:579px; background-image:url(./images/bb_bg.bmp); background-repeat:repeat-x;”>’와 같이 조정

위와 같이 약간의 Customizing을 통해 현재 블로그 아래 및 방명록 섹션에서 보는 바와 같이 BBCode를 입력할 수 있는 bar가 설치된다. 그리고 BBCode 사용법을 모르는 사람들을 위해 bar 우측에 있는 ‘?‘ 버튼을 클릭해서 참고하면 된다.

1. 물론, 댓글이나 방명록이 많은 블로그가 아니라서 실제 효율성은 떨어질 수도 있으나 개인적으로 보기에는 좋다.