티스토리 신형 에디터에서 링크 삽입 시 미리보기 절반 크기로 줄이기
티스토리의 새로운 글쓰기 에디터에서 링크글을 삽입 후 엔터를 입력하면 바로 아래에 해당 링크의 미리보기 이미지가 크게 적용됩니다. 근데 너무 공간을 많이 차지하는 것 같습니다. 제 기준에서는 너무 커요. 그렇기에 크기를 절반으로 줄였습니다. 가로 크기는 본문의 가로폭을 모두 100% 사용하는건 동일합니다. 세로 크기가 절반으로 줄어듭니다. 썸네일 이미지도 동시에 4분의 1 크기로 축소되었습니다.
위의 이미지가 바로 기존 티스토리의 링크글 미리보기 스타일입니다. 저만 크다고 생각한건가요? 아무튼 이 커다란 사이즈를 절반으로 줄여버렸습니다.
위의 이미지가 바로 수정된 링크글의 모습입니다. 세로 크기를 절반으로 줄였기 때문에 자연스럽게 썸네일 이미지는 4분의 1로 줄어들었습니다. 비율은 유지해야 하니까요. 그리고 내부 Padding값도 줄이고 본문 미리보기 텍스트는 기존에는 두줄로 나왔지만 이젠 한 줄로 나오도록 수정했습니다. 또한 출처 사이트 표시를 오른쪽 아래 구석으로 보냈습니다. 폰트 크기는 대폭 줄여서 말입니다. 현재 친효스킨 2.1에서는 기본값으로 적용되어 있는 상태입니다. 타스킨을 사용하시는 분들을 위해서 CSS 코드를 별도로 올려놓겠습니다.
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;
}열어보시면 이런 내용의 코드가 담겨있을 겁니다. 이것을 몽땅 복사하여 자신의 스킨 중 CSS에 적절히 빈 공간을 확보하여 삽입하시기 바랍니다. 이후에는 따로 조치할 부분이 없습니다. 그냥 이게 끝입니다. 간단하죠? 참고로 모든 글에 일괄 적용되는 부분이기때문에 세팅 완료 후 바로 확인 할 수 있습니다. 과거에 링크를 남겼던 글들을 살펴보시기 바랍니다. 링크 미리보기 스타일이 정상적으로 잘 적용이 되었기를 응원합니다. 끝.
