라이브러리 브랜드

2021. 10. 27. 11:53

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

공유하기
반응형

오픈그래프(Open Graph)

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

 

티스토리 블로그 설정

 

티스토리 블로그 설정

티스토리 블로그 관리자 설정 티스토리를 개설하고 처음 스킨까지 적용할 때, 어느 정도 변경해줘야 하는 설정 값이 있다. 티스토리 관리자 화면에서 어떤 부분들을 수정해야 하고, 어떤 의미를

creativestudio.kr

티스토리 블로그 만들기

 

티스토리 블로그 만들기

이번에는 티스토리 블로그를 어떻게 개설하고 운영하면 좋을지 간단하게 정리해보고자 한다. 티스토리 블로그는 만들기 어렵지 않다. 카카오 이메일만 있다면 다음이나 네이버블로그를 만드는

creativestudio.kr

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

 

오픈그래프(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로 되어 있는데, 블로그마다 다르므로, 적절하게 찾아 적용해준다. 정확하게 수정했을 경우, 꽤 멋진 스타일을 구성할 수 있다. 글꼴도 수정해주면 더욱 좋다.

 

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

 

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

티스토리 썸네일 누락 다음 검색엔진 썸네일 생성 티스토리에서 썸네일이 누락된다는 것은 정확히 말하면, 다음 검색 엔진에서 작성한 게시글 리스트에서 작은 사이즈의 썸네일이 보이지 않는

creativestudio.kr

티스토리 링크빌딩 방법

 

티스토리 링크빌딩 방법

언택트 시대에 블로그를 키운다는 것은 매우 중요한 의미를 갖는다. 오래전부터 알만한 사람들은 아는 수익형 블로그는 하나의 직업처럼 여겨졌다. 그리고 알면 알수록 그 방법과 규모가 어마

creativestudio.kr

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

 

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

티스토리 키보드 단축키 수정/추가 티스토리 내에서 키보드 단축키 기능을 적용할 수 있는 자바스크립트 코드다. 웹페이지 내에 ProcessShortcut 기능을 구현하기 위한 방법으로 일반적으로 공통된

creativestudio.kr

반응형
댓글 0
  • 이 글엔 댓글이 아직 없습니다.