loading

친절한효자손 취미생활

티스토리의 새로운 글쓰기 에디터에서 링크글을 삽입 후 엔터를 입력하면 바로 아래에 해당 링크의 미리보기 이미지가 크게 적용됩니다. 근데 너무 공간을 많이 차지하는 것 같습니다. 제 기준에서는 너무 커요. 그렇기에 크기를 절반으로 줄였습니다. 가로 크기는 본문의 가로폭을 모두 100% 사용하는건 동일합니다. 세로 크기가 절반으로 줄어듭니다. 썸네일 이미지도 동시에 4분의 1 크기로 축소되었습니다.

 

위의 이미지가 바로 기존 티스토리의 링크글 미리보기 스타일입니다. 저만 크다고 생각한건가요? 아무튼 이 커다란 사이즈를 절반으로 줄여버렸습니다.

 

위의 이미지가 바로 수정된 링크글의 모습입니다. 세로 크기를 절반으로 줄였기 때문에 자연스럽게 썸네일 이미지는 4분의 1로 줄어들었습니다. 비율은 유지해야 하니까요. 그리고 내부 Padding값도 줄이고 본문 미리보기 텍스트는 기존에는 두줄로 나왔지만 이젠 한 줄로 나오도록 수정했습니다. 또한 출처 사이트 표시를 오른쪽 아래 구석으로 보냈습니다. 폰트 크기는 대폭 줄여서 말입니다. 현재 친효스킨 2.1에서는 기본값으로 적용되어 있는 상태입니다. 타스킨을 사용하시는 분들을 위해서 CSS 코드를 별도로 올려놓겠습니다.

 

CSS 세팅

먼저 아래의 텍스트 파일을 받아주시기 바랍니다. 다 받으신 분들은 열어보시기 바랍니다.

 

티스토리 링크 스타일 CSS.txt
0.00MB

 

/* 티스토리 자동 링크 스타일 */
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에 적절히 빈 공간을 확보하여 삽입하시기 바랍니다. 이후에는 따로 조치할 부분이 없습니다. 그냥 이게 끝입니다. 간단하죠? 참고로 모든 글에 일괄 적용되는 부분이기때문에 세팅 완료 후 바로 확인 할 수 있습니다. 과거에 링크를 남겼던 글들을 살펴보시기 바랍니다. 링크 미리보기 스타일이 정상적으로 잘 적용이 되었기를 응원합니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 적용 잘 됐습니다. 훨씬 보기 좋습니다. 항상 감사합니다~ :)
    2020.11.10 01:05 신고
  2. 많은 도움을 얻고 있습니다. 항상 감사합니다^^
    2020.11.10 01:30 신고
  3. 오~ 훨씬 예쁜거 같아요.
    저도 바로 적용하였습니다.
    감사합니다.
    2020.11.10 17:43 신고
  4. 정말 간편하게 바꿔주셨네요! 항상 감사합니다! :)
    2020.11.17 12:29 신고
  5. 좋은 글 감사합니다.
    저도 링크 박스가 거슬렸는데
    크기가 작으니 보기 좀 낫네요.
    감사히 사용하겠습니다 :)
    2020.12.03 09:23 신고
  6. 저는 왜 신형에디터로 링크삽입을 통해 하는데도 주소링크만 나올까요? https://springeye1.tistory.com/208
    2021.01.07 09:53 신고
    • 링크 주소에서 엔터를 눌러야 바로 아래에 미리보기 링크가 생성됩니다.
      2021.01.07 09:59 신고
    • 너무너무 감사드립니다. 이런 쉬운 방법을 몰랐다니요. 죄송해요...좋은 스킨만들어주셨는데 제가 무지해서ㅠㅠ
      2021.01.07 10:01 신고
  7. 와~ 정말 감사합니다. 오픈그래프 링크가 너무 거대해서 계속 거슬렸는데, 한방에 해결이 되었네요 ^^
    2021.03.28 03:30 신고
  8. 잘 사용하겠습니다! 감사합니다 :D
    2021.06.08 16:22 신고
  9. 감사합니다~블로그 초보인데 많은 정보 잘 얻고 있습니다. 항상 감사합니다.
    이번 오픈그래프 크기도 적용하니 잘 되네요~
    근데 하나 궁금한게 있는데요~
    글씨에 링크를 걸고 그 아래 오픈그래프가 뜨게 하고 있는데,
    글자와 오픈그래프 사이 여백을 줄이고 싶은데, 도저히 어떻게 하는지 모르겠네요. ㅜㅜ
    북클럽 스킨은 여백이 좁고 적당한데,
    지금 쓰고 있는 왓에버 스킨은 글자랑 오픈그래프랑 여백이 너무 넓더라구요.
    2021.06.15 18:53 신고
  10. ㅋㅋ 환자 ㅎㅎ
    테스트겸해서 아무글이나 링크를 넣어본거구요.

    https://eoeksgkek.tistory.com/4
    2021.06.16 13:57 신고
    • 링크가 본문에 있나요? 없는 것 같습니다.
      2021.06.16 14:01 신고
    • 아아 확인했습니다.
      2021.06.16 14:02 신고
    • 티스토리의 CSS에서 제공하는 스타일이 있습니다. 아래의 부분입니다.

      figure[data-ke-type='opengraph'],
      #tt-body-page figure[data-ke-type='opengraph'] {
      margin-top: 30px;
      margin-bottom: 30px;
      }

      여기의 margin-top과 bottom의 값을 줄여보시면 여백이 바뀔 것입니다. 이것을 CSS에 그대로 입력해둡니다. 만약 수치를 변화해도 적용이 잘 안 된다면 세미콜론 바로 안쪽에 !important를 입력합니다. 즉 margin-top: 30px !important; 의 형태가 됩니다.
      2021.06.16 14:05 신고
  11. 네~해결이 되었네요!
    혼자서 계속 끙끙앓고 있었는데~
    너무 감사합니다!
    2021.06.16 14:31 신고