티스토리 오픈그래프(Open Graph) CSS

오픈그래프(Open Graph)

티스토리 블로그에서 오픈그래프 디자인을 수정하기 위해서는 상위 부모 블록에서 하위 블록으로 선택자를 잡아 적용하면 된다. 호버 기능을 활용하기 위해서는 :hover로 적용한다. 상위 부모의 클래스가 다른 경우, 클래스명을 수정한 다음 적용해준다.

 

티스토리 블로그 설정

티스토리 블로그 설정

티스토리 블로그 만들기

티스토리 블로그 만들기

위와 같이 마우스를 오픈그래프 위에 올렸을 때, 더욱 강조되는 스타일을 연출할 수 있다.

 

오픈그래프(Og)

.entry-content figure[data-ke-type='opengraph'] a,
.entry-content #tt-body-page figure[data-ke-type='opengraph'] a {
    border-color: var(--color);
    color: var(--color);
    border-radius: 5px;
    overflow: hidden;
}

.entry-content figure[data-ke-type='opengraph'] a *,
.entry-content #tt-body-page figure[data-ke-type='opengraph'] a * {
    border-color: inherit !important;
    color: inherit !important;
}

.entry-content figure[data-ke-type='opengraph'] a:hover,
.entry-content #tt-body-page figure[data-ke-type='opengraph'] a:hover {
    border-color: var(--color); !important;
    color: var(--color); !important;
}

.entry-content figure[data-ke-type='opengraph'] div.og-text p.og-host,
.entry-content #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
    opacity: .4;
}

.entry-content figure[data-ke-type='opengraph'] div.og-text p.og-desc,
.entry-content #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
    opacity: .6;
    line-height: 1.6!important;
}

내 경우에는 .entry-content로 되어 있는데, 블로그마다 다르므로, 적절하게 찾아 적용해준다. 정확하게 수정했을 경우, 꽤 멋진 스타일을 구성할 수 있다. 글꼴도 수정해주면 더욱 좋다.

 

티스토리 썸네일 누락 해결방법

티스토리 썸네일 누락 해결방법

티스토리 링크빌딩 방법

티스토리 링크빌딩 방법

티스토리 키보드 단축키 수정/추가 - ProcessShortcut 기능

티스토리 키보드 단축키 수정/추가 - ProcessShortcut 기능