티스토리 링크 미리보기, 투명이미지 버그 고치기

티스토리 링크 미리보기

티스토리에 링크를 걸고 링크 문장에서 엔터를 치면 아래와 같은 미리보기가 뜹니다.

1번 이미지

2번 이미지

위의 두 사진에서 차이가 보이시나요?

1번 이미지는 기본형태고, 2번 이미지는 이 글에서 소개할 내용을 적용한 이후의 이미지 입니다.

 

네 그렇습니다. 기본형태에서 티스토리 아이콘이 겹쳐보이네요.

이는 썸네일 이미지가 투명배경일때 발생하는 버그입니다.

 

 

 

투명 이미지 버그 고치기

투명색상 썸네일인경우 미리보기 이미지가 겹쳐보이는 문제가 발생하는데 위의 상황을 말끔히 없애줄 단 한줄의 코드가 있습니다.

1. 관리 페이지에서 "꾸미기" - "스킨 편집"에 들어갑니다.

   

2. HTML 편집에 들어갑니다.

   

3. CSS에 들어가서 다음의 코드를 입력하시고 적용을 눌러 설정을 저장합니다.

   

   실제 적용 예시

   코드는 아래와 같으며 복사가능합니다.

   figure[data-ke-type='opengraph']:not([data-og-image=""]) .og-image:before{background-image:none!important}

   이미지가 있다면, data-og-image에 값이 있다는점을 고려해서 썸네일 이미지가 존재한다면 티스토리 이미지가 겹쳐보이지 않게 티스토리 아이콘 부분을 지우는 CSS코드입니다.