티스토리 - 이전 발행 글 넣기 박스 크기 줄이기

 

본문 아래의 코드를 티스토리 관리자 계정 CSS에 삽입해 주면 포스팅 발행 시 ‘이전 발행 글 넣기’ 박스 크기를 줄여줄 수 있습니다. 이는 본문의 내용의 공간을 줄여 줌으로써 전체 길이를 줄이고 사용자로 하여금 편의성을 제공하기도 합니다.

 

 

변경 전 변경 후

이전 발행 글 넣기 박스 사이즈 수정전

▼

이전 발행 글 넣기 박스 사이즈 수정후

 

▷ 위 이미지와 같이 기본 제공되는 이전 발행 글 넣기 박스 크기가 줄어듭니다.

 

Step 1. 플러그인 적용

티스토리 플러그인 - 이전 발행 글 링크 삽입 적용

 

▷ 티스토리 관리자 계정 ≫ 플러그인 탭 ≫ 이전 발행 글 링크 삽입 ≫ 적용

 

 

Step 2. CSS 코드 삽입

▷ 티스토리 관리자 계정 ≫ HTML 편집 ≫ 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 코드.txt

0.00MB

 

---

 

 

티스토리 블로그 운영에 도움이 되는 사이트 모음

 

티스토리 블로그(관리자) 접속 장애 오류시 해결방법(feat. 크롬 브라우저)

 

티스토리 블로그 관리자 메뉴 초기 설정 방법 - 북 클럽 스킨