티스토리 글 제목에 이미지 추가하기

위 사진처럼 블로그 글 제목에 아이콘 이미지를 마치 이모지처럼 삽입해서 사용하는 방법을 알아보자.

1. 블로그 관리 - 꾸미기 - 스킨 편집

2. HTML 편집 - 파일 업로드

python-icon.svg를 추가했다.

3. HTML - </body> 하단부에 아래 코드 추가

<script>
    $('a, h2').each(function(){
        $(this).html($(this).html().replace(/\[Python\]/g, '<img src="./images/python-icon.svg" class="tech-icon" style="height: 1em; vertical-align: middle;">'));
    });
</script>

 

자동으로 제목(a 또는 h2 태그) 내의 `[Python]`이라는 텍스트가 이미지로 자동 변환된다.

(+) 다만 모바일의 경우 스킨이 적용되지 않기 때문에 제목에 그대로 [Python]이라고 표시된다.