티스토리 New 아이콘 색상 변경하기

안녕하세요.

 

제가 기존에 운영하던 블로그는 신규 글 추가시 New 아이콘이 주황색으로 표기가 되었는데 이상하게 지금 블로그는 회색으로 표기가 되네요..

 

그래서 코드를 까보았지만 img src의 url이 입력되는 위치가 없었습니다.

 

그래서 인터넷 여기 저기를 찾아본 결과..

 

우선 크롬에서 찾은 경로로 들어가 이미지를 저장해주었습니다.

그리고, 해당 이미지를 스킨편집>파일업로드에 추가해주었어요.( 파일명: new_ico_5.gif )

아래를 클릭해서 다운 받으셔도 됩니다 :)

 

css 중간에 아래 코드를 넣어주고

img.va {vertical-align: vaseline;}

html 가장 하단 </body> 바로 위에 아래 스크립트를 넣어주었습니다.

<script>
$('img[alt="N"]').each(function(){$(this).replaceWith('<img src="./images/new_ico_5.gif" class="va">');
});
</script>

 

이렇게하니 카테고리 쪽만 변경이 되더라구요.

그리고 이렇게 변경을 하면 웹이 표시되면서 회색 N 표시를 주황색 N으로 대체하는 것이기 때문에 뭔가 로드도 더 걸릴 것 같아요.

 

그래서 코드를 지우고 css에 아래의 한 줄 코드를 넣으니 약간 이상하지만 변경이 되었네요.

코드 자체는 new_ico_1이 포함이 되어 있으면 오른쪽 필터처럼 변경한다는 내용이에요!

img[src*="new_ico_1"]{filter: sepia(30%) hue-rotate(-20deg) saturate(2500%) contrast(200%);}

여기서 sepia는 밝기, hue-rotate는 색상이라고 보시면 됩니다.

sepia와 hue-rotate, saturate 값을 변경해서 제가 마음에 드는 색상과 느낌으로 바꿨는데요.

이를 잘못 조절하시면 카테고리 말고 포스팅 목록에 뜨는 N이 이상하게 찌그러지게 되니까 원하시는 모양으로 바꿔가면서 확인해서 사용하시면 될 것 같습니다.

 

그럼 방문하신 모든 분들 좋은 하루 되세요!