티스토리 블로그 글 페이지 스킨 ( Velog 스타일 + 커스텀 ) CSS 코드

이 블로그에서는 Odyssey 스킨을 사용하고 있습니다. 여기서 코드블럭과 링크를 Velog 느낌나게 수정했고, blueprintUE iframe이 이상하게 표시되는 문제때문에 iframe 크기와 border-width 를 조절했습니다. 또, h1태그(대분류) 외형을 다른 블로그에 있는걸 참고해서 수정했습니다. 마크다운으로 글을 작성하는 것을 기본으로 합니다.

 

css 맨 아래 추가하시면 됩니다.

/****************  custom ****************/
.contents_style iframe { /* blueprintUE.com 대응 */
    width: 900px;
    height: 500px;
    border-width: 0px;
}

/*.contents_style p > code,
.contents_style li > code*/
.contents_style *:not(pre) code { /* 인라인 코드블럭 대응 */
    display: inline;
    background: #f3f5f7;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.7;
    letter-spacing: -0.004em;
    word-break: keep-all;
    overflow-wrap: break-word;
    font-size: 85%;
}

.contents_style pre { /* 코드블럭 대응 */
    background: #fbfcfd;
    padding: 1rem;
    border-radius: 4px;
    line-height: 1.5;
    overflow-x: auto;
    letter-spacing: 0px;
    overflow-wrap: break-word;
    display: block;
    white-space-collapse: preserve;
    text-wrap: nowrap;
    margin: 1em 0px;
}

.contents_style a { /* 링크 색상 대응 */
    color: #12b886;
    text-decoration: none;
    line-height: 1.7;
    letter-spacing: -0.004em;
}

.contents_style h1 { /* 대분류 꾸미기 */
    padding: 5px 15px;
    border-left: 5px solid #bdbdbd;
    border-bottom: 0.5px solid #bdbdbd;
    background-color: #fafafa;
}

.contents_style > ul,
.contents_style > ol { /* 리스트와 보통 글 간격 조절 */
    margin: 6px auto 12px;
}

.contents_style li ul,
.contents_style li ol { /* 리스트 사이 줄 간격 조절 */
    margin: 0px auto 0px;
}

.contents_style ol li { /* 숫자 리스트 줄 간격 조절 */
    margin-bottom: 0px;
}