지난번 작성한 글 - 전체 카테고리명 변경하기 의 댓글에 새글 아이콘 변경에 관한 질문이 있어 새글 발행여부 표시 아이콘 변경하기를 해보려고 한다.

전체 카테고리명 변경하기와 마찬가지로 티스토리의 개편 이후로 관리자 화면에서 새글 표시 아이콘도 여러 다양한 색상을 제공하던 것을 하나만 제공하고 변경도 불가능하게 되었다. 괜히 지저분해 보여서 나는 이제껏 사용하지 않던 기능이라 관심이 없었는데.. 

역시 이것도 카테고리명 변경하기 만큼이나 간단하다.


1 관리자 화면 새글 표시 활성화

먼저 관리자화면에서 콘텐츠 -> 카테고리 관리 화면을 클릭하여 새글 발행 여부를 '표시합니다'로 상태를 변경하고 저장한다.



2 스크립트 작성

새글 발행 아이콘 변경를 위한 스크립트를 아래와 같이 작성한다.

여기서는 기존 아이콘 이미지 대신 '새글 있지롱' 이란 텍스트를 넣어 보았다.

텍스트 외에도 아이콘 폰트( , ) 로 교체하거나 이모지 - EMOJI ( ✳️, 🆕 ) 혹은 이미지를 삽입하여 대체할 수 있다.


새글 발행여부 아이콘 변경

<script>

$('img[alt="N"]').each(function(){

$(this).replaceWith('새글 있지롱');

});

</script>


3 스킨 HTML 에 스크립트 추가 & 저장

위에 작성한 스크립트를 스킨의 HTML 의 하단 </body> 바로 위에 추가한 후 저장한다. (아래 그림 참조)

그리고 변경된 새글 표시 아이콘을 확인하면 된다.



4 변경 화면 확인

아래와 같이 새글 아이콘이 글자로 변경되어 있을것이다. 아이콘 폰트를 넣든, 이미지를 넣든, 글자를 넣든 더 꾸미는건 이제 자신의 몫이다.

모두 즐거운 티스토리가 되시길...



댓글
  • 프로필사진 묘한오빠 매번 새로운 지식을 나누어 주셔서 감사합니다.
    이미지를 넣는 방법은 열심히 찾아보겠습니다 .^^ 즐거운 주말되세요.
    저는 금방 마트갔다와서 지갑 잊어버린걸 알아서 주민등록증/카드/운전면허 분실신고를 하고 왔네요 T.T
    2017.10.14 20:20 신고
  • 프로필사진 SONYLOVE 지갑을 잃어버리셨다니 큰일이네요.
    무사히 찾아야 할텐데요.

    저도 해보니 이미지 파일로 변경하기는 쉽지 않은듯 하고 아이콘 폰트는 i 클래스를 이용하면 바로 적용되네요.
    2017.10.14 20:35 신고
  • 프로필사진 묘한오빠 지갑은 잊어버린듯 하네요. 아직까지 연락이 없는것 보면.., 카드 재발급은 신청했고 내일은 면허시험장에 가서 면허증이나 재발급해야겠습니다.
    i클래스는 또 뭔가요? ㅋㅋㅋ, 일단 알려주신 방법으로 하니 아이콘은 변경이 잘 되었습니다.
    감사합니다.
    2017.10.15 15:20 신고
  • 프로필사진 SONYLOVE 으짜쓰까요.. -.-;
    아무튼 잘못 사용되지 않아야 할텐데요..

    i 클래스는 font awesome 같은 아이콘 폰트를 사용할때 주로 사용되는 태그명이에요. 아마 탕비수다 스킨도 아이콘 폰트를 여기저기 많이 활용하는 듯 보이던데요.
    2017.10.15 15:42 신고
  • 프로필사진 liontamer 우하하하 새글 있지롱 너무 귀여워요 :) 2017.10.16 22:07 신고
  • 프로필사진 SONYLOVE ㅋㅋㅋ
    예제 만들기가 더 어려워요.
    2017.10.17 12:04 신고
  • 프로필사진 백다영 티스토리넘잘꾸미셔서 놀랬습니다ㅜㅜ친하게지내고싶어요 2017.11.20 21:09
  • 프로필사진 SONYLOVE ㅎㅎ
    좋게 봐주시니 감사합니다.
    친하게 지내요. 우리 ㅋㅋ
    2017.11.20 22:28 신고
  • 프로필사진 J uu 덕분에 잘 적용했습니다 ㅋㅋ 감사합니다! 2018.04.12 11:58 신고
  • 프로필사진 SONYLOVE 적용이 잘 되었다니 다행이네요.
    즐거운 티스토리 되시길..
    2018.05.02 16:49 신고
  • 프로필사진 SHXL2 잘 배우고 갑니다. 감사합니다 :) 2018.05.02 16:29 신고
  • 프로필사진 SONYLOVE 찾아 주셔서 감사합니다. ^_^ 2018.05.02 16:50 신고
  • 프로필사진 비밀댓글입니다 2019.02.08 07:59
  • 프로필사진 SONYLOVE 스킨에서 이미 사용중일수도 있고 다른 부분과 충돌일수도 있고 저도 잘 모르겠어요.
    스킨 제작자에게 문의를 해보시는게 더 좋지 않을까 싶어요.
    2019.02.09 22:45 신고
댓글쓰기 폼