티스토리 북클럽 스킨 관리자 댓글 구별하기, fontawesome으로 아이콘 폰트 추가하기

북클럽 스킨 rep_class 치환자 추가하기

북클럽 스킨에는 기본적으로 rep_class 치환자가 없어 관리자 댓글과 일반 유저가 남긴 댓글이 똑같이 표시됩니다. 역시 rep_class 치환자만 추가해주면 관리자 댓글을 따로 구별할 수 있습니다.

 

html 수정하기

블로그 설정 - 스킨 편집 - html 편집에서 Ctrl + F 단축키를 누른뒤 s_rp_container를 입력하고 엔터키를 눌러 검색합니다. 이후 <s_rp_container>부터 </s_rp_container>까지 아래 코드로 바꿔줍니다.(<div class="author-meta">아래 부분에 치환자가 추가된 코드입니다.)

<s_rp_container>
 <div class="comment-list">
  <ul>
   <s_rp_rep>
    <li>
     <div class="author-meta">
     <div class="">
      <img src="" class="avatar" alt="">
      <span class="nickname"></span>
      <span class="date"></span>
      <span class="control">
       <button type="button">더보기</button>
       <div class="link">
        <a href="">댓글주소</a>
        <a href="#" onclick="">수정/삭제</a>
       </div>
       </div>
      </span>
     </div>
<p><br>
<a href="#" onclick="" class="reply">답글</a></p>
<s_rp2_container>
 <ul>
  <s_rp2_rep>
   <li>
    <div class="author-meta">
    <div class="">
     <img src="" class="avatar" alt="">
     <span class="nickname"></span>
     <span class="date"></span>
     <span class="control">
      <button type="button">더보기</button>
      <div class="link">
       <a href="">댓글주소</a>
       <a href="#" onclick="">수정/삭제</a>
      </div>
     </span>
    </div>
    </div>
<p></p>
     </li>
    </s_rp2_rep>
   </ul>
  </s_rp2_container>
 </li>
</s_rp_rep>

 

위 코드를 붙여넣기한 뒤, 다시한번 Ctrl + F를 눌러 s_guest_rep을 검색해 줍니다. 이후 아까처럼 <s_guest_rep>부터 </s_guest_rep>까지 아래 코드로 바꿔넣습니다.

<s_guest_rep>
 <li>
  <div class="author-meta">
  <div class="">
   <img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진">
   <span class="nickname"></span>
   <span class="date"></span>
   <span class="control">
    <button type="button">더보기</button>
    <div class="link">
     <a href="#" onclick="">수정/삭제</a>
    </div>
    </div>
   </span>
  </div>
<p><br>
<a href="#" class="reply" onclick="">답변</a></p>
<s_guest_reply_container>
 <ul>
  <s_guest_reply_rep>
   <li>
    <div class="author-meta">
    <div class="">
     <img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="프로필사진">
     <span class="nickname"></span>
     <span class="date"></span>
     <span class="control">
      <button type="button">더보기</button>
      <div class="link">
       <a href="#" onclick="">수정/삭제</a>
      </div>
     </span>
    </div>
    </div>
<p></p>
    </li>
   </s_guest_reply_rep>
  </ul>
  </s_guest_reply_container>
 </li>
</s_guest_rep>

 

여기까지 코드를 수정했으면, 블로그에 들어가서 F12를 눌러 개발자 도구를 켠 뒤, 개체 선택(왼쪽 위 아이콘 또는 Ctrl + Shift + C) 모드로 전환하고 닉네임 부분을 클릭하면 <div class="rp_admin">가 생긴것을 확인할수 있습니다.

<div class="rp_admin">가 추가된 모습

관리자 댓글 구별하기

치환자를 추가했으니 이제 css로 관리자 댓글을 구별하면 끝입니다.

블로그 설정 - 스킨 편집 - CSS로 들어가 가장 아래에 코드를 추가해 줍니다.

.rp_admin .nickname::after {
    content: '문자';
    color: 색상;
}

.guest_admin .nickname::after {
    content: '문자';
    color: 색상;
}

여기서 문자는 닉네임 뒤에 보이는 문자이고, 색상은 그 문자의 색깔입니다. 예를 들어서, content: '관리자'; color: royalblue;로 설정한다면 닉네임은 아래처럼 보이게 됩니다.

관리자가 남긴 댓글은 관리자 표시

제 블로그는 체크아이콘과 블로그주인이라는 문자가 함께 보이도록 설정해두었습니다.(글 하단에서 확인 가능합니다)

 

fontawesome으로 아이콘 폰트 추가하기

CSS 설정에서 /* Web Font Load */ 한줄 아래에 아래 코드를 넣어줍니다.

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css');

 

그다음, 아이콘 폰트를 적용할 곳에 폰트를 지정합니다.

.(적용할 곳){
 font-face: '원래 폰트', 'Font Awesome 5 Free';
 }
 
<!-- 예시 -->
.body{
 font-face: 'Nanum Gothic', 'Font Awesome 5 Free';
}

이후, fontawesome에 접속하여 검색창에 원하는 아이콘을 영어로 검색해줍니다. 원하는 아이콘을 누르고, 사진에 나오는 작은 아이콘 부분을 눌러 복사합니다.

폰트어썸 아이콘 복사

 

이후 아까 복사한 아이콘을 붙여넣으면 아이콘이 보이게 됩니다.(에디터에서는 보이지 않습니다)

 

폰트어썸 아이콘을 관리자 댓글의 관리자명 뒤에 추가하려면 css설정을 다음과 같이 해주면 됩니다.

.rp_admin .nickname::after {
    content: '(복사한 아이콘)';
	  color: (색상);
}

.guest_admin .nickname::after {
    content: '(복사한 아이콘)';
	  color: (색상);
}

.rp_admin, .guest_admin .nickname{
	font-family: '(댓글에 적용할 폰트명)', 'Font Awesome 5 Free';
}