[티스토리] 링크 북마크 미리보기 크기 수정

 

• 포스트 작성하다가 링크 북마크 이미지가 큰 것 같아 수정

⬇️

 

1. [관리] - [꾸미기] - [스킨 편집] - [html 편집] 

 

 

2. CSS 수정하기

 

/* 티스토리 자동 링크 스타일 */
figure[data-ke-type='opengraph'] a,
#tt-body-page figure[data-ke-type='opengraph'] a {
    height: 100px !important;
}

figure[data-ke-type='opengraph'] div.og-image {
    width: 100px !important;
}

figure[data-ke-type='opengraph'] div.og-text {
    left: 100px !important;
    padding: 10px !important;
}

figure[data-ke-type='opengraph'] div.og-text p.og-title,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
    max-width: 550px !important;
    font-size: 18px !important;
    color: #555 !important;
}

figure[data-ke-type='opengraph'] div.og-text p.og-desc,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
    padding-right: 50px;
    max-height: initial !important;
    -webkit-line-clamp: 1 !important;
    line-height: 14px !important;
    color: #999 !important;
}

figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
    bottom: 0 !important;
    right: 10px !important;
    font-size: 9px !important;
    color: #ccc !important;
}

 

• opengraph 를 검색하고 위 코드를 빈 곳에 복붙해주면 된다.
• important 가 붙어 있어서 먼저 적용되지만, 나는 기존 코드를 지워줬다.

 

 

References

• 친절한효자손 취미생활 / 티스토리 신형 에디터에서 링크 삽입 시 미리보기 절반 크기로 줄이기