[ 티스토리 ] 등록된 댓글 중에서, 파비콘이 없는 댓글에 이미지 넣어주기

티스토리에서, [ 홈페이지 아이콘 표시 (파비콘) ] 플러그인을 설정해놓은 상태라면,
티스토리 가입자가 남긴 댓글에는, 그 가입자의 파비콘 이미지가 자동으로 표시된다.
이미지가 표시될 때, 사용되는 태그는 <img>이며, 사이즈는 16px이다.
☞ [사용법] 아이콘 / 파비콘 / 이모티콘 / 생일 표시 플러그인 ─ [ 티스토리 가이드 ]

가입자가 아닌 경우에는 <img> 태그가 없다.
바로 이런 경우에, 파비콘을 대신할 이미지를 넣어주는 방법을 설명하려고 한다.

내가 생각해낸 방법은 대략 다음과 같다.
파비콘이 들어가게 되는 태그에다가, 자바스크립트로 새로운 "class"를 추가해주고,
관리자 페이지의 "CSS 편집"에서, 해당 "class"에다가 배경을 설정해준다.

지금부터는 더 구체적으로 설명을 하겠다.
설명이 너무 길다고 불평하지 마시기를...
초보자도 이해할 수 있도록, 최대한 노력한 것이다. ^^*

---

1. 댓글용 아이콘으로 사용할 그림 파일을 업로드한다.

관리자 페이지 → HTML/CSS 편집 → 파일업로드 → + 추가

이미지는 반드시 크기가 가로, 세로 모두 16px인 것으로 한다.

이 스킨에서 사용한 이미지 파일은 [ ico_balloon.gif ] 이며
지금부터는 이 파일을 예로 들어서 설명하겠다.

---

2. 스킨의 html에서 아래 치환자를 찾는다.

티스토리의 기본 스킨인 "Pure Black"에서는,
위의 치환자가 <span> 태그에 들어있으며, "class"는 "name"이다.

<span class="name"></span>
<span class="name"></span>

반응형 스킨의 기본인 "#1"에서도 <span> 태그에 들어있으며, "class"는 "tit_nickname"이다.

<span class="tit_nickname"> <span class="ico_skin ico_secret"></span></span>
<span class="tit_nickname"></span>

지금부터는 위 스킨들을 기준으로 설명하겠다.

---

3. 위 2번의 태그들에게, 새로운 속성을 하나 추가한다.

<span class="name" data-favicon=""></span>
<span class="name" data-favicon=""></span>

또는 

<span class="tit_nickname" data-favicon=""> <span class="ico_skin ico_secret"></span></span>
<span class="tit_nickname" data-favicon=""></span>

" 어...??!! data-favicon이 뭐지?? " 하시는 분은 이 블로그에 있는 아래 글을 읽어보시오.
☞ [ HTML ] 태그에 나만의 속성을 추가하기

---

4. 자바스크립트를 사용하여, "data-favicon" 속성을 가진 <span> 태그들을 가져와서,
그 태그 안에 <img> 태그가 들어있지 않으면, 새로운 "class"를 추가한다.

var allSpan = document.getElementsByTagName( "span" ); 

for ( var x = 0; x < allSpan.length; x++ ){ 
    var span = allSpan[ x ]; 

    if ( ! span.hasAttribute( "data-favicon" ) ){ continue; } // "data-favicon" 속성이 없으면 건너뛰기. 

    var img = span.getElementsByTagName( "img" ); 

    if ( img.length < 1 ){ span.className = span.className + " no_fav"; } 
} 

---

5. 위의 스크립트를 스킨의 "html"에 추가한다.

<script type="text/javascript">

var x, span, img; 
var allSpan = document.getElementsByTagName( "span" ); 

for ( x = 0; x < allSpan.length; x++ ){ 
    span = allSpan[ x ]; 
    if ( ! span.hasAttribute( "data-favicon" ) ){ continue; } 
    img = span.getElementsByTagName( "img" ); 
    if ( img.length < 1 ){ span.className = span.className + " no_fav"; } 
} 
</script>

</s_t3><!-- 요놈 바로 위에다가 추가하면 됨. -->
</body>
</html>
 

---

6. 관리자 페이지의 "CSS 편집"으로 가서,
"no_fav"에 대한 스타일을 아래와 같이 작성한다.

.no_fav { background:url(images/ico_balloon.gif) no-repeat 0 0; padding-left: 21px } 

"padding-left"는 표시되는 모양새를 봐가면서 조정하시기를...

---

실행 결과를 보여주기 위해서, 아래에 댓글을 추가하였다.

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*