Disqus 위에 안내 문구 넣기

Disqus 댓글이 생소해서, 혹은 라이브리 처럼 남긴 댓글이 sns에도 그대로 뜨는건 아닐까 해서 댓글남기기 꺼려하시는 분들이 많은 것 같습니다.

그래서 이번 글에서는 디스커스 댓글 창 위에 안내문구를 삽입하는 방법을 알아보겠습니다.

CSS의 pseudo-element selector인 :before를 이용하여 간단히 마칠 수 있습니다. 

디스커스를 skin내에 여러군데 삽입한 경우에도 모든 곳에 일괄적으로 표시되어 편리합니다.

적용 방법

html/css편집에 들어가서

style.css에 다음을 추가해줍니다.

#disqus_thread:before {

  white-space: pre;

  content: "SNS계정으로 댓글을 달아도 SNS에 글이 남지 않습니다.\a 비회원 댓글을 남길 때 이메일 주소를 입력하시면 댓글 알림을 받을 수 있습니다.\a 이메일 주소는 그밖에 용도로 절대 활용되지 않습니다.\a";

  font-size: .7em;

  overflow-wrap: break-word;

}

수정 방법

• 안내 문구 내용은 content: 뒷부분을 수정하시면 됩니다.
  \a가 줄바꿈을 의미합니다.(white-space:pre; 와 함께 동작합니다)
  따옴표가 지워지지 않도록 주의하세요.
• 글자 크기는 font-size를 조절합니다. 0.7em은 일반 글씨크기의 70% 크기를 의미합니다.
• 그 밖에 수정사항은 일반 css 꾸미기 과정과 동일합니다.  

.