티스토리의 게시글 내의 신고 버튼을 꾸미는 방법을 찾아 보았다.

인터넷에 아무리 검색해 보아도 제대로 설명되어 있는 블로그나 글은 거의 없다.

티스토리에서 기본으로 제공되는 신고하기 버튼은 이미지 형태로 되어 있다. 그래서인지 CSS로만 수정하기는 어렵다. 여기서는 글자로 바꾸는 방법과 아이콘 폰트를 추가하는 방법을 간단히 소개하려고 한다.

(근데 현재 나의 블로그의 스킨과는 충돌이 생기는지 적용이 되지 않는다. ㅠ.ㅠ 다른 스킨에 적용하면 바로 되던데;;)

1 신고 버튼 꾸미기 1

먼저 간단히 신고 버튼의 이미지를 아래와 같이 '## 신고할꺼야' 로 바꾸어 보았다.

아래의 문구를 스킨의 HTML 에 작성한다.

그럼 신고 버튼의 이미지는 변경한 글자로 변경되어 있을것이다.

<script type="text/javascript">
$(function(){
	$(".tt_article_useless_p_margin>div:last-child").addClass("singo");
	$(".singo div a").html("## 신고할꺼야");
	$(".singo div").removeAttr("style");
});
</script>

신고 버튼 변경 결과 1

2 신고 버튼 꾸미기 2

그리고 변경된 글자의 꾸미기는 위의 스크립트에서 생성한 유닛?인 .singo 를 스킨의 CSS 에서 사용하면 된다.

예를 들면 아래와 같이 오른쪽에 정렬하고 색상도 변경해 보았다.

.singo {
    position: absolute;
    right: 20px; /* 오른쪽 정렬 */
    width: inherit !important;
    margin-top: 0px !important;
    height: auto !important;
}

.singo a {color: #07a; }  /* 글자 색상  */

신고 버튼 변경 결과 2

3 신고 버튼 꾸미기 3

이제 아이콘 폰트를 글자 앞에 추가하는 방법이다. 물론 스킨에 아이콘 폰트가 설치되어 있거나 폰트어썸 같은 웹상의 아이콘 폰트를 사용하면 된다.

신고하기 버튼에 아이콘 폰트를 추가하는 것은 CSS를 통해 입력하면 된다.

두번째 과정에서와 같이 CSS에 아래를 참고하여 문구를 추가하면 된다.

.singo a:before {
    content: "\e845"; font-family:'cczicon'; color: #e0557d;
}

신고 버튼 변경 결과 3 - 아이콘 폰트 추가

4 신고 버튼 꾸미기 4

신고 버튼을 버튼식으로 변경해보았다.


.singo {
      position: absolute;
      right: 20px; /* 오른쪽 정렬 */
      width: inherit !important;
      margin-top: -30px !important; /* 위치 정렬 */
      padding: 0 5px 5px;
      background-color: #e0557d; /* 배경 색상 - 핑크색  */
      border-radius: 5px; /* 모서리 둥글게  */
}

.singo a {color: #fff; }  /* 글자 색상 - 하얀색  */


티스토리 신고 기능 버튼을 꾸미는 방법에 대해 간단히 소개해 보았다. 이보다 더 쉽게 설명할 수는 없을듯;;;

다른 스킨에서 테스트 해보면 잘 적용되는데 정작 내 스킨에서는 적용이 안된다. 켁 -.-;