티스토리, 관리자댓글에 특정문구 추가

네이버 블로그를 방문하게 됐는데 블로그 주인이 댓글을 달면 아래 그림 1번처럼 블로그 주인이라는 이미지가 나타난다는 것을 알았다. 이것을 보고서 티스토리에서도 하고 싶다는 생각이 들었다. 그래서 해보기로 했다. 예전에도 적었지만 티스토리는 스킨의 HTML/CSS 편집이 가능하므로 얼마든지 가능하게 할 수 있다. HTML/CSS 편집의 불가능한 네이버 블로그는 불가능하다. 이렇게 하는 것은 HTML/CSS 편집을 모른다면 그림의 떡이지만...그

티스토리에서 블로그 관리자의 댓글만 다르게 하는 것은 구글 검색에서 찾았더니 .rp_admin에 정의하면 된다는 것을 알았다. 방명록인 경우는 .guest_admin이었다. 그래서 어떻게 변경할까 생각하다가 닉네임 앞에 블로그 주인이라는 문구를 적으려고 했다. 예전에 문구를 넣는 방법은 CSS3에서 content를 사용한다는 것을 알았었다. 즉 아이디, 클래스 등에 before와 after를 사용한 후 content를 사용하면 문구를 넣을 수 있다. 

그리고 아래는 rp_admin 클래스에 있는 name 클래스 다음에 나는 글자가 아닌 fontawesome을 사용하면 아이콘 더 할 수 있다. 아이콘을 더하는 것은 알 필요 없는데 FontAwesome 아이콘을 첨가하는 것은 구글 검색을 통해서 알았다. 참고로 알 필요없지만 알고 싶다면 FontAwesome 아이콘을 추가하는 방법은 구글 검색에서 fontawesome content이라는 검색어로 검색해서 찾을 수 있다. 

최종적으로 아래 그림의 나타난 코드를 HTML/CSS 편집의 CSS에 넣었다. 중요한 것은 관리지의 댓글을 나타내는 클래스인 .rp_admin이다. 그리고 .guest_admin은 방명록의 댓글이다. 

그러면 아래 그림 2번과 같이 관리자 닉네임 옆에 자물쇠 아이콘이 생긴다. 2번 아이콘은 이미지가 아니고 폰트 아이콘이다. 티스토리에서 스킨을 만들거나 한다면 폰트 아이콘을 알 것이다. 참고로 이 블로그에서 아이콘을 사용했는데 ADMIN이라는 문구를 사용하려고 했다.

나는 클래스나 태그 등의 CSS를 볼 때 크롬 브라우저의 검사를 사용한다. 해당 요소에 마우스 오른쪽 버튼을 눌러 검사를 누르면 클래스와 태그 등을 알 수 있다. 참고로 웨일 브라우저로 크로미엄을 기초로 하므로 크롬과 비슷한데 방금 봤더니 웨일도 검사였다.